Optimizarea vitezei paginii: Cum să vă îmbunătățiți timpii de încărcare

Timpii de încărcare a site-ului sunt importanți dintr-un motiv simplu: au un impact mare asupra experienței generale a utilizatorilor. Prin urmare, una dintre cele mai importante considerații pentru îmbunătățirea performanței site-ului dvs. este modul în care puteți optimiza viteza paginii.

În acest ghid cuprinzător, veți învăța cum să măsurați viteza paginii (folosind instrumente gratuite și plătite), ce poate cauza viteze reduse pentru utilizatori și veți descoperi 26 de moduri de a vă optimiza timpii de încărcare. Sa incepem.

Cuprins

1. Tot ce trebuie să știți despre viteza paginii
2. Ce instrumente ar trebui să utilizați pentru a măsura viteza paginii
3. Cât timp ar trebui să dureze până când un site web se încarcă
4. Metode de optimizare a vitezei paginii
5. Măsuri OnPage pentru un site web rapid
6. Optimizarea automată a vitezei paginii

Tot ce trebuie să știți despre viteza paginii

De ce este important timpul de încărcare a site-ului?

Există mai multe motive pentru care un timp de încărcare rapid este foarte important:

1. Experiență pozitivă pentru utilizator: Google consideră că timpii de încărcare mai lungi au un impact sever asupra ratelor de respingere. De fapt, creșterea timpului de încărcare de la 1 la 6 secunde poate crește rata de respingere cu 106%, motiv pentru care acum este unul dintre principalele elemente vitale ale web pentru performanță (vezi mai jos).

2. Factorul de clasare SEO: Pentru Google și alte motoare de căutare, o experiență pozitivă a utilizatorului este un factor important în determinarea calității unui site web. Acesta este motivul pentru care Google folosește acum viteza paginii ca una dintre principalele elemente vitale ale web. Prin urmare, cu cât site-ul dvs. se încarcă mai repede, cu atât sunt mai mari șansele dvs. de a obține un clasament ridicat.

3. Optimizarea ratei de conversie: O întârziere de o secundă în timpul de încărcare poate reduce conversiile cu până la șapte procente, conform acestui studiu. Acest lucru poate să nu sune atât de semnificativ la început, dar dacă magazinul dvs. online generează o cifră de afaceri zilnică de 1.000 de euro, o întârziere de o secundă a timpului de încărcare poate duce la o pierdere de 70 de euro pe zi, în jur de 2.100 pe lună. Dacă calculezi acest lucru pe o bază anuală, o viteză mică a paginii este un adevărat ucigaș al cifrei de afaceri.

4. Crawling: site-urile care se încarcă lent sunt accesate cu crawlere mai lent și nu sunt accesate atât de intens, deoarece Googlebot are doar un buget limitat pentru accesare cu crawlere. Prin urmare, un timp de încărcare mai rapid poate însemna că site-ul dvs. este accesat cu crawlere mai des, ceea ce înseamnă că conținutul dvs. din indexul Google va fi, de asemenea, mai relevant.

Cum se măsoară viteza paginii?

În general, timpul de încărcare a unui site web este timpul, în secunde, de la momentul în care site-ul este apelat până când este complet afișat în browser. Termenii „timp de încărcare” și „viteza paginii” sunt folosiți interschimbabil. Dacă cauți pe web subiectul, vei găsi ambele variante. Timpul de încărcare al unui site web poate fi, de asemenea, împărțit în 4 măsurători diferite:

• Timp până la primul octet (TTFB) : timpul dintre apelarea site-ului web și primul octet încărcat de serverul web.
• First Contentful Paint (FCP) : ora la care un element de afișare este afișat pentru prima dată în browser.
• First Meaningful Paint (FMP) : ora la care utilizatorul are impresia că site-ul web este încărcat.
• Time to Interactive (TTI) : ora la care site-ul web a fost redat și este gata pentru introducerea utilizatorului.

În acest articol puteți afla exact cum se măsoară viteza paginii.

Ce instrumente ar trebui să utilizați pentru a măsura viteza paginii

Există multe instrumente disponibile pentru analiza și optimizarea timpilor de încărcare. Există, de asemenea, alte modalități de a determina timpul de încărcare a site-ului dvs., de exemplu, cu analiza fișierului jurnal.

PageSpeed ​​Insights

