Proiectul Google "Accelerated Mobile Pages" (AMP) a ajutat, în ultima perioadă, la influențarea site-urilor web pentru a deveni mai rapide. Cu o tehnică bună și o rețea puternică de distrugere a conținutului, Google a făcut site-uri îmbunătățite AMP mai rapid. De asemenea, AMP a lucrat indirect, încurajându-ne să analizăm optimizările și cele mai bune practici pe care AMP le conține. Chiar dacă nu sunteți pe punctul de a face site-ul dvs. AMP compatibil, este util să înțelegeți AMP ca listă todo pentru optimizarea unui site non-AMP.

Una dintre optimizările de pe această listă este o tehnică numită "încărcare leneșă", pe care am văzut-o în acțiune în ultimul nostru articol despre utilizarea AMP  personalizat element. Cu această tehnică, atunci când un vizitator ajunge mai întâi la o pagină, numai imaginile din sau în apropierea portului de vizualizare sunt încărcate. Restul este declanșat să se încarce pe măsură ce vizitatorul se îndepărtează.

Încărcarea lentă permite unui vizitator să înceapă mai devreme angajarea cu conținut, iar viteza de încărcare îmbunătățită poate îmbunătăți clasamentul motorului dvs. de căutare. Cele mai multe imagini pe care le aveți pe o pagină, îmbunătățirile de viteză mai mari pe care le veți câștiga.

În acest tutorial vom examina modul în care puteți implementa încărcarea leneșă pe site-urile non-AMP utilizând un script numit Layzr.js. Vom replica funcționalitatea AMP-urilor element cât mai aproape posibil, dar vom lucra și cu unele caracteristici specifice pentru Layzr.

Sa incepem!

1. Configurare de bază

Ca parte a articolului "Proiectul AMP: va face site-urile dvs. mai rapide?" Am creat un layout de bază care conține cinci imagini. Pentru a vă permite să desenați comparații între utilizarea AMP și desfășurarea încărcării leneși, noi vom recrea aceleași cinci aspecte ale imaginii. Vă voi arăta cum să executați teste de viteză de încărcare mai târziu în acest tutorial.

În fișierele sursă atașate acestui tutorial veți găsi versiunea AMP a aspectului și versiunea completă a ceea ce veți face aici. Ambele sunt incluse pentru a vă ajuta să decideți ce abordare vă convine cel mai bine.

Pe măsură ce trecem prin tot ceea ce vă recomand să testați munca dvs. utilizând Instrumentele de dezvoltator Chrome (F12) cu Reţea fila deschisă, Dezactivați memoria cache verificat și setat la 3G regulat. Aceasta simulează o conexiune mobilă medie, vă arată o diagramă a fiecărei încărcări a imaginii în timp real și vă va ajuta să obțineți o imagine clară asupra modului în care funcționează încărcătura leneșă.

Când reîmprospătați pagina pentru testare, țineți apăsată tasta reincarca , care va face să apară o meniu vertical cu opțiuni diferite. Alege Empty Cache și Hard Reload pentru a simula pe deplin un vizitator care sosește la site-ul dvs. prima dată.

Creați Shell HTML

Să începem prin obținerea principiilor de bază. Mai întâi, faceți un dosar pentru a găzdui proiectul și în interiorul acestuia creați un fișier numit index.html.

Deschideți-l pentru editare și adăugați următorul cod:

         
Bine ați venit la webul încărcat leneș
  

Cu codul de mai sus primim doar o coajă HTML în loc și includem un mic CSS pentru a asigura pagina corp iar imaginile nu au goluri neașteptate în jurul lor. 

De asemenea, includem marja: 0 auto; astfel încât imaginile pe care le adăugăm mai târziu vor fi centrate.

Încărcați Layzr

Scriptul layzr.js are două surse CDN convenabile pe care le puteți încărca - vom folosi unul din Cloudfare.

Adăugați acest cod în html, înainte de închidere etichetă.

Dacă preferați să nu încărcați scriptul dintr-un CDN, îl puteți descărca și urmați instrucțiunile scurte de la: https://github.com/callmecavs/layzr.js#download

Instantiate Layzr

Acum că avem Layzr încărcat, trebuie să îl executăm când pagina se încarcă. Pentru a face acest lucru, adăugați acest cod după scenariu etichetele introduse în secțiunea anterioară:

Acest cod creează mai întâi o instanță care este utilizată pentru a conține Layzr, iar o dată ce conținutul DOM al paginii sa încărcat, utilizează acea instanță pentru a activa funcționalitatea Layzr.

Codul dvs. global până acum ar trebui să arate astfel:

         
Bine ați venit la webul încărcat leneș
    

2. Adăugați imagini (rezoluție normală)

Cu Layzr încărcat și gata pentru a merge putem începe adăugarea unor imagini pentru ca să-și lucreze magia pe. Puteți utiliza imaginile pe care le doriți, însă dacă doriți să utilizați mostrele de cod exact pe care le vedeți în pașii următori, puteți descărca fișierele sursă atașate acestui tutorial. Aici veți găsi un imagini folder pe care îl puteți copia și plasa în propriul proiect.

Pentru a adăuga imagini atunci când utilizați Layzr, veți folosi un obișnuit img element, dar în loc să folosească src atributul pe care îl veți folosi date normale ca astfel:

Asigurarea înălțimii imaginilor

Pentru ca orice script de încărcare leneș să funcționeze, trebuie să cunoască înălțimea tuturor imaginilor de pe un site astfel încât să poată decide care dintre ele trebuie să fie încărcate (deoarece sunt în portul de vizualizare sau aproape de acesta) și care ar trebui să aștepte.

Partea dificilă este însă că o imagine nu are în realitate nicio înălțime până când nu este complet încărcată într-o pagină. Acest lucru înseamnă că, dacă vrem ca încărcarea leneșă să funcționeze, avem nevoie de o modalitate de a furniza informații despre înălțimea imaginii inainte de imaginile sunt încărcate.

Vom acoperi două metode pentru a realiza acest lucru, unul pentru imaginile cu dimensiuni fixe și unul pentru receptiv. Oferirea înălțimii imaginilor prin stabilirea dimensiunilor este cea mai simplă metodă, deoarece trebuie doar să adăugați înălţime și lăţime atribute.

Mergeți acum și adăugați img elemente deasupra etichetelor de script, folosind date normale atributul și inclusiv înălţime și lăţime, pentru fiecare imagine pe care doriți să o încărcați.

Această metodă de dimensiune fixă ​​va permite încărcarea leneșilor să funcționeze, însă aceasta împiedică imaginile să răspundă, iar acest lucru nu este ideal. Vom acoperi cum să dăm imaginilor atât înălțime cât și reacție puțin mai târziu.

3. Setați un prag de încărcare

În mod implicit, Layzr va aduce numai imaginile care sunt în vedere în momentul încărcării. Cu toate acestea, vizitatorii au o experiență mai liniștită dacă imaginile de pe rând (chiar în afara ferestrei de vizualizare) sunt preîncărcate, de asemenea.

Faceți acest lucru setând o opțiune numită prag când instanțiați scenariul. Modul în care funcționează este că veți oferi o valoare care reprezintă un procent din înălțimea ferestrei de vizualizare. Dacă setați o valoare de 100, aceasta ar reprezenta 100% din înălțimea ferestrei de vizualizare, de ex. 1200px. În acest caz, tot ceea ce se află în afara ecranului în interiorul portului de vizualizare de 1200 de pixeli ar fi, de asemenea, încărcat.

De exemplu, dacă aveați două imagini mari, unul dintre ele a fost împins în afara ferestrei de vizualizare și pragul dvs. a fost setat la 100, ambele imagini se vor încărca:

Pentru a seta o valoare de prag înlocuiți această linie în codul dvs.:

const instanță = Layzr ()

… cu asta:

const instanță = Layzr (prag: 100)

Puteți modifica această valoare la cea mai potrivită valoare a site-urilor pe care le creați. Ca un punct de interes, se pare că pragul de încărcare lent al AMP este aproximativ echivalent cu 200.

4. Adăugați imagini Retina / HiDPI

Unul dintre lucrurile minunate despre Layzr este faptul că este foarte simplu să adăugați imagini pentru dispozitivele de înaltă rezoluție. Tot ce trebuie să faceți este să includeți atributul Retina de date. De exemplu:

Actualizați toate img elemente în HTML pentru a include imaginile retinei, cum ar fi:

5. Reprezentanti de imagine responsabili si Prevenire reflow

Realizarea imaginilor încărcate lazy încărcate poate fi o propunere dificilă. Așa cum am menționat mai devreme, pentru a determina momentul de încărcare a imaginilor, Layzr trebuie să știe mai întâi înălțimile. Deoarece imaginile receptive își schimbă dimensiunile tot timpul, înălțimea lor este imprevizibilă.

În plus, dorim să avem și ceva în aspectul paginii pentru a împiedica reluarea. Reflow este ceea ce se întâmplă atunci când o imagine termină încărcarea și trece de la a nu avea nici o dimensiune pentru a prelua brusc spațiu în aspect, făcând ca tot ce se înconjoară să se miște. Acest lucru poate fi foarte frustrant pentru vizitatorii care încearcă să se concentreze asupra conținutului dvs. doar pentru a avea să sară în jurul paginii de pe ele.

Putem rezolva amândouă aceste probleme prin plasarea unor locașii potrivite în pagină la dimensiunea corectă pentru fiecare imagine. Deținătorii de locație vor asigura faptul că aspectul paginii nu are nevoie să se refacă și va da, de asemenea, înălțimile Layzr cu care să lucrați. Vom pune bazele abordării pe o tehnică ingenioasă din acest articol "A List Apart" de Thierry Koblentz privind "Crearea raporturilor intrinseci pentru video".

Singura condiție este că veți avea nevoie să cunoașteți raportul de aspect al fiecărei imagini pe care o postați în avans, deoarece CSS va redimensiona imaginile în funcție de un raport de aspect specificat.

Adăugați un balot de aspect de aspect

Primul lucru pe care îl vom face este să adăugăm a div înfășurați în jurul primei noastre imagini - aceasta div va deveni substituentul nostru. Vom redimensiona div ea însăși cu CSS, apoi setarea imaginii în interior pentru ao umple orizontal și vertical.

Vom da asta div un nume de clasă care reprezintă raportul de aspect al imaginii pe care o va conține. În exemplul nostru, prima imagine are o lățime de 960 pixeli cu o înălțime de 640 de pixeli, deci să ne dăm seama care este raportul de aspect care o face.

640 (înălțimea noastră) este de două treimi din 960 (lățimea), ceea ce înseamnă că pentru fiecare 2 unități de înălțime imaginea are 3 unități de lățime. Raportul de aspect este de obicei exprimat ca latime inaltime, ca în cazul binecunoscutului 16: 9. Raportul primei imagini a exemplului este 3: 2.

Pentru a reprezenta acest raport de aspect vom da ambalajul nostru div numele clasei ratio_3_2.

Adăugați stilul standard al aspectului

Acum vom adăuga CSS pentru a face acest lucru totul de lucru.

Între cele existente etichetele din capul tău index.html fișier, adăugați acest cod:

 div [clasa ^ = "raportul"] poziția: relativă; lățime: 100%; 

Acest selector ne va ridica ratio_3_2 clasa, dar va lua, de asemenea, orice altă clasă care începe cu raport_. Aceasta înseamnă că putem crea mai multe clase mai târziu pentru a se potrivi diferitelor rapoarte de aspect.

În acest stil, asigurăm că ambalajul nostru se întinde întotdeauna la 100% din lățimea părintelui. De asemenea, ne fixăm poziție: relativă; deoarece aceasta va poziționa absolut imaginea din interiorul ei - veți vedea de ce un pic mai târziu.

Indicați înălțimea de ambalare a raportului de aspect

Acum vom adăuga acest cod specific pentru nostru ratio_3_2 clasa numai:

 .ratio_3_2 / * padding-top: calc (100% * (2/3)); * / padding-top: 66.666667%; 

padding-top valoarea este ceea ce ne permite să ne păstrăm ambalajul div la raportul de aspect dorit. Oricare ar fi lățimea lui div, această căptușeală va păstra înălțimea la 66,666667% din această sumă (două treimi), menținând astfel raportul de aspect 3: 2.

Pentru a determina ce procentaj să puneți aici, dați seama care este înălțimea raportului dvs. de aspect atunci când este exprimată ca procent din lățime. Puteți face acest lucru cu calculul:

100% * (înălțime / lățime)

Pentru raportul nostru de 3: 2 care face: 100% * (2/3) = 66,666667%

Puteți calcula în prealabil procentajul corect pentru raportul de aspect dorit sau, dacă preferați, puteți utiliza CSS calc () funcția văzută comentată în exemplul de mai sus:

căptușeală: calc (100% * (2/3));

Umpleți ambalajul cu aspect de imagine cu imaginea

Formatul de aspect al aspectului va menține dimensiunile dorite, indiferent de lățimea ferestrei de vedere. Deci acum tot ce trebuie să facem este să facem ca imaginea conținută în ea să umple ambalajul, mostenind astfel dimensiunile sale.

Vom face acest lucru prin poziționarea absolută a oricărei imagini imbrăcate într-o raport_ ambalate clasificate div, plasându-l în colțul din stânga sus al ambalajului, apoi întinzându-l la înălțime și lățime de 100%, după cum urmează:

 div [clasa ^ = "raportul"]> img position: absolute; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; 

Verificați-vă prima imagine și acum ar trebui să vedeți că se întinde la lățimea ferestrei de vizualizare, dar se va micșora pentru a se potrivi la redimensionare, menținând raportul de aspect tot timpul.

Adăugați rapoarte extra aspect

Este posibil să aveți imagini cu diferite tipuri de rapoarte diferite și veți dori să le puteți acomoda. În exemplele de imagini cu care lucrăm în acest tutorial, primele trei au un raport de aspect de 3: 2, dar al patrulea și al cincilea sunt 16: 9.

Pentru a ține cont, adăugați o nouă clasă numită în funcție de raportul de aspect, adică. ratio_16_9, cu o valoare corespunzătoare padding-top valoare:

 .ratio_16_9 / * padding-top: calc (100% * (9/16)); * / padding-top: 56,25%; 

Mergeți mai departe și adăugați un raport de aspect div se înfășoară în jurul tuturor celorlalte imagini, utilizând clasele corespunzătoare pentru fiecare, în funcție de mărimea acestora. De asemenea, puteți să eliminați înălţime și lăţime atributele de pe imaginile tale, deoarece toate acestea vor fi toate suprascrise de CSS-ul nostru.

Reîncărcați previzualizarea browserului și redimensionați portul de vizualizare: acum ar trebui să găsiți că toate imaginile dvs. sunt receptive, păstrând în același timp funcționalitatea leneș-încărcare, fără reflow.

6. Adăugați srcset

Layzr acceptă, de asemenea, atributul srcset. În browserele care acceptă srcset, acesta va fi folosit în mod preferat date normale și Retina de date.

Mai degrabă decât folosind drept srcset atribut, cu toate acestea, ar trebui să fie prepended cu date- la fel ca celelalte atribute pe care le-am folosit până acum. 

Actualizați codul primei imagini la:

Pentru a vedea acest lucru mergeți la previzualizarea browserului dvs., micșorați portul de vizualizare până la o lățime mai mică de 320 pixeli, reîncărcați și vizionați panoul de rețea. Ar trebui să vedeți mai întâi cea mai mică versiune a imaginii. Apoi, măriți dimensiunea ferestrei de vizualizare și ar trebui să vedeți încărcarea versiunilor medii și mari în timp ce mergeți.

Dosarul de imagini furnizat în fișierele sursă include versiuni mici, medii și mari ale fiecărei imagini. Actualizați codul pentru a le utiliza pe toate Date-srcset atribute cum ar fi:

Adăugați o animație de încărcare

Aproape am terminat, dar pentru a crea un ultim strat de poloneză, vom adăuga o animație de încărcare. Acest lucru va ajuta vizitatorilor să comunice ce părți ale layout-ului acționează ca reprezentanți ai imaginii și că aceste imagini sunt în curs de încărcare.

Vom folosi un încărcător CSS pur, o versiune puțin modificată a acestui stilou mare de către Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Pentru a evita necesitatea marcării suplimentare, vom avea animația de încărcare conținută într-un :după psuedo-element atașat la fiecare ambalaj de raport de aspect. Adăugați următoarele la CSS:

 div [class = ""]: după content: "; albastru: poziția: absolută; top: calc (50% - 2rem); stânga: calc (50% - 2rem); 100% transform: rotate (360deg);

Codul de mai sus creează o mică pictogramă în formă de cerc în formă de cerc, îl centrează și îl rotește 360 ​​de grade într-un cerc la fiecare 0,75 secunde.

Vom adăuga, de asemenea, o culoare de fundal gri închis în aspectul aspectului, astfel încât să fie ușor de distins de restul aspectului. Adaugă asta fundal-culoare: # 333; linie după cum urmează:

 div [clasa ^ = "raportul"] poziția: relativă; lățime: 100%; fundal-culoare: # 333; 

În cele din urmă, trebuie să ne asigurăm că încărcătorul nostru nu se poziționează în partea de sus a imaginilor noastre. Pentru a face acest lucru, vom adăuga linia z-index: 1; la imaginile noastre, mutându-le într-un strat deasupra încărcătorilor:

 div [clasa ^ = "raportul"]> img position: absolute; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; z-index: 1; 

Actualizați-vă acum pagina și ar trebui să vedeți animația dvs. de încărcare în acțiune.

Codul dvs. final

Cu toate cele de mai sus, codul dvs. ar trebui să arate astfel:

         
Bine ați venit la webul încărcat leneș
 
  
 
  
 
  
 
  
 
  
    

Înfășurarea în sus

Ați implementat complet încărcarea leneșă cu mâna, cât mai aproape posibil de paritatea cu AMP.

Există câteva lucruri pe care AMP le face în mod automat, cum ar fi manipularea aspectului aspectului de conservare pe imagini receptive, dar pe de altă parte face lucrurile pe cont propriu permite un control suplimentar, cum ar fi specificarea propriului prag de încărcare.

Sperând că lucrați prin acest proces v-ați ajutat să decideți ce abordare preferați.

Tehnici mici cu cabluri de rețea, Kirill_M / Photodune.

Mulțumită lui Michael Cavalea pentru un scenariu excelent! Pentru a afla mai multe despre Layzr.js vizitați: https://github.com/callmecavs/layzr.js