Cum să creați cea mai rapidă pagină Divi: optimizarea conținutului Divi pentru viteză

Cu noua actualizare a performanței Divi, există o mulțime de posibilități de creștere a scorurilor de viteză a paginii. Astăzi, vă împărtășim câteva sfaturi practice și trucuri pe care ar trebui să le aveți în vedere atunci când creați o pagină Divi de la zero. Acestea sunt recomandări, nu reguli care sunt stabilite în piatră. Se va reduce întotdeauna la principalele obiective ale paginii dvs. Uneori, vă veți găsi sacrificând o anumită viteză pentru design și invers. Credem că este vorba despre găsirea unui echilibru sănătos între amândouă, dar folosind sfaturile de mai jos, vă puteți îmbunătăți cu siguranță viteza paginii Divi.

Hai să ne scufundăm!

Abonați-vă la canalul nostru Youtube

1. Optimizarea conținutului de deasupra foldului

Una dintre noile caracteristici de performanță care au fost adăugate la Divi se numește Critical CSS. Pe scurt, CSS critic din Divi detectează automat ce CSS trebuie încărcat imediat, denumit CSS de mai sus și întârzie încărcarea restului CSS al paginii. Acest lucru, de la sine, ajută deja la îmbunătățirea vitezei paginii în mod automat, fără a fi nevoie să depuneți eforturi. Dar dacă doriți să mergeți mai departe, puteți decide să optimizați și conținutul de mai sus.

Conceptul de erou cu 4 module

Poate fi tentant să împărtășiți cât mai multe informații cu vizitatorii dvs., la prima vedere, dar exact asta ar trebui să evitați într-un erou. Cu cât conținutul dvs. este mai direct, atât în ​​stil, cât și în vizualitate, cu atât mai bine. De aceea, limitarea numărului de module pe care le utilizați deasupra pliului vă va ajuta să creșteți viteza paginii Divi. De preferință, ați utiliza:

• Titlu
• Paragraf
• Buton

Cu toate acestea, în multe cazuri, veți dori să includeți și o imagine de un fel. Dacă da, încercați să evitați utilizarea imaginii ca fundal și folosiți-o ca modul. Utilizarea acestuia ca modul în interiorul unui anumit container cu o lățime maximă vă va ajuta să utilizați dimensiuni mai mici ale imaginii, ceea ce, la rândul său, vă ajută să vă accelerați site-ul. Acest lucru ne aduce la conceptul de erou cu 4 module:

• Titlu
• Paragraf
• Buton
• Imagine optimizată

Utilizați Hero pe ecran complet sau împărțiți conținutul în mai multe secțiuni pentru detecție automată precisă

Există un motiv pentru care modelele de erou pe ecran complet sunt populare. Nu numai că îți fac designul mai respirabil, dar ajută și la CSS critice. Dacă alegeți să alegeți un erou pe ecran complet, decideți că acesta este singurul lucru care apare deasupra pliantei, indiferent de dimensiunea ecranului pe care îl utilizați. Pentru a crea un erou cu ecran complet în Divi, nu uitați să atribuiți o înălțime minimă de „100vh” în setările secțiunii. Prin atribuirea unei înălțimi minime; vă asigurați că secțiunea acoperă întreaga înălțime a browserului. Puteți plasa orice în secțiune pentru a face parte din designul eroului dvs. din acel moment. Sau puteți utiliza, de asemenea, antetul integrat al ecranului Divi.

Alternativ, dacă nu doriți să urmați traseul eroului pe ecran complet, puteți decide să împărțiți ceea ce vine deasupra pliantei în mai multe secțiuni. Divi va detecta automat ceea ce apare deasupra pliului la nivelul unei secțiuni. Aceasta înseamnă că, dacă construiți o secțiune mare care apare parțial deasupra pliului și parțial sub pli, vor fi încărcate CSS ale întregii secțiuni și CSS ale elementelor din acea secțiune. Împărțirea secțiunilor în mai multe vă va ajuta să evitați ca prea multe elemente să fie tratate ca și cum ar fi deasupra pliantei.

Evitați animațiile din Hero pentru a preveni întârzierea

