Brzina učitavanja web stranice je glavni prioritet koji mora biti zadovoljen kako bi se posjetitelj ugodno osjećao na Vašoj web stranici.

U 90% slučajeva ako posjetitelj mora čekati duže od 5 sekunde za učitavanje, napustit će web stranicu. U ovom tutorijalu ćemo Vam pokazati kako optimizirati slike na Vašoj web stranici i time poboljšati brzinu same stranice.

Da bi se web stranica učitala server mora obraditi sve datoteke koju ju čine npr. HTML, JS, CSS, JPG, PNG. Te datoteke se vraćaju kao odgovor posjetitelju i prikazuju mu se u web browseru.

Slike su obično najveće podatkovne datoteke koje korisnik mora učitati prilikom pokretanje web stranice. Pokazati ćemo kako smanjiti veličinu datoteke, a da pritom ne izgubimo kvalitetu slike.

 

Korak 1

Napravite korisnički račun na kraken.io.  Kraken.io je web servis za optimizaciju slika. Nudi Vam sučelje za optimizaciju jedne po jedne slike. Ako Vaša web stranica ima više od 100 slika, ovo će biti mukotrpan posao. Zato ćemo u nastavku opisati kako automatizirati ovaj postupak python skriptom.

Korak 2

Na serveru pokrenuti python skriptu. Ona će proći kroz sve direktorije i svaku sliku uplodati na kraken, optimizirati ju i ponovno skinuti na Vaš server.

 

Python kod:

# — coding: utf-8 —

from krakenio import Client

import os

 

def find_images(path):

images_list = []

for root, dirs, files in os.walk(path):

for name in files:

if name.endswith((‘.jpg’, ‘.jpeg’,’.png’)):

full_path = os.path.join(root, name)

if full_path not in images_list:

images_list.append(full_path)

return images_list

 

def upload_to_kraken(api, data, path):

try:

result = api.upload(path, data);

 

if result.get(‘success’):

os.system(‘wget -q  ‘ + result.get(‘kraked_url’)+’ -O ‘ + path)

print ‘Download ‘ + result.get(‘kraked_url’) + ‘to ‘ + path

 

else:

print result.get(‘message’)

except:

print ‘Error!’

 

api = Client(‘YOUR API KEY’, ‘YOUR SECRET KEY’)

data = {

‘wait’: True,

‘lossy’: True,

‘quality’: 75

}

path = ‘/home/ivan155/webapps/opremise/images’

 

images_list = find_images(path)

for one_image in images_list:

upload_to_kraken(api, data, one_image)

 

 

Prije pokretanja skripte molim promijeniti liniju:

api = Client(‘YOUR API KEY’, ‘YOUR SECRET KEY’) 

Dodajte svoj API i SECRET KEY, koji će te dobiti prilikom stvaranja korisničkog računa na kraken.io.

Promijenite:

path = ‘/home/ivan155/webapps/opremise/images’

Dodajte putanju do direktorija na serveru na kojem su spremljene Vaše slike. Skripta će pronaći sve slike rekurzivno od direktorija kojeg navedete.

 

Zaključak:

Optimizacija slika mi je ubrzala učitavanje web stranice za dvije sekunde i popravila ranking  na Google PageSpeed testu za 15 bodova. Preporučio bih ju svakom, pogotovo web stranicama s puno slika.

 

O Autoru:

Ovaj članak je napisao Ivan Blažević, web developer i vlasnik web trgovine opremise.com, koja nudi veliki izbor pametnih satova po povoljnim cijenama.