În Tips & Tricks

Google Page Speed: Cum să îmbunătăţeşti semnificativ viteza site-ului tău

google-pagespeed-insights

În aprilie 2010, Google anunţa oficial că viteza de încărcare a site-ului devine un factor de ranking. Site-urile care se încarcă repede contribuie la o experienţă pozitivă şi respectiv vizitatori mai mulţumiţi.

În urma unor experimente conduse de echipa Google, aceştia au constatat că o simplă întârziere de 200ms în afişarea rezultatelor duce la o scădere a numărului de căutări cu 0.22% în primele trei săptămâni şi cu 0.36% în următoarele trei săptămâni.

 

Utilizatorii  care au primit rezultate întârziate cu 400ms au efectuat cu 0.44% mai puţine căutări în primele trei săptămâni şi cu 0.76% mai puţine în următoarele trei săptămâni.

 

Deşi aceste cifre par mici, pentru numărul uriaş de căutări efectuate, rezultatele sunt deosebit de importante.

 

În 2016 Financial Times a derulat un studiu privind viteza de încărcare a site-ului şi numărul de articole citite de utilizatori.

 

Viteza scăzută a site-ului influenţează negativ navigarea utilizatorilor pe termen scurt şi modifică comportamentul pe termen lung, reflectându-se în numărul de vizualizări.

 

Studiul reflectă şi latura emoţională a utilizatorilor: cu cât acestia sunt mai implicaţi şi urmăresc frecvent site-ul, cu atât răbdarea lor creşte faţă de degradarea performanţei site-ului. În schimb, utilizatorii mai puţin implicaţi manifestă o reacţie extremă chiar şi pentru mici întârzieri.

 

page-speed


O secundă întârziere în încărcarea site-ului timp de 7 zile determină o scădere cu 23,9% a numărului de vizualizări pentru utilizatorii mai puţin implicaţi, în timp ce pentru utilizatorii implicaţi nu se observă un comportament diferit.

 

Pentru două secunde de întârziere, procentul creşte la 31,1% pentru utilizatorii mai puţin implicaţi şi cu 6% la cei implicaţi.

 

În vânzările online, 47% dintre cumpărători se aşteaptă ca site-ul să se încarce sub 2 secunde, iar 40% abandonează un site care se încarcă mai greu de 3 secunde.

 

Aşadar viteza site-ului reprezintă un factor extrem de important care poate produce modificări semnificative în comportamentul pe termen scurt şi lung al utilizatorilor.

 

Îmbunătăţirea performanţei site-ului cu ajutorul instrumentului Page Speed Insights

Page Speed Insights este un instrument online ce măsoară performanţa unei pagini web atât pe mobil cât şi pe desktop, oferind un scor de la 0 la 100 de puncte.

 

Cu cât pagina se încarcă mai repede, cu atât scorul este mai mare. Un punctaj de 85 indică faptul că pagina se încarcă repede şi experienţa utilizatorilor este una pozitivă.

page-speed2


Pentru început, poţi testa site-ul tău accesând link-ul următor: 
https://developers.google.com/speed/pagespeed/insights/


Google oferă direcţii clare prin care poţi îmbunătăţi semnificativ viteza de încărcare a site-ului. Iată site-ul entrepreneur.com analizat din perspectiva vitezei de încărcare.

page-speed3

 

Cele 9 reguli Google Page Speed Insights prin care poţi îmbunătăţi semnificativ viteza de încărcare a site-ului tău

#1. Redimensionarea şi compresia imaginilor

Este unul dintre cele mai simple lucruri pe care le poti face şi cu impactul cel mai mare.

Fiecare imagine inclusă în pagina web trebuie redimensionată corespunzător: dacă lăţimea maximă a paginii web unde se găseşte poza este de 768px, atunci imaginea se redimensionează la această dimensiune.

 

După redimensionare, imaginea se comprimă pentru a elimina orice date referitoare la aparatul utilizat, diafragma, data şi alte lucruri stocate în imagine, care nu sunt utile.

 

Pentru compresia imaginilor poţi utiliza site-ul www.tinyjpg.com sau pluginul de WordPress Tiny Compress.

 

#2. Activarea compresiei Gzip şi a memoriei cache a browserului