Este bine de evitat orice lucru deasupra pliantei care poate duce la o întârziere a timpului de încărcare. Aceasta include animații. Totuși, acest lucru nu înseamnă că ar trebui să îl evitați cu totul. Puteți folosi cu ușurință animații în josul paginii și / sau limita animațiile pe care le folosiți în interiorul eroului. Găsirea unui echilibru bun este cheia.

Modificați deasupra conținutului de pliere de pe tabletă și mobil

Ultimul lucru important de menționat cu privire la CSS critică este modificarea designului dvs. pe dimensiuni mai mici ale ecranului. Este important să vă asigurați că conținutul dvs. de sus este optimizat pentru diferite dimensiuni de ecran. Este o problemă de modificare a designului, astfel încât să puteți atinge un scor excelent de viteză a paginii, atât pe desktop, cât și pe mobil. De exemplu, puteți ascunde întreaga imagine a eroului pe mobil pentru a crește viteza paginii pe dimensiuni mai mici ale ecranului.

2. Utilizarea stilurilor inteligente

Cum funcționează stilurile inteligente

Cu noua actualizare de performanță, Divi a fost optimizat prin reducerea stilurilor duplicat. Pentru a activa stilurile inteligente, va trebui să vă scufundați în lumea presetărilor Divi. Presetările vă permit practic să partajați stiluri cu diferite elemente fără a fi necesar să atribuiți un bloc unic de stiluri fiecărui element care are stilul în același mod.

Utilizarea a 1 sau 2 presetări pentru secțiuni și rânduri

Secțiunile și rândurile sunt două tipuri de elemente care adesea par a fi uitate când vorbim despre presetări. La fel ca modulele, puteți atribui presetări secțiunilor și rândurilor. Acest lucru nu numai că vă va ajuta să limitați CSS generat, dar vă va ajuta și să păstrați consistența proiectării la nivel de pagină. Spuneți, de exemplu, că doriți să utilizați în mod consecvent umplutură de 100px sus și jos pentru fiecare secțiune, pentru a crea ritm vertical, nu există niciun motiv pentru care nu ar trebui să beneficiați de presetările Divi în acest proces. Creați o nouă presetare pentru o secțiune care utilizează aceste valori de umplere și atribuiți-o fiecărei secțiuni noi pe care o adăugați sau faceți din aceasta presetarea secțiunii implicite.

De asemenea, puteți configura o presetare de rând cu lățimea și lățimea maximă la alegere și să fie standardul. Jucați-vă cu aceste presetări și descoperiți cum vă ușurează nu numai procesul de proiectare, ci și vă ajută să îmbunătățiți scorurile de viteză ale paginii.

Utilizați presetări pentru module

Desigur, veți dori să utilizați și stiluri inteligente pentru module. În exemplul de mai jos, veți observa că aspectul general al fiecărui modul este similar. Crearea unei presetări pentru modulul Blurb vă va ajuta să mențineți fișierul CSS al paginii dvs. mic.

Anulați o presetare sau nu?

Dar nu ar trebui să creați o presetare nouă pentru fiecare modificare mică. În exemplul de mai sus, de exemplu, puteți observa că ultimele două module Blurb au o culoare de text diferită. Puteți crea o nouă presetare pentru aceasta, prin duplicarea celei vechi sau puteți decide să înlocuiți presetarea. În acest caz, este mai logic să suprascrieți doar culoarea textului (ceea ce duce la o linie suplimentară de cod CSS), spre deosebire de crearea unei noi presetări și de adăugarea mai multor linii de cod CSS.

3. Potrivirea opțiunilor de proiectare cu viteza

Limitați selecția modulelor pe care doriți să le utilizați (module dinamice)

Când selectați modulele pe care doriți să le utilizați pentru pagina pe care o construiți, este bine să rețineți că acestea vor fi încărcate dinamic. Adică, dacă nu utilizați un anumit modul, acesta nu va avea niciun efect asupra vitezei paginii. Veți dori să luați în considerare fiecare modul pe care îl adăugați și să vedeți dacă „merită”. Cu toate acestea, într-un scenariu ideal, vă veți asigura că restul conținutului dvs. Divi este suficient de optimizat, astfel încât să nu trebuie să vă sacrificați pe module.

