Viteza de încărcare a site-ului este unul dintre cei mai importanți indicatori ai utilizării resurselor și, important, acesta este unul dintre sutele de factori de clasificare SEO. Într-adevăr, un utilizator modern care a făcut clic pe link nu așteaptă încărcarea paginii pentru mai mult de 5 secunde. Prin urmare, cu cât este mai mult încărcat site-ul dvs., cu atât pierdeți mai mult potențialii clienți.
Mai mult de 50% din utilizatorii de Internet cu dispozitive mobile, se așteaptă aproape instantaneu site-ul de download. Pe baza acestor statistici, suntem în acest articol se va concentra pe modul de a obține o performanță la 100/100 serviciul Google PageSpeed Insights pentru dispozitive fixe și mobile, ca, de exemplu, site-ul „Monitor Backlink“.
Site-ul eșantionului este deja încărcat destul de repede, deci în acest caz rezultatele se vor îmbunătăți până la maximul posibil.
Odată, când lucrați cu Instrumentul PageSpeed, sa observat că site-ul Google are rate surprinzător de scăzute pentru dispozitivele mobile - 59/100. Situația cu versiunea pentru dispozitive staționare a fost mai bună - 92/100.
Se pare că au trebuit să utilizeze propriul instrument pentru a-și optimiza site-ul, nu-i așa? Deci este rezultatul 100/100 de neatins?
Aceasta ne-a motivat să obținem cea mai rapidă posibilă descărcare a site-ului, pentru a dovedi că atingerea a 100/100 rezultate este realistă și, dacă doriți, puteți să o faceți și dumneavoastră. Nu este o obsesie, este doar o dorință de a atinge perfecțiunea.
Parametrii de pornire ai site-ului experimental sunt 87/100.
Ca urmare, după aplicarea unor manipulări, s-au obținut următoarele rezultate:
Cum pot accelera încărcarea paginilor?
Înainte de a trece la instrucțiunile pas cu pas, permiteți-mi să observ că instrumentul PageSpeed este doar un ghid pentru webmasteri în optimizarea resurselor. În plus, instrumentul conține recomandări pentru accelerarea încărcării paginilor site-ului dvs., iar obținerea rezultatelor pozitive depinde în mare măsură de setările serverului.
Rețineți că unele dintre etapele de instrucțiuni pot necesita cunoștințe tehnice, indiferent de sistemul de management al conținutului (CMS) utilizat.
Pasul 1: optimizarea imaginilor
Pentru a face ca imaginile să se încarce mai repede, instrumentul PageSpeed Insights Tool a sugerat optimizarea acestora reducând dimensiunea fișierului. Pentru a rezolva această problemă, este necesar să realizăm două lucruri importante:
- Comprimați toate imaginile utilizând instrumente cum ar fi Compressor.io și TinyPNG. Acestea sunt instrumente gratuite prin care puteți reduce dimensiunea unui fișier grafic cu mai mult de 80% și, în unele cazuri, fără a degrada calitatea imaginii în sine.
- Reduceți dimensiunea imaginilor la minimum, fără a reduce calitatea acestora. De exemplu, dacă pe site avem nevoie de o imagine de 150x150px, atunci pe server imaginea ar trebui să aibă dimensiunea corespunzătoare. Setările de imagine nu ar trebui personalizate utilizând etichete CSS sau HTML.
În conformitate cu regulile de mai sus, fiecare imagine de pe site a fost descărcată, precum și comprimată și dimensionată manual. Și pentru a nu deranja optimizarea imaginilor după ce le-ați descărcat pe site, este mai bine să dezvolți obiceiul optimizării inițiale a tuturor imaginilor noi încărcate pe server. Fiecare imagine nouă trebuie comprimată și ajustată la parametrii necesari.
Pentru a rezolva această problemă, Gulpjs a fost instalat pe server. Acesta este un instrument care creează automat un nou fișier CSS și elimină toate spațiile inutile. De asemenea, creează automat un nou fișier CSS de fiecare dată când efectuați noi modificări. În exemplul de mai sus, acest lucru a contribuit la reducerea dimensiunii fișierului principal CSS de la aproximativ 300Kb la 150Kb. Această diferență de dimensiune se datorează simbolurilor inutile.
Pentru a reduce CSS este posibil, folosind instrumente YUI Compressor și cssmin.js.
În cazul în care folosiți Wordpress, este recomandat să instalați pluginul Autoptimize.
De asemenea, puteți descărca fișiere optimizate direct din Instrumentul PageSpeed.
Pasul # 3: Utilizarea memoriei cache a browserului
Pentru mulți webmasteri, etapa de utilizare a memorării în cache este cea mai dificilă.
Pentru a rezolva această problemă, a trebuit să transferăm toate fișierele statice de pe site către CDN (rețeaua de difuzare a conținutului).
De exemplu, în cazul în care serverul site-ul principal este în Tehasae, fără CDN, un vizitator din Amsterdam, va trebui să aștepte până când conținutul site-ului va depăși tot drumul de la un server situat în Statele Unite ale Americii. Cu CDN, site-ul va încărca mult mai rapid de la serverul cel mai apropiat de utilizator, în acest caz, de la Amsterdam. Acest lucru reduce accesul de date la distanță și site-ul este încărcat aproape instantaneu.
Iată o vizualizare a funcționării CDN:
După manipularea de mai sus, instrumentul PageSpeed sa deranjat să continue să sugereze utilizarea cache-ului pentru browser pentru resursele terță parte individuale. Iată o captură de ecran:
Rezolvarea problemei cu scriptul Google Analytics este o provocare. Întrucât Analytics a fost necesar și nu poate fi șters de pe site, a trebuit să căutăm alte soluții.
Dacă nu există actualizări, codul Google Analytics va fi descărcat din versiunea în memoria cache la CDN.
Iată o captură de ecran din Pingdom Tools care arată toate descărcările de pe CDN, inclusiv codul Google Analytics. Singurul fișier descărcat de pe server este fișierul de pagină de pornire, al cărui volum este de numai 15,5 Kb. Eliminarea tuturor script-urilor de la terți a îmbunătățit semnificativ viteza de descărcare globală.
Pasul 4: Eliminați codurile de blocare
Pasul 5: Activarea compresiei
Pasul # 6: Optimizarea formatului mobil
Analiza formatului mobil arată adaptabilitatea versiunii mobile a site-ului pentru diferite tipuri de rezoluții, utilizarea fonturilor potrivite și disponibilitatea unui sistem de navigație bun.
Cu Google Chrome puteți vedea cum arată site-ul dvs. în diferite versiuni mobile. Pentru a face acest lucru, faceți clic pe setările pentru pictograma de meniu (hamburger) și comenzile browserului din colțul din dreapta sus, apoi faceți clic pe "Instrumente avansate → Instrumente pentru dezvoltatori". În bara de instrumente, selectați pictograma dispozitivului mobil. Asta e tot, vezi:
În cazul unui exemplu, nu au fost necesare schimbări radicale.
Dintre toate acțiunile întreprinse pentru optimizarea site-ului, sunt trei cele mai importante:
Aș dori să reamintesc încă o dată că Google PageSpeed Tools este doar un instrument auxiliar pentru optimizarea resurselor. Instrumente sunt proiectate pentru a reduce timpul dintre cerere (click pe link-ul) și pagina de răspuns a site-ului (primele elemente de pagină de afișare), astfel încât vizitatorii să nu părăsească site-ul dvs., și nu să aștepte pentru a descărca. Recomandările furnizate de instrumentul trebuie să fie folosite cu grijă, astfel încât utilizatorii să nu apară machiaj naufragiat sau un set de blocuri nu este stilizat.
Fiți atenți. Încărcarea rapidă a paginilor site-ului afectează în mod indirect clasarea resursei în motoarele de căutare, adică: cu cât este mai mare viteza de descărcare → cu cât este mai lungă și cu atât mai lungă este vizita → cu atât mai mare este clasarea.
De asemenea, nu uitați că specialiștii UAWEB sunt întotdeauna gata să ofere asistența necesară în crearea, optimizarea și promovarea dvs. de web-resurse pentru fiecare secundă cheltuit de către utilizatori pe site-ul dvs. vă aduce beneficii!