Probabil că citiți această postare de blog pe telefonul dvs.

Site-ul dvs. mobil este cheia modului în care vă conectați cu publicul dvs. Dar ce se întâmplă dacă site-ul tău este lent când este accesat de pe un mobil? De unde știi dacă site-ul tău este lent, în special pe mobil? Acest lucru creează întrebări suplimentare despre optimizarea site-urilor mobile...

De ce ar trebui să vă pese de optimizarea pentru utilizatorii de telefonie mobilă? Care sunt modalitățile de a vă accelera site-ul de pe mobil?

Google spune că dacă site-ul dvs. durează mai mult de cinci secunde pentru a se încărca, 90% dintre vizitatorii dvs. pot părăsi site-ul imediat. Și dacă ați investit mult efort pentru a genera trafic către site-ul dvs., este păcat că vizitatorii nici măcar nu își vor face timp să interacționeze cu conținutul dvs. Sunt bani la scurgere!

Cum se testează viteza paginii mobile

Primul pas înainte de a îmbunătăți viteza site-ului dvs. mobil este să măsurați performanța actuală. Trebuie să evaluați starea de sănătate a site-ului dvs. web și viteza generală experimentată de vizitatorii de pe mobil.

Pentru a efectua un astfel de audit, vă recomandăm să utilizați tehnologia Lighthouse. Lighthouse oferă informații simple despre performanța site-ului dvs. atât pentru desktop, cât și pentru mobil. Merită menționat faptul că valorile au praguri diferite între mobil și desktop:

Să cercetăm instrumentele disponibile pe piață pentru a măsura performanța pe mobil.

• Google PageSpeed ​​Insight

PageSpeed ​​Insights este un instrument Google SEO care poate măsura și analiza timpul de încărcare a oricărei adrese URL.

Pentru a obține un scor bun PageSpeed ​​pentru mobil, asigurați-vă că indicatorii dvs. sunt în următoarele praguri:

Instrumentul pentru dezvoltatori Chrome

De asemenea, puteți genera raportul de performanță mobil folosind Chrome Dev Tool direct din browserul Chrome. Urmați pașii de mai jos pentru a lansa raportul mobil:

1. Accesați site-ul dvs. web
2. Deschideți „instrumentele pentru dezvoltatori” din meniul de sus
3. Selectați fila „Farul”.
4. Bifați caseta „Mobil” din secțiunea „Dispozitiv”.
5. Faceți clic pe butonul „Generează raport”.

• GTmetrix

GTmetrix este un instrument gratuit pentru a testa performanța paginii dvs. pe desktop. Cu toate acestea, aveți nevoie de un cont PRO pentru a verifica performanța pe mobil. Produs de Lighthouse, generează scoruri pentru paginile dvs. și oferă recomandări acționabile.

Sunt disponibile multe dispozitive. Poate fi util să deveniți PRO pentru a vă verifica site-ul pe câteva dispozitive mobile diferite.

• WebPageTest

Webpagetest este un instrument gratuit care vă poate ajuta să identificați paginile cu încărcare lentă de pe site-ul dvs. WordPress și să le reglați cât mai rapid posibil.

WebPageTest vă permite să vă testați site-ul de pe mai multe dispozitive mobile:

• Farul Metric

Este un instrument foarte ușor de utilizat pentru a vă testa site-ul WordPress pe mobil și în mai multe locații. Acest lucru este foarte important dacă doriți să aflați cum merge site-ul dvs. mobil în SUA și Australia!

Tot ce trebuie să faceți este să selectați o regiune și să rulați raportul în consecință.

Dacă observați că o regiune este mai lentă decât alta, poate doriți să încercați RocketCDN . Un CDN îmbunătățește timpii de încărcare pentru persoanele care sunt departe de serverele dvs. web.

De ce site-ul dvs. WordPress este lent pe mobil? (Motive comune)

1. Mobile este diferit de desktop

Diferența # 1: procesor smartphone vs procesor desktop

Procesoarele mobile sunt, în general, proiectate pentru eficiență în primul rând, iar performanța vine pe al doilea. Telefoanele mobile au o arhitectură CPU mai slabă decât desktopurile. Înseamnă că sunt mai puțin puternice în ceea ce privește viteza de procesare.

Diferența #2: viteza rețelei (latența rețelei)

Lățimea de bandă a unei rețele se referă la cât de repede pot fi transferate informațiile dintr-un punct în altul. Această viteză este de obicei măsurată în megabiți (Mbps).

