- 23/01/2025
- S.E.O. Onpage
Ce reprezinta viteza de incarcare a website-ului (PageSpeed)?
Viteza de incarcare a website-ului este determinata de durata de timp de la momentul la care browser-ul face request catre un website si afisarea (randarea) completa a continutului acestuia (cod HTML, imagini, script-uri CSS/JS).
Aceasta este influentata in linii mari de factori cum ar fi:
- Dimensiunea paginii web
- Tipul de continut
- Conexiunea de internet
- Device-ul de pe care se acceseaza website-ul
- Sistemul de operare
- Browser-ul folosit
- Hosting
De ce este importanta viteza de incarcare?
Fie ca vrei sa iti faci un website de prezentare sau ai un shop, viteza de incarcare este esentiala. De aceea trebuie sa intelegem ca:
- un website care se incarca greu poate sa “goneasca” utilizatorii.
- un website care se incarca greu iti poate afecta campaniile de Google Ads (poate diminua Quality Score-ul si Landing Page Experience-ul)
- un website care se incarca greu iti poate afecta ranking-ul in cautarile organice pe Googl
Care sunt factorii care pot afecta viteza de incarcare a website-ului?
Hosting-ul
Alegerea unui tip de hosting inadecvat business-ului tau poate afecta viteza de incarcare. In principiu, planul de hosting se alege in functie de tipul de continut (de ex: website de prezentare, shop, blog) si traficul estimat.
Hosting-ul de tip shared
Este cea mai ieftina optiune din punct de vedere financiar. Dupa cum ii zice si denumirea – “shared” hosting-ul iti pune la dispozitie resurse, dar website-ul tau este hostat impreuna cu alte website-uri pe server-ul fizic si pe acelasi sistem de operare, tu”impartind” practic resursele cu celelalte website-uri hostate pe acelasi server.
Hosting-ul de tip VPS (Virtual Private Server)
Reprezinta o varianta imbunatatita a celei de mai sus, diferenta fiind ca ai propriul server virtual si chiar daca fizic esti pe acelasi server cu alte website-uri, ai propriul sistem de operare, separat de celelalte website-uri.
Hosting-ul de tip Cloud
Cloud Hosting-ul este tot un VPS dar cu mentiunea ca website-ul tau se poate afla in mai multe servere din cloud, acest lucru facandu-l mult mai rapid de accesat.
Hosting-ul de tip Dedicated
Cea mai scumpa optiune din punct de vedere financiar, acest tip de hosting iti da posibilitatea sa ai control total asupra resurselor, iar pe server vor fi hostate doar website-urile tale.
Continutul website-ului
Continutul website-ului are poate cel mai mare impact asupra vitezei de incarcare. Iti prezint mai jos cateva exemple de optimizari ce pot fi facute pentru a imbunatati viteza de incarcare a website-ului tau:
- Comprimarea fisierelor de tip Javascript si CSS
- Comprimarea codului HTML
- Optimizarea imaginilor si folosirea lazyload pentru livrarea de imagini
- Setarea timpilor de expirare a cache-ului pentru diverse tipurile de resurse
Comprimarea fisierelor de tip Javascript si CSS
Acest lucru se poate realiza folosind o serie de librarii dedicate. Una din librariile pe care noi o folosim o poti descarca aici.
Ce face aceasta librarie?
Cu ajutorul acestei librarii fisierele javascript/css sunt comprimate si servite sub forma unui singur fisier (combined).
Cum se foloseste?
- In fisierul config.php din interiorul folder-ului min schimbam valoarea variabilei $min_enableBuilder in true
- Accesam urmatorul URL https://siteultau/min/builder/ (user: admin si parola: admin)
- Adaugam path-urile fisierelor css/js in builder si apasam update
- Dupa apasarea butonului update se va genera un URL care va livra fisierele css/js comprimate
- URL-ul nou generat se va folosi pentru livrarea CSS/JS in locul scripturilor deja existente
Comprimarea codului HTML
Acest lucru se poate realiza tot cu libraria de mai sus astfel:
Punem urmatoarea bucata de cod in header-ul site-ului inaintea tag-ului de <html>:
<?php
function html_minify_finish( $html ) {
require_once(‘min/html_min.php’);
$script_htmlmin = new TinyMinify;
$html = $script_htmlmin->html( $html, $options = [
‘collapse_whitespace’ => ‘yes’
]);
return $html;
}
ob_start();
?>
iar in footer-ul website-ului, dupa inchiderea tag-ului </html>:
<?php
$html = ob_get_clean();
echo html_minify_finish( $html );
Optimizarea Imaginilor si folosirea LazyLoad pentru incarcarea lor pe website
Imaginile ce au dimensiuni foarte mari atat ca rezolutie cat si ca spatiu ocupat pe disc duc la o incarcare foarte grea a website-ului.
Recomandarea Google este ca livrarea imaginilor pe site sa respecte urmatoarele cerinte:
- Sa fie dimensionate corect in raport cu containerele acestora. Spre exemplu, daca avem un slider de latime 1280 pixeli, nu trebuie sa incarcam in el imagini de o rezolutie mai mare de 1280 de pixeli.
- Sa fie cat mai optimizate din punct de vedere spatiu ocupat pe disc. Poti folosi un tool gratuit care face asta – https://tinypng.com/. Cu ajutorul TinyPNG poti comprima/optimiza toate imaginile de pe website-ul tau.
- Sa fie incarcate printr-o metoda de tip lazyload. Folosind LazyLoad, imaginile se vor incarca pe masura ce se scroleaza continutul website-ului. Un mare avantaj aici ar fi ca imaginile din website nu se vor incarca toate de-odata, ci pe masura ce dai scroll, reducand astfel cantitatea de date transmisa la incarcarea paginii si numarul de request-uri. Acest lucru se poate face fie prin adaugarea atributului loading (atribut ce este suportat de browserele moderne) pe elementele de tip img (ex: <img loading=”lazy” src=”https://path.to.image” />), fie printr-un script de JS care face asta. Un exemplu ar fi:
// layzload images – clasa care trebuie aplicata pe elementele de tip img trebuie sa fie lazy-image iar atributul src se inlocuieste cu data-src – ex: <img class=”lazy-image” data-src=” https://path.to.image”>
document.addEventListener(“DOMContentLoaded”, function() {
var lazyloadImages = document.querySelectorAll(“img.lazy-image”);
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove(‘lazy-image’);
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener(“scroll”, lazyload);
window.removeEventListener(“resize”, lazyload);
window.removeEventListener(“orientationChange”, lazyload);
}
}, 20);
}
document.addEventListener(“scroll”, lazyload);
window.addEventListener(“resize”, lazyload);
window.addEventListener(“orientationChange”, lazyload);
});
Setarea timpilor de expirare a cache-ului pentru diverse tipurile de resurse
Pentru a intelege de ce este importanta aceasta optimizare trebuie sa intelegem in linii mari ce inseamna. In momentul in care vizitezi un website, browser-ul tau stocheaza local intr-un cache o copie a tuturor resurselor statice.
Acest lucru se realizeaza pentru o incarcare mai rapida a website-ului de catre browser-ul web si se bazeaza pe o politica de caching, politica ce se refera la acesti timpi de expirare a cache-ului.
Setarea unui timp de expirare cat mai mare a cache-ului pentru resursele ce se incarca pe website poate creste semnificativ viteza de incarcare.
Putem face aceasta optimizare prin simpla adaugare a unor linii de cod in fisier-ul .htaccess al website-ului:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 year”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType application/pdf “access plus 1 year”
ExpiresByType text/x-javascript “access plus 1 year”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 1 year”
</IfModule>
## EXPIRES CACHING ##
Acestea sunt doar cateva exemple de optimizare. Pentru o analiza mai completa poti accesa 2 dintre cele mai uzitate tool-uri de PageSpeed Test:
GTMetrix: https://gtmetrix.com/
Google PageSpeed Insights: https://pagespeed.web.dev/
