Cum să optimizați timpul de încărcare a paginii și să vă îmbunătățiți SEO?

Trăim într-o lume nerăbdătoare de nerăbdare. Furnizarea rapidă a conținutului de calitate a fost o realizare de invidiat acum câțiva ani. Astăzi, este o cerință rudimentară pentru orice afacere.

Cu cât îi faceți pe oameni să aștepte mai mult pentru a vă accesa site-ul web, cu atât este mai mare probabilitatea ca aceștia să iasă. Un site web lent este o problemă serioasă care necesită atenție imediată.

De ce?

Să presupunem că aveți o rată de conversie de 3%. Primești trei perspective pentru fiecare 100 de clicuri. Acum, ce se întâmplă dacă toate trei vor sări deoarece pagina ta de destinație se încarcă în anii dinozaur? Imaginează-ți impactul asupra profitului tău.

În această postare, vă vom arăta cum să evitați acest scenariu. Există 5 pași pentru a optimiza timpul de încărcare a paginii.

Pasul unu: Găsiți viteza actuală de încărcare a paginii.

Google PageSpeed ​​Insights și GTMetrix sunt instrumente utile pentru a calcula viteza paginii. Ambele enumera factorii care împiedică viteza. Cu toate acestea, GTMetrix vă spune câte secunde este nevoie pentru ca pagina dvs. să se încarce.

Conectați adresa URL a domeniului dvs. în GTMetrix și lăsați instrumentul să își execute magia.

În câteva secunde, va popula numerele și îți va atribui o notă.

De asemenea, va mapa cât timp a durat fiecare element al paginii pentru a se încărca. De exemplu, conform imaginii de mai sus, a durat 5,5 secunde pentru ca FCP, sau First Colorful Paint, să se încarce. Timpul total de încărcare a paginii este de 7,3 secunde!

Instrumentul stabilește, de asemenea, o listă de sugestii pentru a crește viteza de încărcare a paginii...

...si inca cateva sfaturi:

Secțiunea viitoare detaliază cum să obțineți un scor de viteză mai rapid pe GTMetrix.

Pasul doi: Optimizați-vă site-ul web pentru a crește viteza de încărcare a paginii.

Sfaturi pentru optimizarea imaginii SEO

Cum se reduce dimensiunea imaginii?

Fiecare site web este un fișier care se încarcă de pe servere la cerere. Vrei ca dimensiunea fișierului să fie minimă pentru a promova încărcarea rapidă.

Imaginile sunt de obicei uriașe ca dimensiune! Au nevoie de eoni pentru a se încărca.

Dar adaugă o valoare extraordinară dacă sunt folosite cu înțelepciune. De exemplu, imaginile GTMetrix m-au ajutat să-mi exprim mai bine punctul de vedere, oferindu-vă o referință.

Nu ar trebui să eliminăm imaginile, dar putem optimiza utilizarea lor. Acestea sunt 4 metode pentru a reduce dimensiunea imaginii.

• Compresia imaginii
• Decuparea imaginilor
• Redimensionarea imaginilor

Compresia imaginii

Faceți imaginile pe care le utilizați mai mici ca dimensiune. Procesul de reducere a dimensiunii fișierului se numește compresie de imagine. Imaginile sunt un teanc de straturi; fiecare strat adaugă o aromă. Comprimarea reduce dimensiunea paginii prin eliminarea straturilor care accentuează imaginea.

Acest lucru afectează calitatea imaginii, dar compensează mai mult decât câștigând puncte SEO.

Începeți prin a salva imaginile în format JPG, deoarece ocupă mai puțin spațiu pe disc. Unele bloguri recomandă JPEG2000 sau WEBP, dar tema mea a avut probleme de redare cu acel format. Adesea, JPG funcționează bine.

De aici, există două moduri de a obține mai multă compresie.

1. Comprimați imaginile online

Mergeți la compressjpeg și încărcați imaginea JPG. Instrumentul vă comprimă imaginea și vă spune cât de mult a fost comprimată. Descărcați imaginea comprimată și utilizați-o pentru pagina dvs. web.

2. Utilizați pluginuri pentru a comprima imaginile

Nu sunt un mare fan al folosirii pluginurilor. Sigur, ele ușurează munca dacă nu poți codifica. Dar ele împiedică codul existent al site-ului dvs. web. Cu toate acestea, este o opțiune care merită luată în considerare.

Există o mulțime de pluginuri care vă pot ajuta să comprimați imaginile; ai rasfatata de alegere. Oricum, verificați bifa „Compatibil cu versiunea dvs. de WordPress” înainte de a utiliza orice plugin.

Alegeți între compresie cu pierderi/fără pierderi

Compresia poate fi cu pierderi/fără pierderi. Ține cont de gradul de comprimare a imaginilor.

Folosesc compresia fără pierderi pentru imagini grele de text. Textul imaginii cu pierderi tinde să fie prea neclar pentru a fi citit. Folosesc compresie fără pierderi pentru orice altceva.

Experimentați care dintre ele funcționează cel mai bine pentru dvs.

Decupați imagini

Pare o metodă evidentă de a reduce dimensiunea imaginii - reduceți literalmente dimensiunea imaginii - dar mulți tind să o ignore.

Luați notă de dimensiunile imaginii care funcționează pentru blogul dvs. Dimensiunile imaginii principale și ale imaginii prezentate trebuie să fie consecvente. Cu toate acestea, imaginile de sprijin pot fi decupate pentru a afișa ceea ce este necesar.

De exemplu, niciuna dintre capturile de ecran din această postare nu are imagini redundante. Fără bare de adrese sau subsoluri. Fiecare pixel adaugă la timpul de încărcare a paginii. Eliminați-le pe cele inutile.

Redimensionați imaginile pe MS Paint

Această metodă care sună evident se ascunde la vedere.

1. Deschideți imaginea în MS Paint. Veți vedea opțiunea de redimensionare.
2. Setați procentul de redimensionare și acum aveți o versiune mult mai mică ca dimensiuni și dimensiune. Salvează încărcături în ceea ce privește dimensiunea fișierului!

Imagini de încărcare lenenă

Toate datele site-ului dvs. sunt stocate în centre de date și preluate atunci când este necesar; imaginile nu sunt diferite. Tehnica încărcării leneșe întârzie procesul de recuperare până în momentul în care vizitatorul defilează la vizual.

Abia atunci sistemul adună resursele necesare pentru a servi imaginea menționată. Această tehnică reduce sarcina inițială a sistemului prin plasarea elementelor în coadă pentru încărcare numai atunci când este necesar.

Acest lucru nu numai că economisește timpul inițial de încărcare, dar și lățimea de bandă.

Încercați-l pe această pagină: derulați în jos și vedeți cum se încarcă o imagine când ajungeți la ea, nu înainte.

Cum să implementezi Lazy Load pe site-ul tău?

Pluginul a3 Lazy Load vă poate ajuta să implementați rapid lazy load.

Alegeți fontul potrivit.

Fontul intră adesea în domeniul designului; este rar văzut ca un factor de performanță.

Dar contribuie la dimensiunea paginii. Raportul de la GTMetrix discutat mai devreme arată că Fontul a ocupat cea mai mare dimensiune după imagini.

Pentru o viteză mare de încărcare, trebuie să alegeți fonturi care se încarcă rapid.

Folosesc Open Sans pentru site-ul meu, deoarece nu trebuie să mă fac elegant pentru categoria mea de afaceri. Dacă dețineți o afacere creativă, poate doriți să sacrificați puțin viteza paginii pentru aspectul de frumusețe. De asemenea, dacă doriți un font elegant care să contribuie la identitatea mărcii dvs., mergeți la el. Marca >> Viteza paginii.

Tastează codul

JavaScript(JS) și Foile de stil în cascadă (CSS) sunt fragmente de cod care acceptă fiecare pagină web pe care o vedeți. Ambele influențează viteza de încărcare a paginii în două moduri – se adaugă la dimensiunea paginii și fac un set de solicitări către server care necesită timp pentru a fi procesate.

Dar ele sunt necesare pentru a adăuga un pic de stil și accent site-ului dvs. De exemplu, observați căsuța mea de abonament de mai jos - dă din cap când ați derulat în jos până la ea. Dacă ați ratat efectul, reîncărcați această pagină și încercați din nou.

Efectul atrage atenția, dar, dacă este folosit în exces, devin distrageri.

Există un compromis între stil și viteza paginii. Nu eliminați stilul pentru viteza paginii. Cu toate acestea, optimizarea codului va crește viteza de încărcare a paginii.

Și așa am făcut:

Minimizează JS/CSS

Minificarea elimină bucățile inutile de cod, reducând dimensiunea fișierului. Acest lucru permite browserelor să descarce și să execute codul mai rapid, economisind lățimea de bandă.

Valorificați stocarea în cache

Un cache este unitatea de stocare care păstrează copii ale site-ului dvs. web, evitând necesitatea încărcării de fiecare dată când este solicitat. Cu memorarea în cache, după prima încărcare, site-ul dvs. se va încărca mai repede ori de câte ori este solicitat din nou.

Folosesc pluginul LiteSpeed ​​Cache pentru a reduce codul și memoria cache.

Pasul trei: Luați în considerare schimbarea furnizorului de găzduire web.

Ar rula o mașină sport aerodinamică cu kerosen? Nu.

În mod similar, un site web bine optimizat va avea o viteză lentă de încărcare a paginii dacă serverul răspunde doar până în următoarea eră glaciară.

Am ezitat să fac schimbarea în principal din cauza incertitudinii. Dar am făcut câteva cercetări și am ajuns să aleg Hostinger și nu regret.

Multe alte gazde web fac treaba pentru tine. Decideți ce funcționează pentru dvs. în funcție de buget și locație.

Iată un ghid complet pentru schimbarea WebHost.

Pasul patru: utilizați o rețea de distribuție a conținutului (CDN.)

Distanța geografică are un impact mare asupra vitezei paginii. Cu cât un vizitator este mai departe de locul în care este găzduit site-ul dvs., cu atât timpul de încărcare a paginii este mai lung.

CDN este o colecție de servere globale situate în mai multe centre de date din întreaga lume. Acesta permite unui vizitator să se conecteze la un server mai apropiat din punct de vedere geografic în loc de serverul de acasă. Face acest lucru prin folosirea serverelor la punctele de schimb dintre diferite rețele.

Distanța redusă promovează o difuzare mai rapidă a paginii dvs. web.

Folosesc Cloudflare CDN și și-a îndeplinit scopul în mare măsură.

Pasul cinci (opțional): utilizați Accelerated Mobile Pages (AMP) pentru a crește viteza de încărcare a paginii mobile

Amintiți-vă că am vorbit despre minimizarea codului. HTML este o formă de cod mai ușoară decât CSS/JS. Nu permite stilul, dar HTML este codul de bază de care au nevoie serverele pentru a vă încărca site-ul web.

Paginile AMP sunt forma HTML a paginii dvs. web. Acestea sunt pagini de a doua versiune care sunt utilizate predominant pentru dispozitive mobile. Sunt coduri reduse la minimum, astfel încât paginile se încarcă într-o fracțiune de secundă.

Utilizarea AMP înseamnă eliminarea stilului din pagina ta. Cu toate acestea, sunt benefice pentru paginile de știri și bloguri. Le-am folosit pentru scurt timp, dar am revenit asupra deciziei, deoarece primii trei pași au făcut suficient chiar și pentru viteza paginii mele mobile.

Am scris un ghid detaliat pentru a decide dacă doriți să implementați AMP sau nu.

Rezultate

Pașii de mai sus au făcut minuni pentru viteza de încărcare a paginii mele. Revenind la GTMetrix, aici se află site-ul meu astăzi.

Se incarca in 1,2 secunde. O creștere de aproximativ 6 ori.

Dar, dovada este în budincă. Încercați-l și spuneți-mi în comentarii cum merge.