Cum să optimizați performanța web și rezultatul final

Răbdarea nu este o virtute pentru vizitatorii site-ului web și cumpărătorii online. Fiecare fracțiune de secundă contează când vine vorba de păstrarea – sau pierderea – unui vizitator pe site-ul tău.

Potrivit Kissmetrics, timpul de încărcare este un factor major care contribuie la abandonul paginii. Deoarece vizitatorul mediu nu are răbdare pentru o pagină care durează prea mult să se încarce, abandonul crește ca procent cu fiecare secundă din timpul de încărcare. Aproape 40% dintre utilizatori vor abandona o pagină după 10 secunde, notează blogul. Utilizatorii de internet mobil se confruntă probabil cu cea mai mare frustrare cu această problemă – 73% au remarcat că au întâlnit un site web care a fost mult prea lent pentru a se încărca.

Problema încărcării paginii afectează direct comportamentul de cumpărături al vizitatorilor site-ului. Kissmetrics a remarcat, de asemenea, că 79% dintre cumpărătorii care au fost nemulțumiți de performanța site-ului sunt mai puțin probabil să cumpere din nou de pe același site. Aproape jumătate dintre consumatori se așteaptă ca paginile să se încarce în 2 secunde sau mai puțin, iar o întârziere de 1 secundă va scădea satisfacția clienților cu 16%.

Consecințele acestor întârzieri se traduc în bani reali. Gigantul comerțului electronic Amazon a dezvăluit că o încetinire a încărcării paginii de numai 1 secundă ar costa 1,6 miliarde de dolari în venituri din vânzări. În mod similar, Google a observat că o încetinire de doar patru zecimi de secundă a rezultatelor căutării sale ar duce la o pierdere de 8 milioane de căutări pe zi, ceea ce se traduce în milioane mai puține în publicitatea online.

Ajungerea la miezul problemei

Cei mai mari factori care influențează timpul de încărcare sunt imaginile, videoclipurile și graficele. Site-urile web de astăzi încorporează mai multe elemente vizuale și mai puțin text, pentru a atrage vizitatori. Potrivit HTTP Archive, aproape 64% din greutatea medie a unui site web sunt imagini, în timp ce videoclipurile reprezintă încă 8%.

Deoarece aceste tipuri de media reprezintă aproape trei sferturi din dimensiunea site-ului web, este important pentru dvs. să gestionați mai eficient imaginile și videoclipurile de pe site pentru a îmbunătăți performanța și ratele de conversie. Să ne uităm la câțiva pași pe care îi puteți lua pentru a reduce impactul imaginilor și videoclipurilor asupra performanței site-ului dvs. web.

Utilizați formate de imagine mai eficiente și moderne

Google a adăugat suport pentru formatul său de imagine WebP browserelor Chrome, iar Microsoft a făcut același lucru pentru JPEG-XR în majoritatea browserelor sale Internet Explorer și Edge. Dar mulți dezvoltatori încă nu au acceptat aceste modificări, rămânând cu aceleași formate JPG și PNG, în loc să profite de modul în care formatele moderne își pot optimiza site-urile.

În mod ideal, ar trebui să convertiți imaginile în WebP și JPEG-XR atunci când este cazul și să ajustați calitatea compresiei pentru a echilibra formatele. De asemenea, este important să detectăm browserul specific care accesează fiecare imagine și să livrezi o versiune a imaginii optimizată browserului respectiv. Acest lucru vă va permite să vă asigurați că utilizatorii primesc cele mai bune imagini posibile, în ceea ce privește calitatea vizuală și optimizarea dimensiunii fișierului, fără a încetini site-ul dvs.

Eliminați risipa de redimensionare a browserului

Dezvoltatorii folosesc adesea redimensionarea imaginilor din partea browserului ca o comandă rapidă, mai degrabă decât redimensionarea imaginilor de pe partea serverului. În timp ce rezultatul final arată exact același pe browserele moderne, impactul asupra lățimii de bandă este destul de diferit. Odată cu redimensionarea browser-ului, vizitatorii site-ului pierd timp prețios descarcând o imagine inutil de mare și irosești lățime de bandă livrându-le lor.

Pentru browserele mai vechi, problema este cu atât mai pronunțată, cu cât algoritmii lor de redimensionare sunt de obicei inferioare. Trebuie să vă asigurați că imaginile dvs. se potrivesc perfect dimensiunilor site-ului lor necesare. Merită să creați diferite miniaturi ale aceleiași imagini, mai degrabă decât să furnizați o imagine mare și să vă bazați pe browser pentru a o redimensiona. Există câteva instrumente disponibile care pot ajuta în acest sens, cum ar fi un redimensionator de imagini open source, cum ar fi ImageMagick, sau o soluție bazată pe cloud, cum ar fi Cloudinary.

Utilizați tipuri corecte de fișiere de imagine

JPEG, PNG și GIF sunt cele mai comune formate de fișiere folosite astăzi pe site-urile web, dar fiecare are roluri foarte diferite. Folosește un format greșit și pierzi timpul vizitatorilor și banii tăi. O greșeală frecventă este utilizarea PNG-urilor pentru a livra fotografii. Există o concepție greșită comună conform căreia PNG-urile, ca formate fără pierderi, vor oferi cea mai mare reproducere posibilă a fotografiilor.

