011 / 40 44 770

Kako da povećate brzinu učitavanja sajta

Kako da povećate brzinu učitavanja sajta

Date Posted - 12th Sep 2013 |  Category - Blog

Želite da se vaš sajt učitava munjevitom brzinom? Kroz ovaj članak ćete naučiti kako da učinite da se vaš sajt učitava brže nego što ste ikada mislili da je moguće.

Da bi ste razumeli zašto je važno da se vaš sajt brzo učitava, pogledajte ove statistike:

  • prosečan korisnik koji Internetu pristupa preko smartphone uredjaja će napustiti sajt ukoliko se on ne učita za 3 sekunde
  • brzina učitavanja sajta direktno utiče na pozicioniranje u rezultatima pretrage Google-a
  • 75% Internet korisnika su saglasni da se neće vratiti na sajt koji se učitava duže od 4 sekunde

Brzina učitavanja sajta je jako bitna u eri modernog Interneta i više apsolutno nema mesta sporim sajtovima.

Šta utiče na brzinu učitavanja sajta?

Brzina učitavanja sajta je direktno povezana sa zahtevom ka serveru za učitavanje sajta. Što je više zahteva poslato serveru, to će se sajt sporije učitavati.

Primeri HTTP zahteva:

  • učitavanje CSS stilova
  • učitavanje skripti
  • učitavanje slika
  • učitavanje HTML-a

Još jedan od faktora koji utiču na brzinu učitavanja sajta je i veličina pojedinačnih fajlova i slika. Slike visokog formata i kvaliteta se učitavaju i do 10 puta sporije od normalnih, dok veliki fajlovi mogu da uspore samo prikazivanje stranice.

website-speed

Cilj je da primenom različitih tehnika prilikom izrade sajta, smanjimo vreme učitavanja sajta, što možemo postići kroz optimizaciju sadržaja, slika i same organizacije sajta.

Praćenje brzine učitavanja

Brzinu učitavanja sajta možemo pratiti kroz Google’s Page Speed Insights za pretragu i Yahoo-ovog YSlow. Google takodje ima i odličan dodatak za praćenje brzine učitavanja sajta koji radi odlično uz Firebug dodatak za Firefox.

Primer

Uzećemo sajt koji je još uvek u fazi izrade. U pitanju je OS Commerce platforma. Početna vrednost brzine učitavanja prema Google-u je 48 od 100.

img_1

1. Korak: kompresija slika

U prvom koraku ćemo kompresovati i optimizovati sve slike za prikaz na webu. Ovo možemo postići korišćenjem alata ugradjenog u Google’s Page Speed dodatku. Kompresovane slike sačuvajte na vašem računaru i ponovo ih uploadujte na sajt.

Nova vrednost: 61 od 100

2. Korak: dimenzije slika

Nakon kompesije slika, potrebno je da promenite njihove dimenzije kako bi se one uklopile u strukturu sajta i kako bi se izbeglo sporo učitavanje sajta zbog prilagodjavanja dimenzija slika “u letu”. Ovo možete uraditi u Photoshopu ili bilo kojem alatu za obradu slika.

Nova vrednost: 72 od 100

3. Korak: podesite keširanje sadržaja

Keš sistem browsera čuva statičke fajlove kako bi se izbeglo njihovo ponovno učitavanje sa servera kad god posetite isti sajt. Ova mogućnost višestruko utiče na brzinu učitavanja sajta. Da bi ste omogućili keširanje sadržaja potrebno je da sledeći kod dodate u .htaccess fajl vašeg sajta

# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
# END Expire headers

Nova vrednost: 78 od 100

4. Korak: spojite grafičke elemente u CSS sprite

CSS sprite se koristi kako bi se smanjio broj grafičkih elemenata prilikom učitavanja strane. CSS sprite je u osnovi veća slika sastavljena od većeg broja manjih grafičkih elemenata. Spajanje 5 elemenata u jedan CSS sprite pozitivno utiče na brzinu učitavanja sajta, jer se učitava jedna slika umesto njih pet.

img_2

