Îmbunătățirea vitezei de încărcare a site-ului nostru web cu Google PageSpeed ​​Insights; Vremurile se schimbă

îmbunătățirea

PageSpeed ​​Insights este un instrument Google pentru a analiza și evalua viteza de încărcare a unei pagini web și, cel mai important, oferă, de asemenea, o serie de informații foarte utile sugestii Da instrumente asociate pentru a îmbunătăți această viteză de încărcare.

Pentru a evalua încărcarea paginii noastre web, precum și implementarea noastră, Page Insights se bazează pe acest document de bune practici care acoperă atât nivelul front-end (încărcarea imaginilor, fișierele JavaScript, CSS etc.), cât și configurația serverului.

În linii mari și fără a intra în prea multe detalii, putem rezuma obiectivele acestor bune practici în principal în următoarele trei:

  • Minimizați numărul de solicitări HTTP care apar,
  • Reduceți dimensiunea răspunsurilor pentru aceste solicitări HTTP,
  • și optimizați redarea paginii în browser.

PageSpeed ​​ne va analiza site-ul web și ne va atribui un punctuaţie sau Scor din 100 care evaluează cât de rapid ar putea fi încărcarea acestui site web. Un scor foarte mare aproape de 100 indică faptul că este puțin de îmbunătățit (adică pagina se încarcă deja cât de repede poate sau aproape de el) în timp ce un scor mic indică faptul că există destul de multe îmbunătățiri pe care le-am putea face. Este important să rețineți că acest scor este relativ la pagina pe care ne aflăm, adică nu vine în funcție de timpul necesar încărcării paginii, dacă nu în funcție de câte dintre bune practici înainte de comentat, am urmărit și implementat.

Putem folosi PageInsight ca serviciu online introducând adresa URL a paginii pe care dorim să o evaluăm:

Și, de asemenea, o extensie open-source este disponibilă pentru Chrome Developer Tools în browserul Chrome și, de asemenea, pentru Firebug pentru aceia dintre voi care rămân fideli Firefox. În acest articol ne vom baza pe extensia pentru Instrumente pentru dezvoltatori Chrome pe Mac, dar funcționarea este practic identică în toate versiunile.

Folosind extensia Chrome Developer Tools

Odată ce extensia este instalată, cu pagina noastră web deschisă în Chrome, vom deschide mai întâi Chrome Dev Tools:


Instrumente -> Instrumente pentru dezvoltatori sau Ctrl + Shift + I (pe Mac: ⌥⌘I)

Și odată ce interfața este deschisă, vom vedea că apare o nouă filă PageSpeed ​​în cadrul căreia vom găsi un îndemn:

Dacă faceți clic pe oricare dintre butoanele roșii ANALIZARE sau START ANALIZARE va provoca reîncărcarea paginii noastre și după un timp scurt de analiză ni se vor afișa rezultatele analizei, începând cu un scor. PageSpeed ​​Score care vine să evalueze măsurile pe care le-am implementat pe site-ul nostru pentru a îmbunătăți viteza de încărcare.

Implementare: Îmbunătățirea vitezei de încărcare a lostiemposchange.com

În cazul casei de lostiemposchange.com Am obținut inițial următoarea evaluare:


Scorul inițial al vitezei de pagină a lostiemposchange.com: 86 (din 100 în total)

Un scor de 86 de puncte din 100 posibil nu este deloc rău, dar evident că avem multe lucruri de îmbunătățit.

Din fericire, în zona stângă a lista de sugestii că pluginul ne oferă pentru a îmbunătăți viteza de încărcare. Aceste sugestii apar clasificate în 3 culori: roșu, galben și albastru așa cum le considerați Prioritate ridicată, Prioritate medie Da Prioritate redusa respectiv. În plus, în fiecare sugestie individuală obținem detalii despre modul în care o putem implementa în cazul particular al site-ului nostru web.

Evident, trebuie mai întâi să încercăm să aplicăm sugestiile marcate ca Prioritate ridicată în roșu, deoarece reprezintă cel mai mare impact asupra vitezei de încărcare. Bunele practici pe care le-am implementat corect apar, de asemenea, în verde și mai puțin proeminente.


În panoul din stânga PageSpeed ​​Insights ne oferă sugestii despre cum putem îmbunătăți viteza de încărcare a site-ului nostru web

Să analizăm câteva dintre aceste sugestii și cum să le implementăm pe pagina noastră luând ca exemplu cazul nostru în lostiemposchange.com, desigur, punând un accent deosebit pe cea mai mare prioritate, dar, de asemenea, examinând cel mai simplu și cu puțin efort poate produce îmbunătățiri imediate în viteza de încărcare a unui site.

Prioritate ridicată

  • Profitați de memoria cache a browserului

Este convenabil să împiedicați browserul să solicite resurse statice (cum ar fi imagini) care au deja descărcări din vizitele anterioare (cunoscute sub numele de cache). Prin urmare, este esențial să adăugați valori pentru atribute Data de expirare sau vârsta maximă în antetul HTTP al răspunsului pentru aceste elemente la valori cu o anumită distanță în viitor pentru a spune browserului să folosească versiunea cache dacă o are.

Activați Keep-Alive

Keep-Alive este o caracteristică fantastică a serverelor Apache care permite serverului și clientului să negocieze o singură cerere HTTP pentru a transfera mai multe resurse, în loc să deschidă o nouă solicitare pe resursă. Este ușor de văzut că acest lucru se potrivește foarte bine cu obiectivul nostru de a minimiza numărul de solicitări HTTP.

Deoarece sunteți sugestia de mai sus și această sugestie provine de la configurarea serverului, în cazul utilizării unui server apache Le putem configura modificând fișierul .htaccess de pe site-ul nostru web. De exemplu, acestea sunt directivele pe care le-am adăugat la .htaccess de timeschange.com pe server pentru a implementa ambele funcționalități sugerate: