Ako odložiť obrázky mimo obrazovky (s a bez…

Chcete web s vysokým výkonom? Jedným prehliadaným aspektom je zvyčajne spôsob načítania stránok lokality.

Predstavte si toto: máte krásnu webovú stránku alebo obchod, no načítava sa pomaly. Čo sa bude diať?

No, štatistiky ukazujú, že ľudia sa odrazia a pravdepodobne sa už nikdy nevrátia do vášho obchodu.

Rýchla webstránka sa vášmu biznisu určite vyplatí. Jedným zo spôsobov, ako zvýšiť rýchlosť stránky, je odložiť obrázky mimo obrazovky. V tomto článku sa dozvieme všetko o tejto technike optimalizácie webových stránok – čo to je, aké sú jej výhody, ako sa to robí atď.

Začnime…

Čo je odloženie obrazu mimo obrazovky?

Najjednoduchšie vysvetlenie – Na webovú stránku sa nenačítavajú obrázky, ktoré ešte nie sú vo výreze návštevníka.

Zobrazovacia oblasť je načítaná oblasť, ktorá je súčasne v očiach diváka. Bez ohľadu na to, či vaši návštevníci prehliadajú cez laptop alebo mobilné zariadenia, na začiatku je viditeľná iba určitá časť stránky.

Odloženie obrazu mimo obrazovky znamená súčasné pozastavenie sťahovania všetkých obrázkov na stránke a sťahovanie iba obrázkov vo výreze. Keď sa používateľ posúva nadol a prechádza do iných záhybov webovej stránky, až potom by sa mali sťahovať ďalšie obrázky.

Tým sa zníži záťaž serverov a umožní sa im rýchlo zobrazovať stránky návštevníkom. Poďme ďalej a pozrime sa na niekoľko solídnych výhod, ktoré získate, ak využijete odloženie obrazu mimo obrazovky.

Prečo odložiť obrázky mimo obrazovky?

Odloženie obrazu mimo obrazovky priamo ovplyvňuje metriku Oneskorenie prvého vstupu (FID) Core Web Vital. FID vypočíta čas, ktorý prehliadaču trvá, kým zareaguje na úvodnú interakciu používateľa so stránkou.

Ideálny čas pre FID je kdekoľvek medzi 0 až 100 ms. A všetko nad 300 ms sa považuje za zlé.

Optimalizáciou svojich webových stránok pomocou odlišného obrazu mimo obrazovky môžete získať nasledujúce výhody:

  • Znížené časy načítania: Toto je jednoznačné. Keď sa obrázky nenačítajú za zobrazovanú oblasť, vaše stránky sa načítajú oveľa rýchlejšie, ako keby sa načítali všetky naraz.
  • Zachovanie šírky pásma: Keď sa naraz načíta obmedzená časť stránky, zdroj šírky pásma, ktorý využívajú vaši návštevníci, sa výrazne zníži. Skôr sa zbytočne neplytvá. Maximálna šírka pásma sa spotrebuje iba vtedy, keď návštevník zobrazí celú stránku.
  • Lepšie hodnotenie SERP: Rýchlejšie webové stránky majú vysoké hodnotenie. Keď sa vaša stránka zobrazuje vyššie, získate väčšiu návštevnosť a nakoniec aj viac konverzií. Čo by mohlo byť lepšou motiváciou na implementáciu odloženia obrazu mimo obrazovky?
  • Lepší zážitok pre návštevníkov: Ako je uvedené v štatistike vyššie – rozhodnutia približne 70 % nakupujúcich sú ovplyvnené rýchlosťou načítania webovej stránky. Chcete stratiť svojich zákazníkov a návštevníkov kvôli pomalým stránkam? Nie, však?
Čítať:  Ako opraviť chybu Tiktok Like Glitch na zariadeniach iPhone a Android

Teraz, keď viete, čo je a prečo je odloženie obrazu mimo obrazovky, pozrime sa, ako sa to robí.

Metódy odloženia snímok mimo obrazovky

Takže v podstate existuje niekoľko metód, ktoré môžete použiť na vykonanie úlohy. Budem diskutovať o najjednoduchších a najbežnejších, aby ste nemali žiadne problémy s implementáciou odloženia obrazu mimo obrazovky na váš web.

Ach, mimochodom, ak máte web WordPress postavený na verzii 5.4 alebo vyššej, už máte odloženie obrazu mimo obrazovky, ktoré sa tiež v predvolenom nastavení niekedy nazýva funkcie lenivého načítania.

Tu je príklad, ktorý som získal z testovacej stránky WP, ktorú som vytvoril pre tento článok.

Ak chcete zistiť, či to vaša verzia WP podporuje, jednoducho prejdite na stránku WP Dashboard Aktualizácie.

Potom vyhľadajte verziu, ktorú zobrazuje.

Je to skvelý nástroj na lenivé načítanie, ktorý však môže byť občas trochu obmedzujúci.

To znamená, že prejdime k metódam, ktoré môžete použiť na odloženie obrazu mimo obrazovky pre vaše webové stránky.

Metóda 1: Odloženie mimo obrazovky prostredníctvom kódu HTML

Na odkladanie obrázkov pomocou kódovania HTML nemusíte byť profesionálnym programátorom. Môžete to jednoducho urobiť pomocou jedného riadku kódu, ktorý použijete pre obrázky podľa vlastného výberu.

Tu sú kroky, ktoré môžete použiť na manuálne odloženie obrázkov.

1. Otvorte súbor HTML. Môže to byť vo vašom IDE alebo textovom editore.

2. Identifikujte snímky mimo obrazovky, ktoré chcete odložiť. Potom použite nasledujúci riadok kódu na odloženie obrázkov alebo ich lenivé načítanie.

príklad

Nahraďte „example.png“ skutočnou cestou k obrázku, ktorý chcete zobraziť.

3. Uložte súbor, potom spustite kód a vaše obrázky budú odložené.

Vo vyššie uvedenom videu môžete vidieť, že keď sa stránka posúva a obsah zobrazovanej oblasti sa mení, začínajú sa zobrazovať nové obrázky. Takto prebieha proces.

Pozor však – odborníkov z web.dev naznačujú, že by ste sa mali vyhýbať odkladaniu obrázkov, pri ktorých je vysoká pravdepodobnosť, že budú vo výreze a najmä obrázky LCP.

Čítať:  5 spôsobov, ako využiť sociálne počúvanie na analýzu konkurencie

LCP je skratka pre Largest Contentful Paint a v podstate vymeriava, ako dlho trvá, kým sa najväčší obsah zobrazí na obrazovke.

Metóda 2: Rozdiely s pluginmi a nástrojmi pre rôzne platformy

Ak sa teraz nechcete trápiť s kódom alebo ručne vyberať obrázky a chcete jednoduchý spôsob, ako to urobiť, existujú nástroje, ako to urobiť.

V závislosti od platformy vám niektoré doplnky alebo rozšírenia môžu pomôcť pri jednoduchom vykonaní úlohy. Dovoľte mi podeliť sa o niektoré nástroje pre niektoré z najbežnejších platforiem, ako sú WordPress, Magento, Shopify atď.

Odloženie mimo obrazovky vo WordPress

Odloženie obrázkov mimo obrazovky pomocou WordPress je veľmi jednoduché. K dispozícii je veľa možností doplnkov, ktoré môžete preskúmať. Tu sú niektoré bežné, ktoré sa používajú na tento účel:

Toto všetko sú najlepšie možnosti a každý to urobí za vás. Väčšina WP pluginov na tento účel je celkom užívateľsky prívetivá, takže s vykonaním úlohy nebudete mať problém.

V skutočnosti mi dovoľte ukázať vám jednu metódu, ako to urobiť vo WordPress. Proces je zvyčajne viac-menej podobný aj pre iné pluginy. Použijem Smush, aby som vám ukázal, ako sa to robí.

Prvým krokom je inštalácia pluginu.

Po aktivácii môžete pomocou doplnku lenivo načítať obrázky. Naľavo sa zobrazí karta „Smush“. Umiestnite kurzor myši naň a uvidíte všetky možnosti, ktoré doplnok ponúka. Kliknutím na Lazy Load získate prístup k nastaveniam pre odloženie obrazu mimo obrazovky.

Keď ste na tejto karte, budete ľahko vedieť, ako doplnok používať.

Môžete vidieť, že vám už hovorí o stave lenivého načítavania vášho webu. Navyše, keď sa posuniete nadol, uvidíte veľa možností prispôsobenia, ktoré môžete preskúmať na odloženie obrazu mimo obrazovky.

A to je doslova to, aké jednoduché je lenivé načítanie obrázkov pre weby WordPress. Po dokončení výberu požadovaných nastavení kliknite na tlačidlo „Uložiť zmeny“ a máte hotovo.

To je hotové. Pozrime sa, ako sa to robí pre iné platformy.

Offscreen Defering v Shopify

Shopify je ďalšou populárnou možnosťou, kde si ľudia budujú svoje online obchody. A prirodzene, tieto stránky sú často bohaté na obrázky. Tu je niekoľko nástrojov na odkladanie obrázkov, ktoré môžete preskúmať pre vaše obchody Shopify:

Odloženie mimo obrazovky v Magento

Magento je populárna platforma, ktorá je zvyčajne voľbou pre stredne náročné až špičkové podniky. Niekoľko možností rozšírenia bude užitočných, keď budete chcieť odložiť obrázky mimo obrazovky pre vaše obchody Magento.

Poďme sa na ne pozrieť:

Metóda 3: Odlišovanie pomocou JS Listeners

Tento prístup zahŕňa odloženie obrázkov mimo obrazovky prostredníctvom JavaScriptu. JS Listeners, tiež známe ako poslucháči udalostí JavaScriptu, zaisťujú, že kód čaká na spúšťaciu udalosť, kým vykoná akciu. Inými slovami, ide o akčné odloženie obrazu mimo obrazovky.

Čítať:  WooCommerce vs. Wix: The Better Ecommerce Platf...

addEventListener() a removeEventListener() sú príkazy používané na implementáciu prijímačov udalostí do vášho kódu JavaScript. Tieto funkcie vám umožňujú využívať rôzne typy udalostí na spustenie odloženia snímky mimo obrazovky pomocou JavaScriptu.

Nižšie uvádzam aj ďalšie príklady kódu a vysvetľujem, ako ich používať.

Prejdite: document.addEventListener(“scroll”, lazyload)

Stáva sa to pri rolovaní určitej oblasti stránky.

Zmena orientácie: window.addEventListener(“orientationChange”, lazyload);

Stáva sa to, keď vaši používatelia zmenia orientáciu obrazovky z orientácie na šírku na výšku alebo naopak.

A to je asi tak všetko. Nakoniec existuje veľa spôsobov, ako túto prácu vykonať. Úplne záleží na tom, ktorá trasa je pre vás najjednoduchšia. To znamená, že samotné odloženie obrazu mimo obrazovky za vás nemôže uzavrieť dohodu o optimalizácii.

Budete tiež musieť implementovať osvedčené postupy optimalizácie obrázkov, aby sa vaše webové stránky načítali rýchlejšie. A vaše úsilie lenivého načítania v kombinácii s rýchlym webovým hostiteľom vám môže priniesť tie najlepšie výsledky.

Teraz sa pozrime na niektoré techniky optimalizácie obrazu, ktoré môžete implementovať, aby ste čo najlepšie využili svoje úsilie na odkladanie obrazu mimo obrazovky!

Tipy na optimalizáciu obrazu, ktoré vám pomôžu pri rôznych snahách s obrazom mimo obrazovky

Odlišné obrázky mimo obrazovky samy osebe prispejú k rýchlosti načítania vašej stránky. Najlepšie bude, ak tomuto úsiliu pomôžete lepšou optimalizáciou obrázkov. Tu je niekoľko spôsobov, ako optimalizovať obrázky:

1. Zmenšite veľkosť súboru obrázka a vyberte správny formát

Zabezpečte, aby vaše stránky neboli bombardované ťažkými obrázkami. Komprimujte obrázky, aby vaše stránky nepotrebovali väčšiu šírku pásma na načítanie. Pretože aj pri odložení obrazu sa veľké množstvo dát skráti čas načítania.

To nechceš, však?

Tu je test, ktorý som urobil, aby som ukázal, ako ťažké obrázky môžu výrazne ovplyvniť časy načítania.

Toto je správa pre veľmi nejasnú webovú stránku, ktorú som vytvoril ako test. Žiadne obrázky nie sú optimalizované. Môžete vidieť, že výsledky pre stránku nie sú dobré. Spustil som test PageSpeed ​​Insights.

Pozrite si všetky chyby, ktoré mi pri obrázkoch dáva.

Potom som zmenšil veľkosti obrázkov a vykonal nejaké optimalizačné úpravy a počet chýb sa výrazne znížil.

Výsledkom boli lepšie metriky výkonnosti webových stránok, ako je uvedené nižšie:

Nepodceňujte teda dôležitosť optimalizácie obrázkov a použitia správneho formátu. Môže výrazne zvýšiť výkonnosť vášho obchodu.

2. Udržujte obrázky vo vysokej kvalite

Teraz už nechcete znižovať kvalitu obrázkov pri zmenšovaní ich veľkosti súboru. Udržujte obrázky vo vysokej kvalite, aby ste zabezpečili vynikajúci zážitok pre návštevníkov. Dva najrýchlejšie spôsoby, ako to urobiť, sú:

  • Preveďte svoje obrázky do formátu JPEG.
  • Preveďte svoje obrázky do formátu WEBP.
Čítať:  Ako táto agentúra obmedzila manuálne úlohy a teraz má o 70 % viac času na rast

Teraz je najlepšie vykonať tieto kroky pri nahrávaní obrázkov. Ak však už máte stránku nabitú obrázkami v nesprávnych formátoch, môžete si stiahnuť doplnky a rozšírenia na konverziu formátu.

Našťastie, ak ste zákazníkom DreamHost a rozhodnete sa kúpiť doplnok DreamHost Cloudflare Enterprise Add-on, získate prístup k Cloudflare Polish, ktorý môžete použiť na zmenšenie veľkosti obrázkov bez kompromisov v kvalite.

3. Používajte responzívne obrázky

Veľkosť vašich obrázkov by sa mala líšiť v závislosti od veľkosti obrazovky návštevníka. To výrazne prospeje vašej stránke z hľadiska návštevnosti z mobilu alebo pre iné menšie zariadenia, ako sú tablety.

Namiesto spotreby rovnakých dát pre mobilné zariadenia a notebooky sa spotreba zníži, čo ovplyvní prvok LCP Core Web Vitals.

Pri optimalizácii obrázkov na vašej stránke to teda určite neprehliadnete. Teraz už chápem, že podniky zvyčajne nemajú veľa času a zdrojov na to, aby to všetko robili manuálne.

Preto považujem za relevantné spomenúť Cloudflare Mirage, ktorý môžete získať s DreamHost za drobné. Vďaka tomuto nástroju budú vaše obrázky citlivé, takže ušetríte čas a zdroje a budete ich venovať iným dôležitým veciam, na ktorých záleží.

4. Povoľte ukladanie obrázkov do vyrovnávacej pamäte prehliadača

Táto funkcia stiahne zdroje pre návštevníkov, keď prvýkrát navštívia vašu stránku. Takže pri ich ďalších návštevách tam údaje už budú. Stránka sa teda načíta rýchlejšie.

Je to skvelý nástroj pre webové stránky, ktoré očakávajú opakujúcich sa návštevníkov.

Teraz, keď ste zoradení s optimalizáciou obrázkov, rád by som sa presunul na koniec článku s tipom na odloženie obrázkov mimo obrazovky:

Všetky stránky na vašom webe majú sekciu hrdinov. Toto je prvá sekcia, ktorá je viditeľná pre vašich divákov. Ak sa to prejaví oneskorene, v podstate hovoríte ľuďom, aby odišli.

Nerob to. V skutočnosti existuje niečo, čomu sa hovorí dychtivé načítanie. Implementujte to, aby sa obraz načítal ako zvyčajne a nebol zbytočne oneskorený.

Záver

Odloženie obrazu mimo obrazovky je skvelý spôsob, ako zrýchliť váš web.

Dúfajme, že pri pohľade na vyššie uvedené metódy ich môžete implementovať pre svoje stránky a poskytnúť svojim návštevníkom neuveriteľne rýchle prehliadanie.

Zistite, ktorý z nich je pre vás najrelevantnejší. A ak s webom len začínate, nezabudnite ho postaviť na platforme, ktorá vám poskytuje najväčšiu slobodu a prístup k prispôsobeniam.

V neposlednom rade – nezabudnite napájať stránku rýchlym hostingom, pretože neoptimalizovaný hosting spomalí vašu stránku a všetky vaše snahy o odkladanie obrazu budú aj tak zbytočné!

Nové Publikácie:

ODPORÚČANIE