Acest instrument Google pentru măsurarea timpilor de încărcare este actualizat și îmbunătățit în mod constant. Cea mai recentă versiune a Pagespeed Insights se bazează pe Lighthouse, un instrument de optimizare a site-ului web care este disponibil și ca extensie în browserul Chrome. Utilizează date din CrUX, Raportul despre experiența utilizatorului Chrome.

După introducerea domeniului dvs., instrumentul calculează un scor de viteză între 0 și 100. PageSpeed ​​Insights distinge între un scor pentru dispozitive mobile și un scor pentru desktop. Scorul mobil este folosit ca standard și este adesea foarte scăzut, deoarece Google ar dori să motiveze operatorii de site-uri web să își optimizeze site-urile web special pentru versiunile mobile. Sub scorul de viteză sunt afișate măsurătorile individuale. Codul lor de culoare poate fi folosit pentru a determina gravitatea problemelor.

Figura 1: Pagina de pornire a Google PageSpeed ​​Insights

Google Analytics

Dacă vă analizați site-ul web cu Google Analytics, veți găsi statistici despre timpul de încărcare în zona „Performanță”. Faceți clic pe „viteza site-ului”. Dacă ați instalat urmărirea comerțului electronic, puteți evalua direct modul în care viteza de încărcare afectează conversiile.

Google Search Console

În Google Search Console, veți găsi timpii de încărcare sub punctul de meniu „Crawling”. Acolo vi se va afișa câți kiloocteți sunt descărcați pe zi și cât timp are nevoie Googlebot pentru a descărca unul dintre site-urile dvs. în milisecunde. Acest lucru vă ajută să descoperiți cu ușurință problemele legate de timpii de încărcare a site-ului dvs.

Ryte

Pe platforma Ryte, sub Performanță web , veți vedea o prezentare generală a punctajului paginilor dvs. în raportul „Timp de încărcare”. Sub această prezentare generală, vi se oferă, de asemenea, informații detaliate despre cum punctează paginile individuale pentru „Timp de conectare”, „Timp până la primul octet” și „Timp de încărcare”.

Există, de asemenea, un raport separat „Core Web Vitals”, care arată modul în care site-ul dvs. obține scoruri pentru indicatorii cheie de experiență Google, care includ viteza de încărcare (măsurată prin „Largest Contentful Paint”), împreună cu interactivitate („First Input Delay”) și stabilitate vizuală („Schimbarea aspectului cumulat”).

Yslow

Yslow a fost dezvoltat de Yahoo!. Îl puteți folosi ca bookmarklet, un instrument pentru centrul de comandă sau ca extensie de browser. Regulile de viteză se bazează pe specificațiile Yahoo!. Instrumentul este, de asemenea, interesant pentru utilizatorii avansați datorită funcțiilor din linia de comandă. Rețineți că pluginul, Firebug, trebuie instalat și pentru a utiliza pluginul prin Firefox.

Figura 2: Yslow

Pingdom

Trebuie să vă înregistrați pentru a utiliza Pingdom.com. Vă arată timpii de încărcare cu diagrame și statistici, ceea ce simplifică evaluarea. Puteți vedea cu ușurință ce elemente.

Figura 3: Pingdom

WebPageTest.org

Cu WebPageTest.org, puteți simula timpul de încărcare cu diferite browsere. De asemenea, puteți testa din diferite locații pentru a testa cât de repede se încarcă un site pentru vizitatorii din alte țări.

Care se încarcă mai repede

Care se încarcă mai repede compară timpul de încărcare a două site-uri unul cu celălalt. Website Speed ​​Ranker, cu care puteți compara până la patru site-uri simultan, funcționează în mod similar.

Cât timp ar trebui să dureze până când un site web se încarcă?

În general, un site ar trebui să se încarce în mai puțin de două secunde pentru o experiență de utilizator satisfăcătoare. Cu cât timpul de încărcare este mai scurt, cu atât mai bine. În mod ideal, încărcarea ar trebui să dureze mai puțin de o secundă. Cât de repede se încarcă site-ul dvs. depinde de diverși factori. Unele, vă puteți îmbunătăți cu optimizarea în pagină; pe alții pe care nu îi poți influența.

Nu ai nicio influență asupra acestor factori:

