Google PageSpeed ​​Insights Cum se optimizează imaginile

Cu această intrare încep o serie de postări despre WPO pentru a vedea cum ne putem îmbunătăți scorul Google PageSpeed ​​Insights în WordPress.

pagespeed

WPO (Web Performance Optimization) sunt un set de tehnici sau măsuri la orice nivel îmbunătățim performanța și viteza de încărcare a site-ului nostru web. Prin urmare, vom îmbunătăți experiența utilizatorului (UX) și SEO, deoarece viteza de încărcare este un factor cheie pe care motoarele de căutare îl iau în considerare.

Există multe instrumente care pot măsura viteza site-ului dvs. web. În această serie de 7 intrări despre care vom vorbi Google PageSpeed ​​Insights și cum să rezolve în WordPress câteva dintre punctele sale cheie.

Pentru aceasta vom folosi un exemplu. Am creat un html de bază pe care l-am folosit ca test care conține sau se încarcă:

  • 2 fonturi de la Google Fonts
  • Bootstrap, FontAwesome, foaie de stil personalizată
  • jQuery
  • O imagine pe corp și una pe bara laterală
  • Un antet și un corp foarte simplu, cu 5 paragrafe de lorem ipsum

M-am pus în cel mai rău caz:

  • Încărc CSS și JS fără reducere
  • jquery-3.1.1.js și bootstrap.js sunt în cap
  • Imaginea conținutului are dimensiuni de 6016x3384px și cântărește 25,3 MB
  • Imaginea din bara laterală are dimensiuni de 2048x769px și cântărește 1 MB
  • Nu există nimic în .htaccess

Cu această panoramă, rezultatul în PageSpeed ​​este următorul

Din acest scenariu, începem să vedem cum să ne îmbunătățim scorul în PageSpeed ​​Insights.

Optimizați imaginile

Este de la sine înțeles cât de important este acest punct pentru a îmbunătăți timpul de încărcare. Este simplu, cu cât imaginea noastră cântărește mai mult, cu atât se va încărca mai încet internetul, nu mai există mister.

Problema s-ar agrava cu cât avem mai multe imagini neoptimizate pe site-ul nostru. Acesta este mesajul pe care îl returnează testul Google:

Optimizați imaginile
Formatarea și comprimarea corectă a imaginilor pot salva un număr mare de octeți de date.
Optimizați aceste imagini pentru a reduce dimensiunea acestora cu 996,2 KB (reducere de 99%).
• Prin comprimarea sau modificarea dimensiunii https://mydomain.com/img/vialactea2.jpg puteți economisi 996,2 KB (cu 99% mai puțin).

Google PageSpeed ​​Insights

Imaginea de 25 megabyte este atât de grea încât nici măcar nu o analizează. Putem optimiza o imagine în două moduri: dimensiune și calitate.

Optimizați dimensiunea unei imagini

Când ne referim la optimizarea dimensiunii unei imagini, înseamnă că trebuie să ne gândim la spațiul real pe care îl va ocupa pe site-ul nostru web. Este foarte tentant să descărcăm imaginea de cea mai înaltă calitate de pe camera noastră reflexă și să o încărcăm direct pe pagina noastră, dar acest lucru ne va ucide performanța.

În exemplu, folosim o imagine pentru conținutul care are o lățime de 6016 pixeli, atunci când containerul are doar 848 pixeli. La fel se întâmplă și cu noi în bara laterală, imaginea este de 2048 pixeli, iar lățimea barei laterale este de 263 pixeli.

Folosim imagini mult mai mari decât ne trebuie cu adevărat. Dacă înainte de a le încărca pe web le edităm cu un editor de imagini și le scalăm la dimensiunea designului nostru, vom obține o îmbunătățire considerabilă a dimensiunii:

  • Imaginea 1 a 6016x3384px și 25,3 MB la 848x477px și 432 KB
  • Imaginea 2 din 2048x769px și 1 MB la 263x99px și 46KB