Share
Când doriți să optimizați manual performanța unui site, fără a utiliza o abordare gata, cum ar fi AMP, care sunt pașii cheie pe care trebuie să-i luați?
În acest videoclip din cursul Optimizați site-ul dvs. fără AMP, veți descoperi o listă de verificare simplă pe care o puteți utiliza pentru a vă asigura că site-ul dvs. se încarcă la fel de repede ca și în cazul AMP, dacă nu mai rapid.
Iată lista de verificare de bază cu care vom lucra:
După cum puteți vedea, această listă de verificare este o parte din sarcinile pe care trebuie să le finalizăm, sunt principii pe care trebuie să le urmăm și sunt și obiective parțiale pe care vrem să le realizăm. Să ne uităm la fiecare dintre ele în detaliu.
Primul lucru pe lista noastră este un obiectiv, și anume, vrem ca site-ul nostru să se încarce cât mai repede sau mai repede decât versiunea AMP a aceluiași site. Este o idee bună să continuați să verificați timpul de încărcare pe măsură ce mergeți împreună cu procesul dvs. de dezvoltare, așa că vom face ceea ce vom face în timp ce lucrăm prin tot.
Acum, să intrăm în lucrurile tehnice pe care trebuie să le facem. Prima considerație este că dorim să obținem orice fonturi web pe care le vom folosi încărcate cât mai repede posibil.
Fonturile web sunt adesea fișiere relativ mari și nu puteți afișa corect conținutul înainte de încărcarea acestor fonturi web. Deci, vom asigura că vom obține acele fonturi web încărcate foarte devreme în imagine, probabil ca primul lucru care începe să se încarce.
Următorul lucru pe care îl vom face este să ne asigurăm că CSS este foarte eficient și foarte mic.
Uneori puteți fi tentați să faceți o scurtătură și să includeți o bibliotecă masivă de CSS în site-urile dvs. pentru a ajuta la accelerarea procesului de dezvoltare, chiar dacă majoritatea CSS nu este necesară.
Aruncarea într-un fișier CSS masiv ar putea ajuta la accelerarea dezvoltării dvs., dar va încetini probabil site-ul dvs. și va diminua performanța site-urilor dvs. în motoarele de căutare. Spun asta deoarece viteza de încărcare este acum un factor de clasificare. Deci, este important ca CSS dvs. să fie cât mai mic și mai eficient posibil.
De asemenea, veți lua acest CSS și îl încărcați în linie în secțiunea capului site-ului. Aceasta este o tehnică utilizată de AMP și este o tehnică excelentă de optimizare. Deci, acesta este unul pe care cu siguranță ne vom ocupa de propriul nostru proces de optimizare.
Chiar dacă CSS va fi încorporat în secțiunea cap, vom dori totuși să lucrăm la CSS în fișiere separate. Încercarea de a scrie CSS direct în secțiunea capului unui fișier HTML nu este foarte practică. Așa că vom avea totul pregătit pentru ca noi să putem lucra la fișierele noastre CSS extern și apoi să le introducem în fișierele HTML mai târziu, pentru a obține cele mai bune rezultate din ambele lumi.
Următorul lucru pe care o vom face este să ne asigurăm că, în măsura posibilului, orice JavaScript pe care îl folosim este combinat și minimizat.
Unul dintre dezavantajele de a lucra cu AMP este că aveți mai multe fișiere JavaScript pe care trebuie să le aduceți și fiecare dintre ele trebuie să vină separat. Dar, în cea mai mare măsură posibilă, vom lua JavaScript și îl vom combina într-un singur fișier, astfel încât să avem numărul minim absolut de cereri de browser.
Pentru a face ambele lucruri să se întâmple - de lucru pe CSS extern și combinarea și minimizarea JavaScript - vom seta un proces de construire care va face ca ambele lucruri sa se intample automat.
Vom folosi Gulp pentru a face asta. Asta înseamnă că va trebui să aveți Nod instalat pe sistemul dvs. și va trebui să faceți o scurtă încercare în utilizarea terminalului. Dar, în timpul cursului, te voi trece prin ce să fac, deci chiar dacă nu ai lucrat cu terminalul, ar trebui să fii bine.
Următorul lucru este că vom folosi JavaScript asincron (asincron). Ce înseamnă acest lucru este că modul în care vom încărca JavaScript-ul nostru nu va împiedica nimic altceva de pe pagină să se încarce în același timp.
Un alt lucru pe care îl vom face cu JavaScript este că o vom amâna. Asta înseamnă că vom deplasa dreptul de JavaScript spre sfârșitul procesului de redare. Ne vom asigura că totul din site-ul nostru este complet încărcat înainte de a face ceva cu JavaScript, la toate.
De asemenea, ne vom asigura că fiecare bit de JavaScript pe care îl folosim este JavaScript de la vanilla și facem acest lucru pentru a ne asigura că nu avem dependențe. Dacă folosim, să zicem, o casetă lightbox care depinde de jQuery, acum trebuie să încărcați jQuery în site-ul nostru, și asta înseamnă mai multă dimensiune a fișierului și mai multă prelucrare pentru ca browserul să se ocupe.
Adesea nu este necesar să utilizați mai multe biblioteci JavaScript. Puteți obține adesea funcționalitatea pe care o doriți la fel de bine cu JavaScript de vanilie.
De asemenea, vom prefera JavaScript simplu. Deci, vom încerca să păstrăm mărimea fișierului JavaScript până la un minim absolut. Nu vrem foarte multe clopote și fluiere; vrem să păstrăm totul cât mai strâns și mai eficient posibil.
Și ultimul punct de pe JavaScript este că vrem să ne asigurăm că, în măsura în care putem, vom răspunde persoanelor care au JavaScript oprit.
Cu versiunea AMP a site-ului pe care o vom crea, dacă dezactivați JavaScript, puteți vedea că nu avem conținut mult de analizat.
Există un pic mai mult pe care am putea să-l facem cu acest site pentru a deveni un pic mai prietenos. Dar, în cea mai mare parte, AMP depinde în totalitate de JavaScript pentru a vă oferi orice tip de conținut la toate.
Cu versiunea non-AMP, încă avem imaginea de fundal care arată foarte bine și, de asemenea, de asemenea introducem câteva modificări pentru pictogramele de fonturi aici, de asemenea, deoarece adesea persoanele care blochează fonturile JavaScript blocate.
Avem un mesaj care să permită oamenilor să știe de ce nu poate apărea videoclipul YouTube și același lucru de dedesubt în cazul în care CodePen va fi.
Galeria noastră încă apare la fel, și apoi în jos, avem doar versiunea text a tweeturilor noastre care arată ca o rezervă în cazul în care nu există niciun JavaScript.
De asemenea, ne vom asigura că folosim încărcarea leneșă atât pe imagini, cât și pe iframe. Dacă aveți un site care este destul de lung, persoana se va uita în mod obișnuit la ceea ce se află în partea de sus a site-ului respectiv mai întâi și apoi va derula în jos și va arunca o privire asupra restului conținutului.
Dar nu doriți să le faceți să aștepte ca restul conținutului să se încarce înainte ca ei să poată începe să privească ce se află în partea de sus a conținutului. Deci, cu încărcarea leneșă, încărcați doar ceea ce este la început, apoi încărcați treptat restul conținutului pe măsură ce persoana se derulează.
În cele din urmă, vom asigura, de asemenea, că vom împiedica reluarea. Ceea ce veți vedea adesea, mai ales pe telefonul mobil, este faptul că încărcarea elementelor mai lentă, cum ar fi imaginile, de exemplu, restul aspectului paginii trebuie să se regleze în jurul imaginii nou încărcate.
Acest lucru este rău pentru câteva motive:
În cursul complet, Optimizați-vă site-ul fără AMP, veți pune această listă de verificare în practică. Veți învăța exact cum să luați un site bazat pe AMP și să îl convertiți pentru a utiliza echivalente non-AMP. Cu alte cuvinte, veți învăța cum să faceți ca site-urile dvs. să fie difuzate rapid, cu tehnici de optimizare pe care le decideți pentru dvs..
Puteți lua acest curs imediat cu un abonament la Envato Elements. Pentru o singură taxă lunară redusă, veți avea acces nu numai la acest curs, ci și la biblioteca noastră în creștere de peste 1.000 de cursuri video și cărți electronice de vârf din industria Envato Tuts+.
În plus, beneficiați de descărcări nelimitate din imensa bibliotecă Envato Elements cu 400.000 de active creative. Creează cu fonturi, fotografii, grafică și șabloane unice și oferă proiecte mai bune mai rapid.
Accentsconagua