• Lățimea de bandă: timpul de încărcare a site-ului dvs. este influențat de lățimea de bandă disponibilă pe internet. Cu o conexiune 3G și un smartphone, site-ul se va încărca mai lent decât cu o conexiune DSL rapidă.
• Cache-ul browserului: Dacă un utilizator folosește un browser al cărui cache nu a fost golit de mult timp, încărcarea site-ului poate fi semnificativ mai lentă, deoarece memoria computerului nu poate procesa volumul de date.
• Puterea de procesare a clientului: computerele desktop și smartphone-urile mai vechi pot întâmpina întârzieri în încărcarea paginii, deoarece structura DOM și execuția scripturilor sunt încetinite de memoria insuficientă și puterea de procesare.

Puteți influența acești factori:

• Dimensiunile fișierelor: dimensiunea fișierelor dvs. determină cât de repede poate fi încărcat site-ul dvs. Aceasta include nu numai codul HTML în sine, ci și foi de stil, fișiere script și imagini. Cu cât fișierele sunt mai mici, cu atât pagina se poate încărca mai rapid.
• Conexiuni la server: atunci când o pagină web este apelată, serverul web procesează cererea. Poate procesa mai rapid dacă are mai puține date de procesat. Dacă se fac multe solicitări în același timp cu trafic mare pe site, memoria principală și capacitatea procesorului pot fi folosite prea mult și astfel devin un blocaj pentru timpul de încărcare. În acest caz, capacitățile ar trebui mărite.

24 de moduri de a optimiza viteza paginii

OK, acum că știți de ce sunt importanți timpii de încărcare și cum să îi măsurați pentru site-ul dvs. web, să ne uităm la diferite metode pe care le puteți încerca pentru a optimiza viteza paginii:

1. Creați timpi de conexiune rapid

Conexiunea dintre serverul web și utilizator trebuie stabilită înainte ca cererea de pagină web să poată fi procesată de serverul web. Timpul petrecut pentru aceasta se numește timp de conectare, latență sau ping. Puteți măsura acest lucru pe platforma Ryte, sub Performanță web . În mod ideal, latența este mai mică de 100 de milisecunde. Dacă configurarea conexiunii necesită mult mai mult timp, pot fi luate măsuri de optimizare.

2. Utilizați un CDN pentru acoperire globală

Dacă este important ca afacerea dvs. online să aibă o prezență globală, veți observa rapid că timpii de conectare pot varia foarte mult în funcție de locul de unde este accesat site-ul. Acest lucru se datorează faptului că nodurile cresc geografic până la centrul de date în care se află serverul dvs. web.

O rețea de livrare de conținut, pe scurt CDN, poate ajuta aici. CDN-ul asigură că site-ul dvs. este stocat în cache într-o rețea globală de servere, astfel încât să existe întotdeauna un număr mic de noduri între computerul utilizatorului și următorul server din CDN. Acest serviciu este asociat cu costuri ridicate, care nu sunt neapărat plătite pentru operatorii unui site web care se adresează în principal zonei de limbă germană.

Pentru a utiliza un CDN, trebuie să vă înregistrați la un furnizor. Cloudflare are câteva planuri gratuite, dar ar trebui să verificați exact cu ce condiții este gratuită oferta. Furnizorii cu taxe taxează de obicei pe volumul de date care este utilizat lunar în rețea.

Furnizorii cunoscuți sunt:

• Amazon Cloudfront
• Cloudflare
• Stackpath
• wao.io

3. Optimizați-vă serverul web pentru viteza paginii

Când se stabilește conexiunea la serverul web, această solicitare procesează și furnizează fișierele solicitate. Sunt numite și scripturi de pe partea serverului, care, de exemplu, citesc conținutul din bazele de date și îl fac disponibil pentru ieșire.

4. Detectează blocajele din infrastructură

Când o pagină web se încarcă lent, se poate datora faptului că serverul web și infrastructura de bază sunt supraîncărcate. Acest lucru poate avea mai multe cauze, de exemplu dacă hosterul are o eroare sau pentru că serverul web trebuie să răspundă la prea multe solicitări deodată.

Este important să recunoaștem aceste blocaje pentru a putea reacționa rapid. Multe soluții de găzduire oferă valori pentru a monitoriza utilizarea serverului. Dintre măsurătorile prezentate mai sus, „Time to First Byte”, care poate fi măsurat cu platforma Ryte sub Web Performance , poate fi de asemenea util. Dacă crește semnificativ, poate exista o problemă cu serverul web.