Un număr mare de Mbps înseamnă că mai mult trafic poate circula prin conexiune fără întrerupere. Latența rețelei este timpul necesar pentru ca datele să fie trimise în rețea. De obicei, rețelele mobile au o latență de rețea mai importantă decât desktopurile.

2. Nu difuzați imagini optimizate pentru mobil

Imaginile sunt adesea vinovate pentru încetinirea site-ului dvs. WordPress. Acestea trebuie optimizate special pentru dispozitivele mobile . Pentru a face conținutul lizibil pe ecrane mici, imaginile trebuie să fie reduse proporțional.

3. Nu ați activat memoria cache mobilă

Site-urile web sunt adesea pline de date care trebuie încărcate cu imagini și videoclipuri. Și uneori, acest lucru poate dura ceva timp! Memorarea în cache va face automat disponibile aceste elemente, astfel încât nu trebuie să așteptați când vedeți pagina din nou în viitor, economisind timp pentru dvs. pe conexiuni mai lente sau pe dispozitive mobile.

4. Folosiți glisoare, preîncărcătoare sau animații

O instabilitate a aspectului sau a designului poate afecta negativ utilizatorii de telefonie mobilă, mai ales dacă nu se așteaptă la aceasta. Prea multe glisoare și animații pot încetini paginile și pot afecta SEO și ratele de conversie. Google va penaliza site-ul dvs. cu un scor slab CLS ( Cumulative Layout Shift ) în cazul unei schimbări bruște a aspectului. Acest Core Web Vital va afecta scorul final al experienței utilizatorului și va afecta vizibilitatea și traficul SEO.

5. Ai instalat prea multe plugin-uri

Instalarea de noi pluginuri poate afecta viteza site-ului dvs. mobil și prea multe dintre ele pot duce, de asemenea, la breșe de securitate și la performanță scăzută. Pluginurile pot încetini site-ul dvs. prin efectuarea de solicitări HTTP suplimentare și adăugând interogări DB. Unele pluginuri necesită stil personalizat sau scripturi, ceea ce duce la încărcarea fișierelor JS suplimentare pe pagină și a fișierelor CSS.

6. Alte motive pentru care mobilul dvs. poate fi lent

Aspectele sunt elementul cheie al fiecărui site web: browserul își dă seama de dimensiunea și locația elementelor de pe pagină. Fără ele, nu veți avea cum să vă organizați conținutul sau să creați machete atractive pentru utilizatori. Dacă aveți o mulțime de elemente de încărcat și JS grele, va dura ceva timp pentru ca browserul să descopere locațiile și dimensiunile.

Un alt vinovat de performanță scăzută este dependența ta de scripturi terțe, cum ar fi trackere, sesiuni pentru vizitatori, servicii externe - cum ar fi feedul Instagram.

Recunoașteți site-ul dvs. mobil ca una dintre aceste probleme? E bine! Rămâneți cu noi și să vedem cum să optimizați viteza site-ului dvs. web atunci când este accesat de pe un mobil.

Cum să vă optimizați site-ul mobil pentru viteză

Am enumerat toate tehnicile pentru a vă îmbunătăți scorul mobil pe Google PageSpeed ​​Insights. Să cercetăm procesul de optimizare a performanței cu sfaturi super-ușoare de aplicat site-ului dvs. WordPress mobil.

1. Utilizați o temă WordPress receptivă

O temă WordPress receptivă va face site-ul dvs. să arate la fel de bine pe un telefon mobil sau pe tabletă, indiferent de tipul de dispozitiv prin care este vizualizat.

Cum să știi dacă tema sau generatorul de pagini este responsive?

• Verificați personalizarea sau opțiunile temei dvs. De exemplu, tema Astra oferă o vizualizare mobilă atunci când construiți un antet personalizat:

• Începeți să vă construiți pagina și să vedeți opțiunile oferite de generatorul de pagini. Creatorii de pagini Divi sau Elementor au acest tip de secțiune receptivă.

2. Activați memoria cache mobilă

Memorarea în cache mobilă este o tehnică comună pentru a reduce încărcarea unei aplicații și a serverelor acesteia. Pentru ca aceste aplicații și jocuri să funcționeze fără probleme la viteze mari, trebuie să existe o formă de stocare în cache – denumită „date locale stocate” – astfel încât să nu aibă nevoie de solicitări constante de descărcare. Scopul este de a reduce utilizarea lățimii de bandă, decalajul perceput de rețea și chiar consumul de baterie.

