Deplasarea conținutului în timpul încărcării este problema pe care vizitatorii o resimt cel mai direct: apeși un buton și, în ultima fracțiune de secundă, pagina se rearanjează și apeși altceva. Se măsoară printr-un indicator care ar trebui să fie sub 0,1; aici era 0,224.
Pe scurt
- Problema
- Conținutul se rearanja în timpul încărcării, mai ales pe telefon.
- Indicator
- 0,224 înainte, 0,01 după. Pragul recomandat este 0,1.
- Cauza
- Imagini și blocuri fără dimensiuni rezervate, plus fonturi care schimbau înălțimea rândurilor la încărcare.
- Efectul practic
- Butoanele rămân unde le vede vizitatorul în momentul în care le atinge.
Ce am făcut
Am rezervat spațiul fiecărei imagini prin dimensiuni declarate în cod, astfel încât browserul să știe cât loc să lase înainte să descarce fișierul. Am făcut același lucru pentru blocurile care se încarcă mai târziu și am stabilizat înălțimea rândurilor de text la schimbarea fontului.
De ce contează dincolo de scor
Este singurul indicator de performanță pe care un vizitator îl poate descrie fără să știe niciun termen tehnic: „mi-a sărit pagina". Îl observă imediat și îl asociază cu un site nesigur, chiar dacă restul funcționează impecabil. Cauzele și reparațiile sunt detaliate în articolul despre deplasarea conținutului, iar lucrarea în sine face parte din optimizarea tehnică.
Cum am găsit cauzele
Am înregistrat încărcarea paginii pe telefon și am urmărit ce se mișcă și în ce moment. Metoda este mai utilă decât scorul dintr-o unealtă, fiindcă arată exact ce element împinge restul conținutului și la ce milisecundă. În cazul de față erau două cauze suprapuse: imaginile din capul paginii și fontul care schimba înălțimea rândurilor la sosire.
De ce nu s-a rezolvat cu un plugin
Pentru că nu era o problemă de încărcare, ci de spațiu rezervat. Niciun plugin de optimizare nu poate ghici ce dimensiuni are o imagine pe care nu a descărcat-o încă; informația trebuie scrisă în cod. Este o reparație de câteva ore, dar cere să treci prin șabloane, nu prin setări.