Găsiți LCP-ul designului dvs. și optimizați-l

Un alt lucru care vă poate ajuta să vă îmbunătățiți viteza paginii este să găsiți cea mai mare pictură conținută și să o optimizați. Pe scurt, LCP-ul dvs. este cel mai mare element de pe pagina dvs. care vă ajută să determinați scorul de viteză al paginii. Puteți citi mai multe despre acest lucru aici. Asigurându-vă că LCP-ul designului dvs. este optimizat, puteți reduce drastic timpul de încărcare pe pagina dvs.

Alegerea unui stil de animație (caracteristici dinamice)

La fel cum avem module dinamice, avem și caracteristici dinamice. Aceasta înseamnă că, dacă nu utilizați deloc o anumită caracteristică pe pagina dvs., aceasta nu va fi încărcată, ceea ce duce la o viteză mai mare a paginii. Din acest motiv anume, este important să vă asigurați că alegeți un stil de animație și să rămâneți cu el. De exemplu, puteți alege să mergeți cu efecte de mișcare și să concentrați toate animațiile de pe pagina dvs. în jurul acelei funcții. Sau puteți alege setări de animație obișnuite și urmați acel traseu. Acest lucru nu numai că vă permite să creați o pagină ușoară, dar, de asemenea, permite predictibilitatea, ceea ce pe frontul experienței utilizatorului este de obicei un lucru bun.

Asocierea fonturilor: lipiți de 1 sau 2 familii de fonturi

De asemenea, vă recomandăm să rămâneți la maximum 2 familii de fonturi pentru paginile pe care le proiectați. Procedând astfel, limitați numărul de fonturi care trebuie încărcate înainte de a intra în pagină.

4. Optimizare manuală

Conținut receptiv: reduceți dimensiunile imaginilor pe mobil

Un alt lucru care vă va ajuta să sporiți scorurile de viteză a paginii mobile este utilizarea conținutului receptiv în Divi. Aceasta este probabil una dintre caracteristicile care vă pot ajuta să vă îmbunătățiți cel mai bine scorurile pe dimensiuni de ecran mai mici. Deși acest lucru necesită mult mai mult efort, cu siguranță merită. Reduceți dimensiunile / dimensiunea imaginii dvs. prin intermediul software-ului de editare a imaginilor și utilizați acele imagini mai mici de pe mobil, spre deosebire de cele pe care le afișați pe desktop. Acest lucru va reduce drastic dimensiunea fișierelor dvs. de imagine și va duce la o viteză mai mare a paginii pe mobil.

Tipuri de fișiere și compresie

Asigurați-vă că rămâneți cu JPEG cât mai mult posibil, deoarece acestea tind să aibă o dimensiune mai mică a fișierului. PNG are de obicei sens numai dacă aveți nevoie de transparență în imagine pentru ca acesta să ridice designul, dar chiar și atunci puteți încerca să găsiți o alternativă pentru ca designul să funcționeze. Evitați și tipuri de fișiere mai grele, cum ar fi GIF. În ceea ce privește videoclipul, acesta este, de obicei, o oprire, mai ales dacă doriți să fie redat în fundal. Și, desigur, asigurați-vă că comprimați fișierele pe care le utilizați, chiar înainte de a le încărca în biblioteca media WordPress.

În spatele scenelor

Toate sfaturile de mai sus vă pot ajuta să îmbunătățiți viteza paginii, dar este, totuși, important să menționați că trebuie să aveți grijă de cele mai bune practici de optimizare a site-ului web în afara Divi. Puteți găsi mai multe informații tehnice accesând acest ghid final.

Construirea de pagini rapide cu Divi - Mai ușor ca niciodată

Putem ajunge cu ușurință la concluzia că există o mare suprapunere între caracteristicile de performanță ale Divi și modul în care vă descurcați să vă construiți site-ul web. Divi are grijă de partea parțială, astfel încât să vă puteți concentra pe cele mai bune practici frontend necesare pentru a aduce totul împreună într-un site frumos și rapid. Dacă există cele mai bune practici care au funcționat bine pentru dvs., nu ezitați să le împărtășiți în secțiunea de comentarii de mai jos pentru a continua conversația!