Pluginul cache WP Rocket vă permite să implementați un cache mobil cu un singur clic (este recomandat dacă site-ul dvs. este responsive).

Acesta creează un fișier cache dedicat pentru dispozitivele mobile pentru fiecare document care este stocat în cache.

Aruncă o privire la lista noastră, adunând toate cele mai bune pluginuri cache WordPress .

3. Optimizează imagini pentru mobil

Optimizarea imaginii pentru mobil este procesul de creare și livrare a imaginilor de înaltă calitate într-un format care va crește implicarea utilizatorilor pe telefonul lor.

Vă recomandăm să urmați următoarele tehnici pentru a vă asigura că imaginile sunt bine optimizate pe mobil:

• Redimensionați imaginile pentru a economisi lățimea de bandă : 640 x 320 pixeli sunt de obicei un standard bun de urmat. De asemenea, puteți păstra „raportul de aspect 4:3” ca regulă generală pentru imaginile dvs. de pe mobil.

Comprimați imaginile pentru a face fișierele mai mici : găsiți echilibrul potrivit între calitatea și dimensiunea imaginii. Calitatea nu este compromisă în exemplul nostru de mai jos, dar dimensiunea fișierului meu a trecut de la 517 KB la 70,3 KB!

Alegeți formatul de fișier corect : WebP este cel mai bun format de imagine pe care îl puteți utiliza pe mobil (și pe desktop). Oferă o compresie superioară fără pierderi și cu pierderi pentru imaginile de pe web. Graficul de mai jos arată dimensiunea fișierului după comprimare.

Ce putem concluziona:

• WebP oferă fișiere cu 25% mai mici decât PNG și JPG - cu aceeași calitate
• WebP se încarcă mai repede (din cauza dimensiunii fișierului) decât imaginile PNG sau JPG.

Utilizați Imagify pentru a vă optimiza imaginile pe mobil. Principalele caracteristici includ toate cele mai bune practici pe care tocmai le-am enumerat:

• Redimensionați și comprimați imaginile mobile în vrac sau una câte una, fără a pierde calitatea
• Convertiți automat toate fișierele în WebP

Ce zici de a lua Imagify pentru un test drive ? Este gratuit pentru aproximativ 200 de imagini pe lună.

Avem, de asemenea, o listă completă cu cele mai bune plugin-uri pe care le puteți folosi pentru a vă optimiza imaginile. Simțiți-vă liber să verificați.

4. Implementați Lazy Loading pe imaginile și videoclipurile dvs

Ultima cheie a optimizării imaginii este să vă încărcați leneș imaginile și videoclipurile pe mobil. Scriptul de încărcare leneșă întârzie încărcarea unei imagini care nu este încă vizualizată de vizitatori.

Utilizați pluginul gratuit Lazy Load by WP Rocket pentru a implementa încărcare leneșă pe imaginile și videoclipurile dvs.
Notă importantă : dacă sunteți deja utilizator WP Rocket, nu aveți nevoie de acest plugin. Funcția de încărcare leneșă este deja inclusă.

Avem, de asemenea, o listă completă cu cele mai bune plugin-uri pe care le puteți folosi pentru a implementa încărcarea leneră .

5. Optimizați livrarea imaginilor cu un CDN

Optimizarea livrării imaginilor este un pas cheie în îmbunătățirea vitezei paginii mobile. Este posibil să aveți nevoie de mai multe servere pentru a crește viteza datelor redate oriunde în lume. Este exact ceea ce face un CDN.

Utilizați RocketCDN pentru a optimiza livrarea imaginilor dvs. pe mobil.

6. Îmbunătățiți timpul până la primul octet

Ideea este să afișați ceva cât mai curând posibil vizitatorilor de pe mobil, astfel încât aceștia să nu vă perceapă site-ul ca fiind lent. Totul este să faci o primă impresie bună.

Trebuie să aveți un furnizor de găzduire rapid care să accepte compresia Gzip, dacă este posibil, și un plugin de cache pentru a reduce timpul de procesare a serverului.

Un plugin precum WP Rocket vă poate ajuta să vă curățați baza de date, să activați compresia Gzip, să vă păstrați paginile în cache și multe altele.

Utilizați WP Rocket pentru a reduce TTFB .