Deși acest lucru este în general adevărat, aceasta este, de asemenea, o optimizare destul de inutilă. Este important să țineți cont de ce format de imagine trebuie utilizat pentru conținutul afișat. PNG ar trebui să fie folosit pentru imagini generate pe computer (diagrame, logo-uri etc.) sau atunci când aveți nevoie de transparență în imaginea dvs. (suprapuneri de imagini); JPEG când afișați o fotografie capturată; și GIF când este nevoie de animație (animație de încărcare Ajax etc.).

Nu utilizați o singură dimensiune a imaginii pentru toate mediile de livrare

Site-ul dvs. este vizualizat pe multe dispozitive diferite, în special pe măsură ce smartphone-urile, tabletele și ceasurile inteligente au devenit preferate de consumatori. Adesea, dezvoltatorii oferă aceleași imagini pentru toate rezoluțiile dispozitivului, folosind redimensionarea la nivelul clientului pentru imagini. Imaginile pot arăta grozav, dar vizitatorii pierd timpul încărcând imagini inutil de mari pe dispozitivele lor și plătiți pentru utilizarea redundantă a lățimii de bandă.

Acest lucru este deosebit de nedrept pentru utilizatorii 3G și utilizatorii de roaming care plătesc un plus mare pentru a descărca imaginile inutil de foarte înaltă rezoluție. Pentru a evita aceste probleme, ar trebui să identificați dispozitivele mobile ale vizitatorilor și soluționarea utilizând agentul utilizator al acestora. Cu rezoluția corectă în mână, obțineți cea mai potrivită imagine de pe serverele dvs. Acest lucru necesită să puneți la dispoziție un set de miniaturi pentru fiecare dintre imaginile dvs. originale. Există pachete Javascript excelente disponibile care vor automatiza acest proces.

Profitați de design receptiv

Fiecare dispozitiv pe care un vizitator îl folosește pentru a vă accesa site-ul are rezoluții diferite. Marcajul unui site web trebuie să se adapteze pentru a arăta perfect pe toate dispozitivele diferite și în diferite rezoluții, densități de pixeli și orientări ale dispozitivelor mobile. Gestionarea, manipularea și livrarea imaginilor este una dintre principalele provocări ale designului responsive cu care se confruntă dezvoltatorii web.

Datorită acestor provocări, multe site-uri web sunt construite cu imagini de cea mai înaltă rezoluție care pot fi necesare și pur și simplu reduse la nivel de client, în funcție de punctul de întrerupere. Acest proces este ineficient și dăunează performanței. Dar există opțiuni, cum ar fi instrumentul open source Responsive Breakpoints, care vă poate ajuta să generați toate dimensiunile de imagine de care veți avea nevoie, precum și codul HTML corespunzător.

Utilizați rețele de livrare de conținut (CDN)

De obicei, CDNS au servere implementate strategic în întreaga lume pentru a scurta timpii de călătorie dus-întors. CDN-urile permit ca imaginile să fie difuzate mai rapid utilizatorilor și reduc probabilitatea de blocări, îmbunătățesc performanța SEO și îmbunătățesc experiența utilizatorului. Când alegeți un CDN, va trebui să luați în considerare nivelul său de acoperire globală, rata de stocare în cache, capacitatea de a rula operațiuni logice la margine, timpii medii de răspuns și alte valori, cum ar fi timpii medii de invalidare.

Impactul schimbării

Utilizând aceste bune practici, puteți face cu adevărat o diferență în experiența utilizatorului, încurajând vizitatorii să rămână mai mult timp, să răsfoiască mai mult, să se implice și să facă achiziții. Luați în considerare rezultatele acestor companii:

Apartment List, o resursă online care ajută persoanele să caute locuințe închiriate, s-a trezit să se ocupe de o varietate de formate și rezoluții diferite de imagine, în timp ce preia fluxuri de date ale imaginilor din diferitele comunități de apartamente prezentate pe site-ul său. Transformând toate aceste imagini în imagini optime pentru prezentare pe dispozitive mobile de diferite dimensiuni, precum și desktop-uri, precum și prin folosirea tehnicilor de design responsive, compania a înregistrat o creștere de aproape 20% a ratelor sale de conversie.

KartRocket, o platformă de comerț electronic bazată pe SaaS, care oferă un ecosistem de comerț electronic transparent și complet, care ajută IMM-urile să creeze rapid și ușor magazine online, trebuia să găsească o modalitate de a asigura calitatea imaginilor, fără a afecta timpul de încărcare sau performanța site-ului. clientii. A folosit instrumente pentru a controla dinamic imaginile, astfel încât acestea au fost optimizate pentru miniaturi mici, imagini banner mari și imagini ale produselor principale. Această abordare a permis lui KartRocket să obțină o creștere de 100 ori a timpului de răspuns pentru încărcarea imaginilor.

Concluzia

Când timpul înseamnă bani, proprietarii de site-uri web nu își pot permite să nu facă toți pașii necesari pentru a-și îmbunătăți experiențele vizitatorilor. Chiar și o întârziere de o fracțiune de secundă în încărcarea unei pagini s-ar putea traduce prin pierderea veniturilor și a încrederii din partea consumatorului.

Având în vedere că imaginile și videoclipurile sunt cele mai mari lățimi de bandă de pe majoritatea site-urilor web, trebuie să aruncați o privire serioasă asupra designului dvs. web și a formatelor de imagini, apoi luați măsurile necesare pentru a vă asigura că media este optimizată astfel încât site-ul dvs. - ca să nu mai vorbim despre veniturile dvs. și percepțiile clienților – nu suferi ca urmare.