Un scurt istoric al misiunii Google de a face web-ul mai rapid
În 2009, Google și-a propus misiunea de a încerca să convingă proprietarii de site-uri web să-și facă site-urile să se încarce mai repede.
În 2015, Google a anunțat că numărul de căutări efectuate pe mobil le depășește pe cele efectuate pe computere desktop. Acest procent continuă să crească. Statistica publicată spune că, începând cu 2019, 61% din căutările efectuate pe Google au fost de pe dispozitive mobile.
Rolul dominant al mobilului în căutare a determinat Google să dezvolte proiectul „Accelerated Mobile Pages” (AMP). Această inițiativă are ca scop încurajarea proprietarilor site-urilor web să creeze ceea ce este în esență o altă temă mobilă. Care respectă un set foarte strict de linii directoare de dezvoltare și performanță.
Mulți proprietari de site-uri și specialişti SEO se plâng că trebuie să tindă spre viteza paginii și AMP. Pe lângă ceilalți peste 200 de factori de clasare care le dau deja bătăi de cap. Totodată, viteza paginii este într-adevăr un efort demn pe care să se concentreze proprietarii de site-uri. În 2017, Google efectuează un studiu în care rezultatele și-au justificat foarte mult concentrarea pe a face web-ul mai rapid. Ei au descoperit că „Pe măsură ce timpul de încărcare a paginii trece de la o secundă la 10 secunde, probabilitatea ca vizitatorul unui site mobil să renunțe crește cu 123%.
În iulie 2018, viteza paginii a devenit un factor de clasare pentru căutările mobile. Astăzi Google va încorpora și mai mulți factori legați de viteză (numiți Core Web Vitals) în algoritmii săi de clasare.
Nu există nicio îndoială că viteza paginii va continua să fie un lucru incredibil de important pentru proprietarii de site-uri. Durata medie de atenție umană scade tot timpul și dependența umană de dispozitivele noastre mobile crește constant.
Cum să optimizați viteza paginii unui site web
Gândiți ca un șofer de mașini de curse
Câștigarea cursei de viteză a paginii necesită aceleași lucruri ca și câștigarea unei curse de mașini. Pentru a câștiga o cursă într-o mașină, vă asigurați că vehiculul dvs. este cât mai ușor. Cât mai puternic posibil și că navigați pe pista de curse cât mai eficient posibil.
Vom folosi în continuare această analogie pentru aborda tehnicile de optimizare a vitezei paginii mai ușor de înțeles pentru fiecare.
Faceţi site-ul mai “ușor”
În zilele noastre, site-urile web sunt mai frumoase și mai funcționale decât oricând. Asta înseamnă, de asemenea, că sunt mai mari ca niciodată. Cele mai multe site-uri web moderne sunt echivalentul unui autobuz de petrecere sau al unei limuzine. Sunt super fanteziste, încărcate cu tot felul de facilități și, prin urmare, grele și lente.
Pentru a câștiga cursa de viteză a paginii, aveți nevoie de un vehicul de curse adecvat, care este ușor. Mașinile de curse nu au radiouri, suporturi pentru pahare, torpedo sau orice altceva care nu este absolut necesar. În mod similar, site-ul dvs. nu ar trebui să fie încărcat cu ceva care nu este absolut necesar. De exemplu: animații elaborate, fundaluri video, imagini enorme, widget-uri fanteziste, plugin-uri excesive sau orice altceva.
Pe lângă dezordinea site-ului dvs. de fantezii inutile și de plugin-uri excesive, puteți, de asemenea, să reduceți greutatea site-ului prin:
- Reducerea numărului de scripturi terță parte (fragmente de cod care trimit sau primesc date de la alte site-uri web).
- Trecerea la o temă mai ușoară (mai puțin grea în cod) și reducerea numărului de fonturi utilizate.
- Implementarea AMP.
- Optimizarea imaginilor.
- Comprimarea și minimizarea codului.
- Efectuarea de optimizări regulate a bazei de date.
Pe un sistem de gestionare a conținutului open-source, cum ar fi WordPress, sunt disponibile plugin-uri de viteză. Ele pot face multe dintre aceste sarcini mult mai ușoare. WP Rocket și Imagify sunt două plugin-uri WordPress care pot fi folosite împreună pentru a ușura semnificativ greutatea site-ului dvs.. Aceasta se realizează prin optimizarea imaginii, comprimarea, minimizarea și o varietate de alte bune practici privind viteza paginii.
Daţi-i mai multă putere
Nu ați pune un motor de mașină de golf într-o mașină de curse. Așa că de ce ați pune site-ul dvs. pe un plan de găzduire partajat, foarte ieftin? S-ar putea să vă fie dureros să plătiți mai mult de câțiva dolari pe lună pentru găzduire dacă sunteți pe unul dintre aceste planuri de mult timp. Dar din nou, mașină de golf versus motor de mașină de curse: vreți să câștigați această cursă sau nu ?
Dacă vreți să concurezi în ligile mari, este timpul să obțineți un plan de găzduire pentru adulți. Pentru site-urile WordPress există companii de găzduire gestionate, cum ar fi WP Engine și Flywheel. Acestea utilizează servere puternice și reglate special pentru a servi mai rapid site-urile WordPress.
Dacă găzduirea WordPress gestionată nu este treaba dvs. sau dacă nu aveți un site WordPress, upgrade-ul la un VPS (Server privat virtual) va avea ca rezultat site-ul dvs. să aibă mult mai multe resurse de calcul disponibile. Veți avea, de asemenea, mai mult control asupra propriului mediu de găzduire. Permițându-vă să vă „ajustați motorul” cu lucruri precum versiunile recente de PHP, MySQL, cacheul Varnish și alte tehnologii moderne.
Plasarea site-ului într-un mediu de găzduire potrivit poate fi ca și cum ați pune compresorul pe mașina dvs. de curse.
Conduceţi-l mai bine
O mașină de curse ușoară și puternică nu poate merge repede fără un șofer care ştie să navigheze pe traseu.
Partea de navigaţie a acestei analogii se referă la procesul prin care un browser încarcă o pagină web. Fiecare element al unui site web este o altă întorsătură sau întorsătură pentru navigarea browserului în timp ce trece prin cod și procesează rezultatul paginii.
Când un browser încarcă o pagină web, trece printr-un proces numit „pictură”. Fiecare pagină este „pictată” deoarece browserul primește fragmente de date din codul sursă al paginii web. Acest proces de pictare poate fi fie executat eficient, fie poate fi realizat într-un mod mai haotic, nefuncțional, care necesită mai multe călătorii înapoi la începutul procesului pentru a reface sau repara sau adăuga ceva care ar fi putut/ar fi trebuit să se facă mai devreme în proces.
Iată unde lucrurile pot deveni tehnice, dar este important să faceți tot ce puteți pentru a vă ajuta site-ul să conducă mai eficient „calitatea”.
Memorarea în cache este un concept pe care fiecare site ar trebui să îl aibă pentru a face încărcarea unei pagini web mai ușoară în browser
Este suficient timp pentru ca un browser să proceseze tot codul sursă al unei pagini și să-l picteze vizual utilizatorului. Așa că ați putea la fel de bine să aveți acel cod sursă gata de acces pe server. În mod implicit, fără cache, nu este posibil.
Fără cache, CMS-ul site-ului și serverul pot lucra în continuare la generarea codului sursă al paginii web. În timp ce browserul așteaptă să picteze pagina. Acest lucru poate face ca browserul să fie nevoit să întrerupă și să aștepte mai mult cod să vină de la server. Cu memorarea în cache, codul sursă al unei pagini este pre-compilat pe server astfel încât să fie complet gata să fie trimis către browser în întregime într-o singură lovitură. Gândiți-vă la asta ca la un fotocopiator care are o mulțime de copii ale unui document deja produs și gata de a fi înmânat. Aceasta în loc să facă o copie la cerere de fiecare dată când cineva solicită una.
Diferite tipuri și niveluri de stocare în cache pot fi atinse prin pluginuri, compania dvs. de găzduire și/sau printr-un CDN (Content Delivery Network). CDN-urile nu numai că oferă stocare în cache, dar găzduiesc și copii ale codului site-ului web pregenerat pe o varietate de servere din întreaga lume, reducând impactul distanței fizice între server și utilizator asupra timpului de încărcare.
Utilizarea memoriei cache și a unui CDN echivalează cu o călătorie mult mai rapidă în jurul pistei de curse
Acestea sunt două dintre elementele de bază ale picturii eficiente a paginii, dar există și mai multe tehnici care pot fi folosite, de asemenea. Pe WordPress, următoarele pot fi implementate printr-un plugin sau plugin-uri (din nou, WP Rocket și Imagify sunt o combinație deosebit de bună pentru a realiza multe dintre acestea):
- Încărcarea asincronă și/sau amânată a scripturilor. Acesta este practic un mod elegant de a face referire la încărcarea mai multor lucruri în același timp sau așteptarea până mai târziu pentru a încărca lucrurile care nu sunt necesare imediat.
- Preîncărcare și preîncărcare. Practic, preluarea datelor despre linkuri în avans în loc să aștepte ca utilizatorul să facă click pe ele.
- Încărcare leneșă. Termenul ironic fiind că acest concept există în scopuri de a accelera viteza paginii, dar în mod implicit, majoritatea browserelor încarcă toate imaginile pe o pagină, chiar și cele care nu sunt vizibile până când un utilizator derulează în jos la ele. Implementarea încărcării leneșe înseamnă a spune browserului să fie leneș și să aștepte să încarce acele imagini nevăzute până când utilizatorul derulează efectiv acolo.
- Servirea de imagini în formate de nouă generație. Noile formate de imagine, cum ar fi WebP, pot fi încărcate mult mai rapid de către browsere decât formatele de modă veche JPEG și PNG. Dar este important de reținut că nu toate browserele pot accepta încă aceste formate noi – deci asigurați-vă că utilizați un plugin care poate furniza versiunile de nouă generație browserelor care le acceptă, dar oferă versiunile vechi browserelor care nu le acceptă. WP Rocket, atunci când este asociat cu Imagify, poate realiza acest lucru.
Optimizați pentru Core Web Vitals
În cele din urmă, optimizarea pentru noile metrici Core Web Vital (Largest Contentful Paint, First Input Delay și Cumulative Layout Shift) poate face și o călătorie mult mai eficientă în jurul pistei de curse.
Acestea sunt concepte destul de tehnice, dar iată o scurtă prezentare generală pentru a vă familiariza cu ceea ce înseamnă:
- Largest Contentful Paint (LCP) se referă la pictarea celui mai mare element de pe pagină. Instrumentul Google PageSpeed Insights vă va spune ce element este considerat elementul LCP al unei pagini. De multe ori aceasta este o imagine eroică sau o zonă mare de glisare, dar variază de la o pagină la alta, așa că rulați instrumentul pentru a identifica LCP-ul din pagina dvs. și apoi gândiți-vă la ce puteți face pentru a face ca acel element să se încarce mai rapid.
- First Input Delay (FID) este întârzierea dintre prima acțiune a utilizatorului și capacitatea browserului de a răspunde la aceasta. Un exemplu de problemă FID ar fi un buton care este vizibil pentru un utilizator mai devreme decât devine accesabil. Întârzierea ar fi cauzată de încărcarea funcției de click mai târziu decât butonul în sine.
- Cumulative Layout Shift (CLS) este un set de trei cuvinte mari care se referă la un concept simplu. Știți când încărcați o pagină web pe telefon și faceți click pe ceva sau citiți ceva, dar apoi sări în sus sau în jos pentru că s-a încărcat altceva deasupra sau sub ea? Această mișcare este CLS, este în mare parte enervantă și este un produs secundar al picturii ineficiente a paginii.
În concluzie, mașină de curse > mașină de golf
Optimizarea vitezei paginii este cu siguranță complexă și confuză, dar este o componentă esențială pentru a obține o clasare mai bună. În calitate de proprietar de site, sunteţi în această cursă indiferent dacă vă place sau nu – așa că aţi putea la fel de bine să faceţi tot ce puteţi pentru a face site-ul dvs. o mașină de curse în loc de un cărucior de golf.