Obavezno uradite neophodne izmene u CSS fajlu sajta kako bi se sprite učitavao po predvidjenim pravilima.

Nova vrednost: 85 od 100

5. Korak: odložite učitavanje JavaScript-a

Kod koji poziva JavaScript se obično nalazi pri samom vrhu koda strane, što može dosta da uspori učitavanje strane. Kako bi ste osigurali da se JavaScript učitava na kraju, najbolje je da se ove skripte pozivaju na kraju HTML koda.

Takodje možete koristiti atribut “difer” kako bi se JavaScript pozivao tek nakon što strana bude učitana. Na primer:

<script type="text/javascript" src="includes/general.js" defer="defer"></script>

Nova vrednost: 86 od 100

6. Korak: kompresujte HTML, CSS i JavaScript fajlove

HTML, CSS i JavaScript fajlovi mogu biti kompresovani kako bi se ubrzalo njihovo učitavanje. Postoji više automatizovanih alata za ovu namenu, a jedan od njih je minifier.

Nova vrednost: 90 od 100

Zaključak

Prateći ova jednostavna uputstva, višestruko smo smanjili brzinu učitavanja sajta. Ovo umnogome može uticati na to da li će se vaš sajt naći na prvoj ili petoj strani Google pretrage.

Imati brz sajt je ključ uspeha na Internetu. Neko generalno pravilo je da održavate vrednost brzine učitavanja sajta i svih strana na njemu, na 80 i više poena.

2 Comments

  1. Comment by: mile
    Posted on: 11th Nov 2013
    Reply

    U koji fajl u wordpress-u se ubacuje kod za odlaganje ucitavanja javaskripti?

    Hteo bi ove skirpite da prebacim u footer.

    wp_register_script( ‘jquery-easing’, get_template_directory_uri() . ‘/js/jquery.easing.1.3.min.js’, ‘jquery’, ‘1.3’, true );
    wp_register_script( ‘jquery-cycle’, get_template_directory_uri() . ‘/js/jquery.cycle.all.min.js’, array( ‘jquery’, ‘jquery-easing’ ), ‘2.99’, true );
    wp_register_script( ‘jquery-fancybox’, get_template_directory_uri() . ‘/js/jquery.fancybox-1.3.4.min.js’, array( ‘jquery’, ‘jquery-easing’ ), ‘1.3.4’, true );
    wp_register_script( ‘jquery-superfish’, get_template_directory_uri() . ‘/js/jquery.superfish-1.4.8.min.js’, ‘jquery’, ‘1.4.8’, true );
    wp_register_script( ‘jquery-supersubs’, get_template_directory_uri() . ‘/js/jquery.supersubs-0.2b.min.js’, array( ‘jquery’, ‘jquery-superfish’ ), ‘0.2b’, true );
    wp_register_script( ‘periodic-jquery’, get_template_directory_uri() . ‘/js/periodic.js’, array( ‘jquery’, ‘jquery-easing’, ‘jquery-cycle’, ‘jquery-fancybox’, ‘jquery-superfish’, ‘jquery-supersubs’, ‘jquery-ui-core’, ‘jquery-ui-widget’, ‘jquery-ui-tabs’ ), wap8_version_cache(), true );
    wp_register_script( ‘digg-share’, get_template_directory_uri() . ‘/js/digg.js’, array( ‘jquery’ ) , wap8_version_cache(), true );
    wp_register_script( ‘twitter-platform-script’, ‘http://platform.twitter.com/widgets.js’, array( ‘jquery’ ), wap8_version_cache(), true );
    wp_register_script( ‘google-plus-script’, get_template_directory_uri() . ‘/js/google-plusone.js’, array( ‘jquery’ ), wap8_version_cache(), true );

    • Comment by: magda
      Posted on: 18th Dec 2013
      Reply

      Pozdrav Mile,

      Predlažemo pogledate plugin Better WordPress Minify, koji će sve vaše JS i CSS fajlove spojiti u jedan i kao takvog ga servirati posetiocu.

Leave a comment

Have your say!

message *

name *

email *