7. Eliminați resursele care blochează randarea (JS și CSS)

Când PSI vă spune să eliminați resursele care blochează randarea, înseamnă că ar trebui să evitați încărcarea resurselor inutile în partea de sus a codului site-ului dvs. Dacă aveți o mulțime de JS și CSS inutile acolo, va dura mai mult ca browserele să redea partea vizibilă a site-ului dvs. mobil.

Soluția este de a furniza JS și CSS critic inline și de a amâna toate JS și stilurile necritice. De asemenea, puteți elimina codul neutilizat pentru a economisi ceva timp suplimentar de încărcare. Cu alte cuvinte, trebuie să prioritizați mai întâi ceea ce browserul va încărca.

WP Rocket vă poate ajuta să încărcați JS amânat și să eliminați CSS neutilizat:

De asemenea, puteți întârzia execuția JS, care este adesea unul dintre principalii vinovați pentru un site mobil lent:

Dacă nu aveți chef să utilizați un plugin WordPress, puteți utiliza atributele defer și async și puteți aplica singur etichetele.

8. Reduceți greutatea paginii

O pagină mai ușoară se va încărca mai rapid pe mobil. O pagină grea va fi, în general, cauzată de videoclipuri, imagini, scripturi, stiluri și fonturi. Cea mai bună modalitate de a reduce greutatea paginii este să vă optimizați imaginile, să implementați compresia textului (GZIP) și să combinați/minimizați codul.

9. Scăpați de orice ar putea provoca telefoanele mobile (când este posibil)

Evitați să utilizați glisoare , animații, preîncărcătoare sau ferestre pop-up pentru vizitatorii dvs. de pe mobil. Dacă doriți să se încarce toate aceste elemente, veți ajunge la o dimensiune mai mare a paginii, timpul de încărcare și un număr mai mare de solicitări HTTP. Păstrați-o simplă și optați pentru imagini statice, încercând să stocați în cache datele local.

Chiar și experiența paginii Google se bazează pe stabilitatea vizuală, compatibilitatea cu dispozitivele mobile și interstițiale intruzive. Dacă doriți ca clasarea dvs. să fie bună, nu utilizați elemente grele inutile, cum ar fi machete, proprietăți și JS pe mobil.

10. Livrați cache-ul pentru întreaga pagină prin CDN

Pe lângă stocarea în cache, puteți utiliza un serviciu de rețea de livrare de conținut, la fel ca serviciul Cloudflare APO. După cum am explicat mai devreme, un CDN înseamnă că un vizitator nu este niciodată prea departe de serverele tale, indiferent unde se află în lume. Imaginează-ți că pagina ta durează 1 secundă pentru a se încărca la Paris, 2 secunde în New York și 4 secunde în Sydney. Dacă utilizați un CDN, pagina ar trebui să se încarce în mod egal, indiferent unde se află utilizatorul mobil.

11. Gestionați și afișați corect anunțurile

Încercați să nu afișați niciodată reclame deasupra pliului și încărcați-le leneș până când ajung în fereastra de vizualizare. Cu alte cuvinte, înseamnă difuzarea reclamelor un pic mai târziu și numai atunci când este necesar.

De asemenea, ar trebui să creați reclame adaptabile pentru a le afișa bine pe mobil cu un CTA receptiv, astfel încât utilizatorii să aibă chef de interacțiune.

Utilizați un plugin precum Advanced Ads Pro pentru a controla când și unde să vă afișați anunțurile pe mobil.

Este timpul să aplici toate tehnicile!

Încheierea

Îmbunătățirea vitezei unui site mobil necesită prioritizare. Începeți prin a afla care sunt sarcinile cele mai importante și comune pentru clienții dvs. de pe mobil. Construind scenarii, puteți vedea ce conținut și pagini sunt esențiale pentru optimizare mai întâi.

Puteți urma tehnicile noastre pentru a prioritiza optimizările performanței web pe care trebuie să le inițiați mai întâi.

În orice caz, WP Rocket vă poate ajuta să implementați 80% dintre aceste bune practici în câteva clicuri . Încercați și vedeți cum se schimbă scorul dvs. mobil pe Google PageSpeed ​​Insight. (Dacă nu observați îmbunătățiri, avem o garanție de rambursare a banilor de 14 zile).

Acest articol a apărut inițial pe blogul WP Rocket și a fost publicat aici cu permisiunea.

Autor: Marine Larmier