Tester de dimensiune a resurselor

Această unealtă ne ajută să testăm dacă imaginile, fișierele CSS și JavaScript sau fonturile încărcate pe website sunt bine optimizate.

Ce analizează:

  1. Imagini – detectează din <img> și background-image, arată formatul (JPEG, PNG, WebP, SVG), semnalează imaginile prea mari și formatele nemoderne
  2. CSS – toate fișierele <link rel="stylesheet">, cu dimensiunea fiecăruia
  3. JavaScript – toate <script src="">, detectează dacă au async/defer, semnalează scripturile care blochează randarea
  4. Fonturi – fișiere WOFF2/TTF/OTF și Google Fonts, semnalează formatele neoptimizate

Resource Size Tester

Analizează dimensiunea resurselor oricărui website - imagini, CSS, JS, fonturi

Se analizează resursele paginii...

Resource Size Tester v1.0.0

Ce înseamnă cifrele afișate

Unealta nu spune doar cât cântărește fiecare fișier, ci arată unde se duce greutatea paginii. De obicei răspunsul este același: imaginile, urmate de scripturile care nu sunt necesare la prima încărcare.

Repere utile pentru o pagină care se încarcă repede și pe conexiune mobilă:

  • Imagini: sub 200 KB fiecare pentru fotografiile obișnuite, sub 400 KB pentru imaginea mare din antet. O imagine de 2 MB pe pagina de start este cauza cea mai frecventă a unui scor slab.
  • Total CSS: sub 150 KB. Peste această valoare, de regulă tema încarcă stiluri pentru componente pe care nu le folosiți.
  • Total JavaScript: sub 300 KB. Aici intră și scripturile externe, care sunt greu de văzut altfel.
  • Fonturi: două familii și maximum patru fișiere. Fiecare grosime în plus înseamnă un fișier în plus.

Ce faceți cu ce găsiți

  • Convertiți imaginile în WebP și redimensionați-le la lățimea la care sunt afișate. O imagine de 3000 de pixeli așezată într-un spațiu de 800 nu aduce niciun câștig vizual.
  • Amânați scripturile care nu sunt necesare la prima randare, cu defer sau async. Unealta arată exact care dintre ele blochează afișarea.
  • Păstrați fonturile în format WOFF2 și găzduiți-le local. Fonturile externe adaugă o conexiune nouă înainte ca textul să apară.
  • Încărcați leneș imaginile de sub prima parte a paginii, dar niciodată pe cea din antet: ea este de obicei elementul măsurat de LCP.

Legătura cu Core Web Vitals

Cele mai multe probleme de LCP pornesc de la o imagine prea mare sau de la un font care întârzie afișarea textului. Ambele se văd în lista de resurse, înainte să apară în rapoartele Google.

După ce curățați resursele, verificați efectul cu testul de timp de răspuns și citiți despre praguri în ghidul nostru despre Core Web Vitals.

Înapoi sus