Inhalt
- Wat ass Native Lazy-Loading?
- Mäerz 2020 Update (Liest als éischt!)
- Gebierteg Lazyload Plugin
- 1. Füügt Lazy Loading Attribut u Featured Images an Attachments bäi
- 2. Füügt Lazy Loading Attribut op nei Biller bannent Posts bäi
- 3. Lazy Loading fir existent Biller a Posts
- Méi einfach Alternativ fir All Biller a Posts
- 4. Lazy Loading fir Kommentar Avataren
- 5. Lazy Loading Youtube Videos
- D'Verbesserung verifizéieren
Wat ass Native Lazy-Loading?
Wann e Browser eng Websäit opmécht, lued se normalerweis all Bild drop - och déi wäit ënner dem siichtbare Beräich, oder Viewport. E puer Besucher scrollen net jee méi wäit op der Säit, dat heescht datt d'Bandbreedung verbraucht gëtt fir déi net gesi Biller ze verschwenden.
An enger laanger Sich no méi séierem Internet hunn d'Entwéckler clever Weeër gemaach fir d'Belaaschtung vu Biller ausserhalb vum Viewport ze verleeën, bis de Benotzer bei hinne rullt. All dës Léisunge erfuerdert JavaScript, awer, wat säin eegent Overhead bäigefüügt an d'Biller ganz brécht fir déi, déi mat JavaScript behënnert sinn.
D'Situatioun huet geännert mat der Arrivée vum Chrome 76. Vun där Versioun un, Chrome a Chromium ofgeleet Browser ënnerstëtzen natierlecht Lazy-Laden. Alles wat Dir maache musst ass en eenzegt Attribut fir Är Image Tags ze addéieren:
img src = "cutecat.webp" loading = "faul" />
Et ass sou einfach. A wann en anere Browser dat neit Attribut nach net ënnerstëtzt, ginn d'Biller normalerweis gelueden, kee Schued gemaach.
Elo soen ech Iech wéi dës Attributer automatesch op Är Biller a Wordpress bäifügen (zum gréissten Deel).
Mäerz 2020 Update (Liest als éischt!)
Et gi spannend Entwécklungen zënter datt dësen Artikel geschriwwe gouf. Native Image lazy-loading ass en Deel vun der offizieller HTML Spezifizéierung ginn. Browser Support huet verbessert. A vläicht am wichtegsten, natierlecht Lazy-Laden ass a WordPress Kär fusionéiert wéi vun der Versioun 5.5.
Praktesch heescht dat keen extra Effort Ären Deel wäert néideg sinn nodeems d'WP Versioun 5.5 ukënnt am August 2020. Bis dohinner kënnt Dir natierlecht Lazy-Laden testen mat de Modifikatiounen ënnendrënner beschriwwe. Bedenkt just datt hey a puer Méint irrelevant wäert ginn (an Hurra dofir).
Gebierteg Lazyload Plugin
Als éischt, dem Google säin eegene Native Lazyload Plugin kann all d'Aarbecht fir Iech maachen. Zu der Zäit vum Schreiwen ass et mat One-Star Rezensiounen ze behaapten datt se hire Site gebrach hunn, awer ech si sécher datt et eventuell fixéiert gëtt. Och da wäert ech et net benotzen well ech e Curmudgeon sinn an vermeit Plugins sou vill wéi méiglech ze installéieren, awer wann Dir no der schnellster an einfachster Léisung sicht, ass dat.
1. Füügt Lazy Loading Attribut u Featured Images an Attachments bäi
Dobäi d ' loading = "liddereg" Attribut fir Featured Biller (fréier Post Miniaturen genannt), Galerien, a Biller op Attachment Säiten ass einfach mat der wp_get_attachment_image_attribute Zännstaang. Einfach de Code hei drënner kopéieren an an Är Theme pechen functions.php Datei:
add_filter ('wp_get_attachment_image_attributes', 'add_lazy_load', 10, 3); Funktioun add_lazy_load ($ attr, $ attachment, $ size) {if (! array_key_exists ('loading', $ attr)) {$ attr ['loading'] = 'faul'; } zréck $ attr; }
Kudos zu akkis op Wordpress Code Referenz fir dëse Stéck.
Dir kënnt bestätegen datt dëst funktionnéiert andeems Dir de Quellcode vun engem Featured Image oder enger Attachment Säit op Ärem Site inspizéiert:
2. Füügt Lazy Loading Attribut op nei Biller bannent Posts bäi
De Code hei uewen beaflosst net eenzel Biller déi per Post Editor bäigesat ginn. Fir dat hunn ech den image_send_to_editor haken wéi hei ënnendrënner. Füügt et bäi functions.php wéi fréier.
add_filter ('image_send_to_editor', 'lazyloading', 10, 8); Funktioun lazyloading ($ html) {$ html = str_replace ('/>', 'loading = "faul" />', $ html); zréckginn $ HTML; }
Wat dat mécht ass einfach op der loading = "liddereg" Attribut wann ëmmer e Bild an e Post iwwer "Medien derbäi" agefouert gëtt. Wann Dir op "Text" am Classic Editor wiesselt oder op déi dräi Punkte klickt an dann op "Edit als HTML" zu Gutenberg klickt, gesitt Dir eppes an dëse Linnen:
Wéi Dir vläicht scho geroden hutt, betrëfft dëst nëmmen nei agefouert Biller. Galerien a Post Miniaturen ofgesinn, existéierend Biller an eelere Posts kréien net déi faul Luedenbehandlung. Et ass e gudde Grond dofir: Biller, déi a Posts agefouert ginn, sinn am Fong en Deel vum Posttext a kënnen net direkt gefiltert ginn.
Dir kënnt natierlech eng Funktioun benotzen déi den Inhalt vun engem ganze Post duerchsicht an op der faul Luede Attribut fir all img> tag et fënnt, awer dat fällt mir als ineffizient. De Prozess misst all Kéier widderholl ginn wann e Visiteur e Post kuckt, onnéideg Belaaschtung op Ärem Server mécht an Äre Site verlangsamt, wat de Géigendeel ass vu deem wat mir probéieren ze maachen. Dës Approche ass vill méi einfach, awer also hunn ech sou eng Funktioun méi wäit ënnendrënner bäigefüügt am Fall wou Dir se benotze wëllt.
3. Lazy Loading fir existent Biller a Posts
Fir mat existente Biller an eelere Wordpress Posts ëmzegoen, kann ech net wierklech eppes méi clever denken wéi eng einfach Sich & Ersatz maachen. (Wann Dir eng besser Iddi hutt, deelt se w.e.g. an de Kommentaren!) Dëst schéngt net ganz elegant, an et haartcodes loading = "liddereg" Attribut a Posts, awer et muss nëmmen eemol gemaach ginn.
Zu dësem Zweck hunn ech e Plugin mam Numm Better Search Replace op mengem benotzt wp_posts Dësch wéi follegt:
Wann Dir dëst iwwerhaapt maacht, ass et besser et ze maachen ier Dir den Editor ännert wéi et am Schrëtt 2 beschriwwe gëtt, oder Dir kritt Image Tags mat Duplizéierungsattributer. Erëm, nëmmen dat eemol.
A wann dëst Attribut ni Mainstream Support kritt, kënnt Dir et ëmmer vun Äre Posts erofhuelen andeems Dir d'Sich ausféiert & ersat am Géigendeel.
Méi einfach Alternativ fir All Biller a Posts
Awer loosst eis soen datt Dir e gudden Cache Plugin benotzt fir datt d'Käschte fir duerch de Posttext ze sichen mat all Säitebelaaschtung net gëllen. An deem Fall kënnt Dir benotzen den_Inhalter Filter fir all Post no Bild Tags ze sichen an de faulen Lueden Attribut op der Flucht ze packen. Füügt einfach déi folgend Funktioun op Är functions.php Datei:
add_filter ('the_content', 'lazy_load_images'); Funktioun lazy_load_images ($ content) {if (is_single () && in_the_loop () && is_main_query ()) {$ content = str_replace ('/>', 'loading = "faul" />', $ content); } zréck $ Inhalt; }
Wann Dir dës Approche benotzt, kënnt Dir Schrëtt 2 & 3 iwwersprangen well dës Funktioun automatesch derbäisetzt loading = "liddereg" Attribut fir all Bild op all Post.
4. Lazy Loading fir Kommentar Avataren
Kommentare sinn normalerweis um Enn vun der Säit, sou datt d'Benotzer-Avatare e gutt Zil fir liddereg Luede sinn. Dir kënnt dëse Filter an Ärem functions.php:
add_filter ('get_avatar', 'lazyavatar', 1, 1); Funktioun lazyavatar ($ avatar) {$ avatar = str_replace ('img', 'img loading = "faul"', $ avatar); Retour $ Avatar; }
Oder, wann Äert Thema e personaliséierte Réckruff benotzt, kënnt Dir de fannen get_avatar () Funktioun an derbäi loading = "liddereg" bis et duerch den extra_attr Parameter.
Wann Dir e méi modernt Kommentarsystem wéi Disqus benotzt, ass dat net néideg.
5. Lazy Loading Youtube Videos
Eng Saach déi ech bis elo net erwähnt hunn ass datt liddereg Lueden och op iframes kann ugewannt ginn. Wann Dir e Link op e Video op Youtube (oder aneren ënnerstëtzte Site) pecht, gëtt Wordpress automatesch an en Iframe fir en op Ärem Post anzebannen. Fir et faul ze lueden, kënne mir de embed_oembed_html filter wéi follegt:
Funktioun lazyoutube ($ html) {$ html = str_replace ('iframe', 'iframe loading = "faul"', $ html); $ html = 'div class = "Videocontainer">'. $ html. '/ div>'; zréckginn $ HTML; } add_filter ('embed_oembed_html', 'lazyoutube', 10, 1);
D'Verbesserung verifizéieren
Et gi verschidde Weeër fir ze testen ob faul Luede funktionnéiert. Am einfachsten ass Är Websäit an der leschter Versioun vu Chrome opzemaachen, d'Entwécklerinstrumenten (Ctrl + Shift + I) opzehuelen, a wiesselen op d'Netzwierk Tab. Navigéiert op eng laang Säit mat ville Biller a scroll down. Dir sollt gesinn datt d'Biller ganz ënnen net luede bis Dir méi niddereg scrollt.
Loosst Iech net alarméieren wann d'Biller direkt lueden! De Schwell bei deem Chrome e Bild lued hänkt vu verschidde Faktoren abegraff, och d'Verbindungsgeschwindegkeet. Anekdotesch schéngt d'Distanz och däitlech méi héich wéi JavaScript-baséiert Léisungen, sou datt Dir vläicht e fanne wëllt wierklech laang Säit fir ze testen.
Eng alternativ Manéier ass en Audit iwwer déiselwecht Entwéckler Tools ze starten oder de webbaséierten PageSpeed Insights Test ze benotzen. Kuckt no der "Defer offscreen images" Noriicht, déi an der Rubrik "Opportunities" kënnt wann se nach net implementéiert sinn, an an der "Passed audits" Sektioun wann faul Luede funktionnéiert.
Elo hutt Dir e puer Millisekonnen vun der Wordloads Laaschtzäit raséiert. Gutt gemaach!
