Cum sa-ti cresti
viteza site-ului 
Numărul site-urilor din lume a depășit 1 miliard și la fel ca oamenii care le-au făcut, nu sunt toate la fel. Unele sunt numai text, altele sunt numai video. Mai sunt și site-uri făcute în Flash (din Dec 2020 s-a oprit suportul pentru Flash, #amin), or fi și făcute în Word sau Excel (există opțiunea de save as HTML) sau bazate pe tehnologii mai robuste. Oricum, toate se deschid la un click ... sau nu. Marea majoritate din cele 1 miliard nu se deschid pentru că ”ia o veșnicie” să se deschidă. De multe ori ne pierdem răbdarea în mai puțin de 6 secunde.
După zeci de mii de ani în care am fost culegători, ne-am dat seama că tehnologia ne facilitează un stil de viață mai relaxat. Când oamenii au inventat roata, lucrurile pe care le culegeau ajungeau la peșteră cu mai puțin efort. Atunci ar fi mișto ca oamenii care te caută în loc să vină cu personalul, ar veni cu un TGV. Bun, și atunci cum creștem viteza site-ului, cum îi punem site-ului roți? În lumea asta mare, a existat un tip pe nume Peter Druker, care a spus că: ”Nu poți administra corect ce nu poți măsura”. Așa că hai să trecem mai departe la măsurători.
Măsoară viteza site-ului cu tool-uri dedicate
Probabil ai ajuns pe pagina aceasta căutând pe Google ceva legat de cum să optimizezi un site să se deschidă mai repede.
Hai atunci să încep cu tool-ul Google PageSpeed Insights
Deși sunt și păreri contra acestui tool, și sunt sigur că are marja lui de eroare, e bine totuși să ținem cont și de el. Până la urmă tool-ul acesta e recomandat de cei care au motorul de căutare. Măsurarea se face foarte ușor, doar intri pe https://developers.google.com/speed/pagespeed/insights/, introduci numele site-ului și o să vezi un raport ca cel de mai jos.
Site-ul primește o notă de la 0 la 100 și cu cât e mai mare cu atât mai bine. Între 0-49 e nasol, între 50-89 e mai bine și între 90-100 e excelent. Tool-ul oferă o notă atât pentru versiunea de desktop a site-ului cât și pentru varianta pentru telefon mobil.
Alte lucruri interesante pe care le pe care le arată tool-ul Google Pagespeed Insights sunt durata de timp până la încărcarea primului lucru din site, durata până când site-ul devine utilizabil, oferă oportunități de îmbunătățire a vitezei site-ului, un diagnostic și o listă cu lucrurile pe care le-a verificare și care sunt în regulă.
De Gtmetrix ați auzit?
Un alt tool, creat de o companie independentă de Google, este cel care poate fi accesat pe pagina https://gtmetrix.com/. În general e bine ca o informație să fie verificată din 3 surse pentru a veridicitatea ei. Dacă nu ai încredere în tool-urile Google, Gtmetrix poate să fie una din alternative. Bun, la fel ca și Pagespeed Insights, doar introducem numele site-ului/paginii în tool, iar în câteva secunde/minute (în funcție de cât de busy e serverul lor), o să ne fie afișat un raport ca cel de mai jos.
Din imagine se poate vedea că testul a fost realizat din Canada, însă prin realizarea unui cont gratuit se poate schimba asta. În mod teoretic testul ar trebui realizat din țara targetată de site (dacă scrii pentru români, testezi din România), însă hosting-urile și CDN-urile (Content Delivery Network/Rețea de Distribuit Conținut?) din România mai au lucruri de învățat ca să realizeze lucruri utile și cool pentru geekși.
Așadar tool-ul afișează două note generale pentru viteza site-ului. Notele sunt procentuale, deci ca și în cazul Google Pagespeed Insights, sunt două note de la 1 la 100. Pe lângă note se poate vedea viteza de încărcare a site-ului, în cazul de față fiind 3.7s. În principiu orice durată peste 3 secunde înseamnă venit pierdut. În 2006 Amazon calcula că pentru fiecare 100ms câștigate la viteza de încărcare, veniturile îi cresc cu 1% (eng content). Pe lângă nota, Un alt lucru interesant este dimensiunea site-ului, unde se poate vedea că în cazul de față este de sub 1MB. Normal că dacă-ți faci un site cu țâșpe mii de poze și-un video fix la deschidere, site-ul o să se încarce în o mie de ani și nu o să-i pese nimeni de ce e acolo. Și ultimul metric pe care cei de la Gtmetrix îl scot în față este numărul de requesturi/cereri - comunicarea între device-ul utilizatorului și server se face prin mai multe cereri, cu cât mai multe, cu atât lucrurile funcționează mai lent. Dacă în loc de tab-ul PageSpeed care se vede în partea de jos a imaginii, mergem în tab-ul Waterfall/Cascadă, putem vedea toate fișierele și scripturile care comunică cu serverele și modul în care fac asta. Este bine de știut că JS-urile blochează încărcarea site-urilor dacă nu sunt plasate corespunzător în site. Dezvoltatorul cu care lucrezi ar trebui să știe de async și defer. În plus, din punct de vedere viteză de încărcare, ajută mult un tool de administrare a tag-urilor precum Google Tag Manager.
Al 3-lea tool pentru măsurarea vitezei prezentat este Lighthouse
Accesarea tool-ului se face fie clasic prin accesarea paginii web https://www.webpagetest.org/lighthouse sau mai există și varianta în care se face prin Inspect Element -> Audits din browserul Google Chrome. Raportul arată în felul următor:
Dacă ți se pare că partea de Performance arată similar cu cea din tool-ul Google Pagespeed Insights, secțiunea de Lab Data, așa și este. Google folosește și date din acest tool pentru generarea rapoartelor. Recomandarea tool-ului este ca auditarea să se realizeze în modul Incognito sau pe un profil de Google Chrome care nu are instalat extensii. Recomand folosirea acestui tool mai ales pentru că are partea de auditare pentru PWA (Progressive Web App-uri), site-uri realizate în Angular sau React, care ușor devin tot mai îmbrățișate de companii din lume.
Acum că știm unde suntem, întrebare e: ce e considerat bun în lumea internetului, unde vrem să țintim?
Date de referință de luat în considerare când e vorba de viteza de încărcare a site-urilor
Normal, cu cât un site se încarcă mai repede pentru utilizatori e mai bine, totuși aceasta e un exprimare relativă care nu ajută la formarea unei direcții. Însă, internetul e plin de informații utile și există niște date statistice legate de subiect.
Studiul este realizat de Google în Feb 2017 (eng content) și din păcate nu a mai fost updatat.
Așa cum se poate vedea în imagine, cu cât viteza de încărcare a site-ului e mai slabă, cu atât crește rata de respingere a site-ului. Studiul vorbește foarte clar de optimizarea dimensiunii site-ului și se specifică faptul că unui site/unei pagini de 1.49MB îi ia 7 secunde să se încarce. Mai adaugă că în momentul în care au adunat datele, au dat peste o pagină cu o imagine de 16MB. Așadar, gândește-te de două ori dacă vrei să încarci direct imaginile de pe DSLR-ul tău. Chiar nu e o idee prea bună să faci asta și întâmplarea face să chiar am o experiență similară.
Există și studii independente despre viteza de încarcare (ex Pingdom) și aș concluziona că versiunea de desktop a site-ului ar trebui să se încarce în 2-3 secunde, iar cea de mobile în 4-5 secunde. O astfel de viteză se poate considera fundamentală pentru un operarea unui business în mediul online. Nu ar trebui să ne gândim la modalități de promovare a site-ului dacă viteza lui de încărcare nu se realizează între acești timpi. E ca și cum am avea o casă mișto care e așezată într-o prăpastie. Și nu e singura casă, ci mai sunt 2 miliarde de case.
Acum că avem cum să măsurăm și știm unde vrei să ajungem cu optimizarea, hai să vorbim și de lucrurile recomandate de tool-uri pentru optimizarea vitezei de încărcare a site-urilor.
Moduri de îmbunătățire a vitezei de încărcare a site-ului
Optimizare imagini
Că tot menționam dimensiunea imaginilor din studiul Google, hai să începem cu asta. Și ca să ținem lucrurile la un nivel confortabil, propun să nu vorbim chiar de noile formate de imagini JPEG 2000, JPEG XR, sau WebP despre care Google spune că au un nivel de compresie mai ridicat, ci să vorbim de JPEG sau PNG. În primul rând, abordarea mea începe cu verificarea contului de Google Analytics despre care am scris în articolul legat de conținut valoros, tool care are o variabilă în care se stochează rezoluția ecranului dispositivului pe care-l folosește vizitatorul site-ului. În felul acesta, dacă vedem că 95% din vizitatori folosesc dispozitive cu o rezoluție de sub 1366x768, nu prea are sens să încărcăm imaginile la o rezoluție de 1920x1080. Un lucru pe care-l facem pentru 5% din vizitatori (care oricum văd imaginea, doar că o văd mai mică), poate să îngreuneze viteza de încărcare a site-ului peste 100% din vizitatori, iar 95% din ei nici nu o să-și dea seama de ce. Poate crește rata de conversie pe cei 5% din oameni care folosesc dispozitive FullHD, însă am scădea rata de conversie pentru restul de 95%.
Acum că știm în ce rezoluție să încărcăm imaginile, să vorbim și despre compresie. Practic, asta se poate face începând din tool-urile de procesare a imaginilor (Ex Adobe Photoshop, Adobe Lightroom sau Corel Painter), până la tool-uri care se accesează prin web. De exemplu deschide tinyjpg.com sau tinypng.com, tragi în secțiunea semnalizată până la 20 de imagini, iar tool-ul o să-ți ofere posibilitatea să descarci varianta lor optimizată.
De exemplu am optimizat logo-ul Google din:
în
Observi o diferență între cele două imagini? Imaginea optimizată este cu 42% mai mică față de cea originală, de la 7kb la 4kb. Poate părea o diferență mică, însă vorbim deja de optimizarea unui lucru optimizat de Google, iar o diferență de 3kb, înmulțită la 11.7M internauți din România care majoritatea folosesc Google cel puțin o dată pe lună, înseamnă cu vreo 35GB mai puțin trafic pe server. Oare o să meargă mai bine?
Optimizare cache
Țin să menționez partea aceasta de optimizare a cache-ului pentru că ea m-a ajutat destul de mult să optimizez viteza de încărcare a site-ului de pe care citești informațiile aceastea aici și acum. Există și în tool-ul Gtmetrix niște recomandări care spun:
”Configurează serverul Apache cu header-urile corespunzătoare”, iar pe urmă oferă un cod pe care ei îl recomandă introduc în fișierul .htaccess de pe server.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
Însă, după mai multe postări citite, am ajuns la același lucru folosind plugin-ul W3 Total Cache cu niște setări custom (eng content). Și pentru că tool-ul are atât de multe opțiuni încât începe să se manifeste atât paradoxul alegerii despre care făceam referire în articolul legat de personalizarea internetului, cât și lovitul de curba de învățare pe care o are un tool-ul destul de avansat, am găsit și un fișier care se poate importa în plugin și care o să modifice setările. Acum nu spun că acest fișier se potrivește pentru orice site, însă mie fișierul cu setările ideale pentru plugin-ul W3 Total Cache mi-a fost util și mi-a scăzut cu mult timpul de încărcare a site-ului.