5. Utilizați memoria cache pe partea de server

Conținutul care este solicitat frecvent, de exemplu interogări de baze de date, poate fi stocat în cache pe server, astfel încât cererile să nu fie executate din nou și din nou. Acest lucru este deosebit de important pentru utilizatorii care doresc să citească mai multe articole sau să vadă produse – adică să apeleze mai multe pagini din sesiunea lor. Timpii de încărcare după apelarea primei pagini pot fi astfel reduse.

În setările software-ului serverului web – serverul Apache HTTP și Nginx sunt cel mai frecvent utilizate – stocarea în cache pe server poate fi activată și configurată. Dacă nu aveți cunoștințele necesare, puteți să întrebați furnizorul dvs. de găzduire sau să solicitați caching-ul și alte măsuri PageSpeed ​​efectuate de un serviciu cloud automat (vezi mai jos).

6. Utilizați memorarea în cache a browserului

Cu memorarea în cache a browserului, elementele site-ului dvs. sunt stocate în cache de un browser web, mai degrabă decât în ​​cache de server a serverului web. Prin urmare, nu toate elementele trebuie încărcate din nou atunci când accesați o nouă adresă URL pe site-ul dvs. web. Aceasta crește viteza de încărcare.
Memorarea în cache a browserului poate fi activată de multe CMS prin pluginuri sau extensii.

Pluginurile posibile pentru memorarea în cache a browserului cu WordPress sunt, de exemplu:

• WP Rocket
• Cache total W3
• Cel mai rapid cache WP

Activarea manuală a stocării în cache a browserului are loc printr-o ajustare a fișierului .htaccess. Astfel, puteți activa două module ale serverului Apache: mod_headers și mod_expires.

Dacă utilizați mod_headers, .htaccess trebuie completat cu următorul cod (Sursă – GitHub):

<FilesMatch ".(css|js|gif|pdf|jpg|jpeg|png)$">
Set antet Cache-Control „max-age=2592000, public”
</FilesMatch>

Parantezele rotunjite se referă la formatul de fișier care urmează să fie plasat în cache. În același timp, durata cache-ului trebuie dată cu „vârsta”. Unitatea este în secunde. În acest exemplu, memoria cache este salvată de browser timp de 30 de zile.

Dacă doriți să utilizați mod_expires pentru memorarea în cache a browserului, fișierul .htaccess este extins cu următoarele linii:

## Expirare cache ##
<IfModule mod_expires.c>
ExpirăActiv pe
ExpiresByType image/jpg „acces plus 1 an”
ExpiresByType imagine/jpeg „acces plus 1 an”
ExpiresByType imagine/gif „acces plus 1 an”
ExpiresByType imagine/png „acces plus 1 an”
ExpiresByType text/css „acces plus 1 lună”
ExpiresByType text/html „acces plus 1 lună”
Aplicația ExpiresByType/pdf „acces plus 1 lună”
ExpiresByType text/x-javascript „acces plus 1 lună”
Aplicația ExpiresByType/x-shockwave-flash „acces plus 1 lună”
ExpiresByType imagine/pictogramă x „acces plus 1 an”
ExpirăDefault „acces plus 1 lună”
</IfModule>
## Expirare cache

Această metodă permite ca un interval de timp unic să fie determinat separat pentru fiecare tip de fișier.

7. Utilizați compresia GZip

Fișierele pot fi procesate și trimise cel mai rapid dacă sunt cât mai mici posibil. Acest lucru se aplică și codului care urmează să afișeze site-ul web în browserul utilizatorului. La fel ca un fișier zip, acest cod poate fi comprimat și astfel redus în dimensiune. Datele comprimate sunt apoi despachetate în browser.

Această metodă a fost privită cu scepticism pentru o lungă perioadă de timp, deoarece puterea de calcul a serverului web este necesară, iar acest lucru necesită și timp. Cu toate acestea, beneficiile depășesc dezavantajele, așa că cu siguranță ar trebui să îl utilizați. Citiți ghidul nostru complet pentru comprimarea codului site-ului web.

Cum pot comprima fișiere cu gzip?

Serverul Apache este cel mai des folosit pentru site-uri web, deci următorul exemplu este pentru Apache.

Sunt utilizate două module diferite: mod_deflate și mod_gzip.

1. Modulul mod_deflate este de obicei preinstalat. Cu următoarea comandă de consolă puteți verifica dacă există deja:

sudo apachectl -t -D DUMP_MODULES | grep deflate

Dacă obțineți rezultatul „deflate_module (shared)”, atunci mod_deflate este deja instalat. În caz contrar, contactați-vă gazda.

2. Acum deschideți „httpd.conf”, fișierul de configurare Apache. De obicei, îl puteți găsi în folderul „/etc/httpd/conf/”. Acolo adăugați următoarea linie:

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
aplicație/javascript

Aceasta indică faptul că textul și codul HTML, CSS și JavaScript sunt comprimate cu GZip. Salvați fișierul și reporniți serverul web Apache. De acum, datele vor fi comprimate de Apache.

8. Activați HTTP/2

În mod implicit, toate fișierele paginilor web (de exemplu, imagini și scripturi) sunt încărcate folosind protocolul HTTP/1.1. Aceste fișiere sunt descărcate unul după altul printr-o conexiune separată.

Acest lucru încetinește procesul de încărcare. Cu un certificat SSL, serverul web poate fi comutat la protocolul HTTP/2. Prin HTTP/2, toate fișierele sunt descărcate printr-o singură conexiune. De asemenea, sunt prioritizate. Toate browserele obișnuite acceptă protocolul, astfel încât să puteți lucra cu el fără ezitare.

Aflați mai multe în acest articol: Cum să îmbunătățiți viteza de încărcare a paginii web cu HTTP/2: un ghid pentru începători.

9. Comprimați imaginile

Cea mai mare parte proporțională a volumului de descărcare a unui site web este alcătuită din imagini. Acest lucru este cu atât mai adevărat pentru magazinele online cu multe produse și site-uri de portofoliu, în special cele ale fotografilor.

Dacă reușiți să reduceți semnificativ dimensiunea fișierului imaginilor dvs., puteți crește semnificativ viteza paginii. Am scris deja un articol amplu despre compresia imaginii pe Ryte. Iată un rezumat.

10. Optimizați toate imaginile

Imaginile sunt importante pentru a face un site web clar și atractiv pentru utilizatorii dvs. Dar imaginile amenință, de asemenea, să crească substanțial dimensiunea fișierului site-ului dvs. și să încetinească timpul de încărcare. Prin urmare, ar trebui să utilizați numai imagini care sunt optimizate pentru utilizarea web.

În general, fotografiile și grafica de înaltă calitate ar trebui să fie considerate fișiere JPEG, iar elementele grafice mai mici și cu puține culori sau transparente ar trebui considerate fișiere PNG.

Următorii pași:

• Comprimați-vă imaginile înainte de a le încărca pe site-ul dvs. web cu un program de procesare a imaginilor, cum ar fi Gimp sau Adobe Photoshop. Ambele programe oferă începătorilor o funcție de „salvare pentru web”. În acest fel, dimensiunea fișierului va fi optimizată automat. Cu instrumente precum kraken.io sau PNGGauntlet, puteți reduce dimensiunea fișierului eliminând informații suplimentare.
• Dimensiunea corespunzătoare a imaginii este dată în codul sursă: Dacă un browser trebuie să calculeze singur dimensiunea graficelor, timpul de încărcare poate fi mărit. Dimensiunea dată ar trebui să corespundă cu dimensiunea originală a imaginii stocate pe server. De asemenea, puteți defini informațiile despre dimensiunea imaginii prin CSS.
• Eliminați metaetichetele și datele EXIF: dacă, de exemplu, utilizați imagini de pe propria cameră sau smartphone, acestea conțin o mulțime de informații suplimentare, cum ar fi locația, camera utilizată și alte date. Cu un instrument precum tinypng, le puteți elimina și economisi spațiu de stocare.

11. Utilizați formatul de imagine WebP

Cu WebP, Google a creat un nou format de imagine care poate comprima atât imaginile fără pierderi (similar cu PNG), cât și cu pierderi (similar cu JPEG). Este chiar mai eficient decât vechile formate.

Nu toate browserele acceptă încă WebP. Prin urmare, este logic să stocați alternative pentru fișierele WebP în codul sursă și să instalați un comutator, de exemplu:

<imagine>
<source type="image/webp">
<source type="image/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</picture>

12. Distinge între site-urile desktop și cele mobile

În viitor, mai mult de jumătate dintre utilizatori vor accesa site-urile web prin intermediul unui dispozitiv mobil în loc de un computer desktop. Cerințele pentru imagini sunt foarte diferite pe ambele medii de ieșire. Pe desktop, există de obicei o conexiune bună la Internet, iar pe monitoarele HD mari, utilizatorul dorește imagini de înaltă rezoluție corespunzătoare și de cea mai bună calitate.

Pe dispozitivele mobile, pe de altă parte, site-urile web sunt adesea accesate în mișcare și, prin urmare, nu cu cea mai mare lățime de bandă. Afișajul mic înseamnă, de asemenea, că cerințele de calitate sunt mai scăzute.

În plus, datorită formatului ecranului, imaginile sunt afișate cu o rezoluție diferită de cea de pe desktop. Prin urmare, are sens să se facă distincția între mediile de ieșire și să se creeze două variante ale unei imagini.

Similar cu exemplul anterior pentru WebP, comutatoarele pot fi stocate și în codul site-ului web în acest scop. Cu CSS, de exemplu, rezoluția ecranului poate fi interogată și astfel afișajul poate fi adaptat la mediul de ieșire.

13. Configurați încărcarea leneșă

În prezentările de ansamblu ale produselor și galeriile foto sunt afișate multe imagini simultan – acest lucru încetinește foarte mult timpul de încărcare. Aceasta este o problemă în special pentru operatorii de magazine și fotografi, și mai ales enervant pentru magazinele online, deoarece este adesea pagina de pornire sau prima pagină a categoriilor de produse.

Cu toate acestea, multe dintre imaginile încărcate în acest fel sunt vizibile doar pentru utilizator atunci când acesta derulează în jos pe pagină. Deci nu este necesar ca acestea să fie deja încărcate atunci când utilizatorul se uită la partea „de deasupra pliului”.

Cu o metodă numită „încărcare lenenă”, vă puteți asigura că imaginile de sub dosar sunt încărcate numai atunci când apar efectiv în fereastra de vizualizare.

14. Curățați codul sursă

Când este apelată adresa URL a unui site web, un client sau un browser urmează codul sursă al documentului HTML linie cu linie. Sunt citite toate caracterele goale sau rupturile de rând. Un caracter gol de prisos nu va influența negativ performanța site-ului dvs.

Dar pentru că un site web, în ​​funcție de dimensiunea sa, poate consta din mai mult de o sută de linii de cod sursă, o mulțime de caractere goale sau comentarii inutile pot afecta în mod clar timpul de încărcare.

Prin urmare, ar trebui să minimizați codul sursă:

• Eliminați toate comentariile inutile.
• Eliminați toate caracterele goale de prisos.
• Ștergeți formatarea inutilă, dacă, de exemplu, în codul sursă se găsește o formatare fără conținut, cum ar fi „<strong></strong>”

Pentru a evita codul sursă de prisos, ar trebui fie să inserați întotdeauna textul formatat ca HTML în site-ul web, să utilizați editorul CMS, fie să inserați și apoi să formatați textul ca text simplu. Dacă integrați textul din Word sau din alt program Office direct în CMS, acest lucru va avea ca rezultat un cod sursă de prisos.

În plus, există programe care pot elimina toate spațiile și comentariile din codul sursă. Dacă doriți să utilizați aceste programe, ar trebui să păstrați întotdeauna o copie pentru editare, deoarece fișierul minificat este greu de citit.

15. Reduceți scripturile externe

Indiferent dacă sunt butoane de partajare sau coduri de urmărire, scripturile externe pot fi integrate în site-ul dvs. în diferite moduri și în scopuri diferite. Acest lucru vă face să dependeți de disponibilitatea acestor scripturi din altă sursă.

Dacă serverul web de pe care este preluat scriptul este deosebit de lent, acest lucru va încetini și timpul de încărcare a site-ului dvs. Așa că verificați dacă aveți într-adevăr nevoie de aceste scripturi.

Alte sfaturi:

• Utilizați numai coduri de urmărire asincrone. Acestea nu se încarcă decât după ce site-ul a fost randat și nu împiedică încărcarea site-ului.
• Utilizați instrumente precum Google Manager de etichete. Aceasta înseamnă că un singur fragment de cod trebuie să fie integrat în codul sursă pentru un număr de coduri de urmărire, iar timpul de încărcare nu este influențat semnificativ.
• Dacă este posibil, ar trebui să stocați scripturile pe serverul dvs. web și să nu le integrați din exterior.
• Reduceți numărul de cadre iFrame.

16. Externalizați JavaScript și CSS

JavaScript este un limbaj de scripting cu ajutorul căruia funcțiile pot fi executate în browser și, prin urmare, pe computerul client. CSS (Cascading Style Sheets) poate fi folosit pentru a defini formate și reprezentări pentru site-ul web. Pentru aceste elemente este nevoie de mult cod sursă, care trebuie încărcat din nou de fiecare dată când se solicită o adresă URL. Acest lucru necesită timp.

Pentru a reduce codul sursă, puteți externaliza fișierele CSS și JavaScript. Acestea vor fi apoi îmbinate într-un singur document. Este necesară o singură recuperare. Dacă browserul încarcă fișierul în cache, timpul de încărcare poate fi redus din nou.

Cum să externalizați JavaScript:

Afișați codul sursă al site-ului dvs. cu un editor. Apoi, decupați toate fișierele JS și creați un fișier text nou în care introduceți toate fragmentele de cod. Salvați fișierul ca main.js și stocați-l pe serverul dvs. în folderul în care se găsesc toate celelalte fișiere HTML.

În codul HTML al site-ului web, eliminați următoarele comenzi:

și

Schimbați comanda ștearsă cu această comandă:

17. Minimizați fișierele CSS și JavaScript

Puteți reduce dimensiunea CSS și JavaScript prin eliminarea caracterelor goale inutile. Acestea sunt numite și „spatii albe”. În acest fel, codul sursă poate fi, de exemplu, redus la o singură linie.

Fragment de cod cu caractere goale disponibile:

Cod CSS și caractere goale:

Lizibilitatea este mult redusă prin eliminarea spațiilor libere și a comentariilor. În mod ideal, ar trebui să lucrați cu două versiuni: o versiune cu toate spațiile și comentariile pe care le puteți edita și o versiune pentru afișare pe site.

Pentru a nu fi nevoit să duplicați fiecare modificare pe care o faceți, puteți folosi și programe pentru a o „minimifica”, de exemplu. De asemenea, puteți utiliza instrumente speciale pentru a minimiza JavaScript și CSS. Instrumentele recomandate includ:

• YUI Compressor sau cssmin.js pentru fișierele CSS
• Închidere compilator pentru JavaScript

18. Încărcați JavaScript și CSS la sfârșit

Site-ul dvs. web nu este complet afișat până când toate fișierele JavaScript și CSS nu sunt încărcate. Pentru a facilita procesul de încărcare, puteți introduce JavaScript și CSS la sfârșitul codului HTML. Chiar dacă serverul este lent, dezvoltarea site-ului tău nu va fi influențată.

Poziția ideală pentru fișierele CSS este așadar în zona <head> a site-ului web. Cu toate acestea, ar trebui să încorporați JavaScript în subsolul site-ului.

O posibilă integrare a fișierelor poate apărea ca:

19. Utilizați CSS3 pentru fundaluri

Fiecare imagine care este folosită pe site-ul dvs. necesită mai multe linii de cod. Acest cod este citit linie cu linie atunci când site-ul este apelat. Dacă stocați butoane, pictograme sau fundaluri ca elemente grafice, un browser va necesita mult timp pentru a vă încărca site-ul web.

Soluția constă în generarea tuturor elementelor grafice în afară de fotografii prin CSS3. În acest fel, vei reduce codul sursă. În același timp, fișierele sunt afișate la aceeași calitate înaltă pe toate dispozitivele finale.

20. Utilizați pre-preluare și pre-rendare

Dacă utilizați tehnologia de preluare, browser-ul dvs. stochează anumite elemente ale site-ului web în cache, chiar înainte ca site-ul să fie complet încărcat. În acest fel, imaginile, graficele sau JavaScript și CSS pot fi încărcate fără a împiedica redarea site-ului.

Trebuie să ajustați codul sursă pentru a permite preluarea prealabilă a unui fișier. În acest caz, elementul dorit este prefațat cu atributul rel=”prefetch”.

Un exemplu:

<link rel="prefetch" href="//mysite.com/example-image.jpg">

Aici, exemplul este reîncărcat chiar înainte ca alt site să fie încărcat. Timpul de încărcare în noua vizualizare a site-ului este astfel scurtat.

Dacă utilizați metoda de pre-rendare, un site web complet este descărcat din browser în prealabil și este stocat temporar în cache. Conținute în acesta sunt toate fișierele care sunt necesare pentru redarea completă. Site-ul web redat în avans poate fi încărcat aproape fără întârziere atunci când este apelat. Prin urmare, timpul de încărcare este redus la mai puțin de 50 de milisecunde.

Pentru a implementa pre-rendarea, trebuie să introduceți următoarea linie în codul sursă al site-ului web care urmează să fie vizitat:

<link rel="prerender" href="//prerendering-site.com/index">

21. Reduceți 301 redirecționări

Redirecționările 301 sunt excelente pentru a evita conținutul duplicat sau pentru a redirecționa adresele URL vechi către adrese URL noi după o relansare. Cu toate acestea, fiecare redirecționare crește timpul de încărcare – nu semnificativ, dar de fiecare dată când un browser întâlnește o redirecționare, o nouă adresă URL trebuie să fie preluată, iar browserul trebuie să aștepte până când este returnată o solicitare http. Dacă mai multe redirecționări 310 se succed, timpul de încărcare poate fi mărit semnificativ.

>> Redirecționări: un ghid prietenos pentru începători <<

Pentru a evita prea multe redirecționări, ar trebui să documentați structura URL-ului sau dezvoltarea de noi URL-uri. Același lucru este valabil și pentru redirecționările 301 stabilite. Dacă în analiza site-ului dvs. găsiți mai multe redirecționări, ar trebui să ghidați prima redirecționare direct către obiectivul real al link-ului, fără o ocolire către una sau mai multe redirecționări.

22. Evita cererile rele

Dacă un client, cum ar fi un browser web, accesează site-ul dvs., este plasată o solicitare pentru fiecare resursă pentru a putea afișa fișierul. Dacă aceste resurse nu se găsesc totuși sub formă de imagini sau fișiere JavaScript, acest lucru poate duce la un lanț de reacție care irosește timpul de încărcare.

Puteți evita cu ușurință cererile greșite prin corectarea fișierelor greșite și oferind calea corectă sau redirecționând către noul fișier.

23. Folosiți AMP

Google oferă webmasterilor cu pagini mobile accelerate oportunitatea de a încărca site-uri web pentru mobil aproape fără întârziere. În acest scop, site-urile trebuie să îndeplinească anumite cerințe pentru a putea fi afișate pe dispozitivele mobile.

Multe CMS, cum ar fi WordPress, permit utilizarea AMP cu ajutorul pluginurilor. Până acum, AMP nu putea fi folosit pentru magazinele online. Cu toate acestea, acest lucru este avut în vedere de dezvoltatori.

Alte resurse:

• Pagina principală a proiectului AMP
• WordPress-AMP-Plugins

24. Încercați optimizarea automată a vitezei paginii

În acest ghid ați învățat multe măsuri pentru a îmbunătăți viteza paginii. Cu toate acestea, majoritatea acestor măsuri necesită să aveți cunoștințele tehnice și timpul necesar pentru a le implementa.

Dacă unul dintre aceste două lucruri ar trebui să fie un obstacol pentru dvs., puteți lăsa optimizarea vitezei paginilor unui serviciu automat.

Serviciul cloud pentru optimizarea automată a vitezei paginilor wao.io funcționează astfel: ca o rețea de livrare de conținut, wao.io stochează temporar site-ul web și efectuează măsurile pe care le puteți defini printr-un meniu. Pe lângă compresia inteligentă a imaginii și minimizarea codului, aceasta include și măsuri avansate, cum ar fi încărcarea leneră.

wao.io protejează, de asemenea, împotriva atacurilor de securitate și oferă valori pentru monitorizarea site-urilor web și numerele de utilizatori.

Concluzie

Un site web are multe șuruburi posibile de ajustare pe care le puteți folosi pentru a îmbunătăți timpul de încărcare a paginii.

În acest articol ați descoperit câteva posibilități. Unele metode sunt, de asemenea, foarte ușor de implementat pentru începători și începători în SEO.

Chiar dacă încercați doar câteva dintre ele, suntem siguri că vă puteți face site-ul mai rapid, vă puteți face utilizatorii mai fericiți și puteți fi răsplătit cu clasamente mai bune în căutare.