Aceasta se realizează la nivel de server prin activarea compresiei Gzip sau manual adăugând următorul script în fişierul tău .htaccess:

RewriteEngine on

<IfModule mod_deflate.c>

   <filesMatch „\.(js|css|html|txt|php|png|jpg)$”>

       SetOutputFilter DEFLATE

   </filesMatch>

</IfModule>

<IfModule mod_deflate.c>

<IfModule mod_headers.c>

Header append Vary User-Agent env=!dont-vary

</IfModule>

AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json

<IfModule mod_mime.c>

# DEFLATE by extension

AddOutputFilter DEFLATE js css htm html xml

</IfModule>

</IfModule>

<FilesMatch „\.(css|htc|js|js2|js3|js4|CSS|HTC|JS|JS2|JS3|JS4)$”>

FileETag MTime Size

<IfModule mod_headers.c>

Header set Pragma „public”

Header append Cache-Control „public, must-revalidate, proxy-revalidate”

</IfModule>

</FilesMatch>

<FilesMatch „\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$”>

FileETag MTime Size

<IfModule mod_headers.c>

Header set Pragma „public”

Header append Cache-Control „public, must-revalidate, proxy-revalidate”

</IfModule>

</FilesMatch>

 

#3. Evitarea redirect-urilor

Redirecţionarea automată de pe o pagină pe alta contribuie la o experienţă negativă. Elimină orice redirect HTML sau PHP şi înlocuieşte cu pagina dorită.

<meta http-equiv="refresh" content="0; url=http://site.ro/pagina-noua.php" />
<?php header('Location: http://site.ro/pagina-noua.php');?>

 

#4. Eliminarea fişierelor Java Script şi CSS care blochează afişarea conţinutului vizibil (above the fold)
Fișierele Java Script se includ în zona de footer a site-ului şi foarte rar este necesar ca ele să fie prezente în head. Structura site-ului poate fi realizată în secţiuni şi inclus doar CSS-ul necesar pentru afişarea primei secţiuni sau a conţinutul vizibil.

 

De exemplu, dacă pagina conţine un carousel pentru testimoniale în partea de jos, atunci vei încărca CSS-ul necesar chiar unde începe carouselul. Iar fisierele Java Script le poţi include în footer.

 

Iată un exemplu în care este încărcată o singură foaie de stil CSS şi utilizarea condiţiilor pentru Internet Explorer.

page-speed4

 

Mai jos este un exemplu unde atât fişierele Java Script cât şi CSS sunt încărcate integral în partea de head a site-ului, încetinind semnificativ viteza de încărcare a acestuia.

page-speed5

 

#5. Comprimarea fişierelor CSS

Dacă ai mai multe fişiere CSS, acestea se adaugă într-un singur fişier şi se comprimă. Poţi face asta online, gratuit accesând: http://csscompressor.com/

Iată fişierul CSS înainte de comprimare:

page-speed6

Şi după comprimare:

page-speed7

Deşi au fost doar câteva linii de cod CSS, comprimarea a salvat 63,07% din dimensiunea fişierului.

 

#6. Comprimarea fişierelor HTML

După ce site-ul este pus la punct, se comprimă tot codul HTML, asemănător celui de CSS. Pentru asta poţi utiliza: https://htmlcompressor.com/compressor/

 

#7. Comprimarea fişierelor Java Script

La fel ca mai sus, comprimarea fişierelor Java Script se realizează după ce site-ul este finalizat, utilizând: https://jscompress.com/

 

#8. Prioritizarea conţinutului vizibil

Foloseşte o structură pe secţiuni, încărcând în cascadă doar codul necesar pentru afişarea conţinutului vizibil, înainte de a da scroll.

 

#9. Reducerea timpului de răspuns a serverului

Este un indicator foarte bun pentru a descoperi dacă serverul încetineşte încărcarea site-ului. Ceea ce poţi face este să discuţi cu firma de hosting în cazul în care apare acest lucru.

 

Concluzie

Analizând fiecare recomandare oferită de Google, modificând codul, comprimând imagini, CSS, Java Script, HTML, activând memoria cache poţi obţine un scor cât mai bun, care se va traduce într-o viteza de încărcare a site-ului mai rapidă şi o experienţă de utilizare pozitivă.