Indhold
- Hvad er Native Lazy-Loading?
- Opdatering fra marts 2020 (læs først!)
- Native Lazyload Plugin
- 1. Tilføj Lazy Loading-attribut til fremhævede billeder og vedhæftede filer
- 2. Tilføj Lazy Loading-attribut til nye billeder inde i indlæg
- 3. Lazy Loading for eksisterende billeder i stillinger
- Lettere alternativ til alle billeder i indlæg
- 4. Lazy Loading for Kommentarer-avatarer
- 5. Lazy Indlæser Youtube-videoer
- Bekræftelse af forbedringen
Hvad er Native Lazy-Loading?
Når en browser åbner en webside, indlæser den normalt hvert billede på den - også billeder langt under det synlige område eller visningsport. Nogle besøgende ruller muligvis ikke længere ned på siden, hvilket betyder, at båndbredden, der bruges til at indlæse de usynlige billeder, er spildt.
I en løbende søgen efter hurtigere internet kom udviklere med smarte måder at udsætte indlæsningen af billeder uden for visningen, indtil brugeren ruller i nærheden af dem. Alle disse løsninger krævede imidlertid JavaScript, hvilket tilføjer sin egen overhead og bryder billeder helt for dem, der gennemsøger JavaScript deaktiveret.
Situationen ændrede sig med ankomsten af Chrome 76. Fra den version og fremefter understøtter Chrome og Chromium-afledte browsere indfødte doven indlæsning. Alt du skal gøre er at tilføje en enkelt attribut til dine billedkoder:
img src = "cutecat.webp" loading = "doven" />
Det er så simpelt. Og hvis en anden browser endnu ikke understøtter den nye attribut, indlæses billederne normalt uden skade.
Nu fortæller jeg dig, hvordan du automatisk tilføjer disse attributter til dine billeder i Wordpress (for det meste).
Opdatering fra marts 2020 (læs først!)
Der har været spændende udvikling siden denne artikel blev skrevet. Oprindeligt billede doven indlæsning er blevet en del af den officielle HTML-spec. Browsersupport er forbedret. Og måske vigtigst af alt er, at native lazy-loading skal flettes ind i WordPress-kernen fra version 5.5.
Rent praktisk betyder det det ingen ekstra indsats vil din del være nødvendig efter WP version 5.5 ankommer i august 2020. Indtil da kan du teste native lazy-loading ved hjælp af de ændringer, der er beskrevet nedenfor. Bare husk at hej bliver irrelevant om flere måneder (og hurra for det).
Native Lazyload Plugin
Først og fremmest kan Googles eget Native Lazyload-plugin gøre alt arbejdet for dig. I skrivende stund er det flot med enstjernede anmeldelser, der hævder, at det brød deres websted, men jeg er sikker på, at det til sidst bliver løst. Selv da vil jeg ikke bruge det, fordi jeg er en curmudgeon og undgår at installere plugins så meget som muligt, men hvis du leder efter den hurtigste og nemmeste løsning, er det det.
1. Tilføj Lazy Loading-attribut til fremhævede billeder og vedhæftede filer
Tilføjelse af loading = "doven" attribut til fremhævede billeder (tidligere kaldet post miniaturer), gallerier og billeder på vedhæftede sider er let ved hjælp af wp_get_attachment_image_attributter krog. Kopier og indsæt koden nedenfor i dine temaer funktioner.php fil:
add_filter ('wp_get_attachment_image_attributes', 'add_lazy_load', 10, 3); funktion add_lazy_load ($ attr, $ attachment, $ size) {if (! array_key_exists ('loading', $ attr)) {$ attr ['loading'] = 'doven'; } returner $ attr; }
Kudos til akkis på Wordpress Code Reference for dette uddrag.
Du kan kontrollere, at dette fungerer ved at inspicere kildekoden til et fremhævet billede eller en vedhæftet side på dit websted:
2. Tilføj Lazy Loading-attribut til nye billeder inde i indlæg
Koden ovenfor påvirker ikke enkeltbilleder tilføjet via posteditor. Til det har jeg brugt image_send_to_editor krog som vist nedenfor. Føj det til funktioner.php ligesom før.
add_filter ('image_send_to_editor', 'lazyloading', 10, 8); funktion lazyloading ($ html) {$ html = str_replace ('/>', 'loading = "doven" />', $ html); returner $ html; }
Hvad dette gør, er simpelthen at tackle loading = "doven" attribut når der indsættes et billede i et indlæg via "Tilføj medie". Når du skifter til "Tekst" i Classic Editor eller klikker på de tre prikker og derefter "Rediger som HTML" i Gutenberg, ser du noget i denne retning:
Som du måske har gættet, påvirker dette kun nyindsatte billeder. Gallerier og post miniaturer til side, eksisterende billeder i ældre indlæg modtager ikke behandlingen med doven indlæsning. Der er en god grund til dette: Billeder indsat i indlæg er i det væsentlige en del af indlægsteksten og kan ikke filtreres direkte.
Du kan selvfølgelig bruge en funktion, der søger i indholdet af et helt indlæg og klæber til den dovne loading-attribut til hver img> tag det finder, men det forekommer mig ineffektivt. Processen skal gentages hver gang en besøgende ser et indlæg, lægger unødig belastning på din server og bremser dit websted, hvilket er det modsatte af det, vi prøver at gøre. Denne tilgang er meget lettere, men så jeg har tilføjet en sådan funktion længere nedenfor, hvis du vil bruge den.
3. Lazy Loading for eksisterende billeder i stillinger
For at håndtere eksisterende billeder i ældre Wordpress-indlæg kan jeg ikke rigtig tænke på noget smartere end at lave en simpel søgning og udskiftning. (Hvis du har en bedre idé, så del den i kommentarerne!) Dette virker måske ikke meget elegant, og det koder hårdt for loading = "doven" attribut til indlæg, men det skal kun gøres en gang.
Til dette formål har jeg brugt et plugin kaldet Better Search Replace på min wp_posts tabel som følger:
Hvis du overhovedet skal gøre dette, er det bedst at gøre det, før du redigerer editoren som beskrevet i trin 2, ellers får du billedkoder med duplikerende attributter. Igen skal du kun gøre dette en gang.
Og hvis denne attribut aldrig får mainstream-understøttelse, kan du altid fjerne den fra dine indlæg ved at udføre søgning & erstat i omvendt rækkefølge.
Lettere alternativ til alle billeder i indlæg
Men lad os sige, at du bruger et godt cacheplugin, så omkostningerne ved at søge i postteksten med hver sideindlæsning ikke gælder. I så fald kan du bruge indholdet filter for at søge i hvert indlæg efter billedkoder og tackle den dovne loading-attribut på farten. Du skal blot tilføje følgende funktion til din funktioner.php fil:
add_filter ('the_content', 'lazy_load_images'); funktion lazy_load_images ($ content) {if (is_single () && in_the_loop () && is_main_query ()) {$ content = str_replace ('/>', 'loading = "doven" />', $ content); } returnere $ indhold; }
Hvis du bruger denne fremgangsmåde, kan du springe trin 2 & 3 over, fordi denne funktion automatisk tilføjer loading = "doven" attribut til hvert billede på hvert indlæg.
4. Lazy Loading for Kommentarer-avatarer
Kommentarer findes normalt nederst på siden, så brugeravatarer er et godt mål for doven indlæsning. Du kan bruge dette filter i din funktioner.php:
add_filter ('get_avatar', 'lazyavatar', 1, 1); funktion lazyavatar ($ avatar) {$ avatar = str_replace ('img', 'img loading = "doven"', $ avatar); returnere $ avatar; }
Eller hvis dit tema bruger en brugerdefineret tilbagekaldning af kommentarer, finder du muligvis get_avatar () funktion og tilføj loading = "doven" til det gennem ekstra_attr parameter.
Hvis du bruger et mere moderne kommentarsystem som Disqus, er dette ikke nødvendigt.
5. Lazy Indlæser Youtube-videoer
En ting, jeg hidtil ikke har nævnt, er, at doven belastning også kan anvendes på iframes. Når du indsætter et link til en video på Youtube (eller et andet understøttet websted), omdanner Wordpress det automatisk til en iframe for at integrere det i dit indlæg. For at få det til at belastes dovent kan vi bruge embed_oembed_html filtrer som følger:
funktion lazyoutube ($ html) {$ html = str_replace ('iframe', 'iframe loading = "doven"', $ html); $ html = 'div class = "video-container">'. $ html. '/ div>'; returner $ html; } add_filter ('embed_oembed_html', 'lazyoutube', 10, 1);
Bekræftelse af forbedringen
Der er flere måder at teste, om doven belastning fungerer. Det nemmeste er at åbne dit websted i den nyeste version af Chrome, aktivere udviklerværktøjerne (Ctrl + Shift + I) og skifte til fanen Netværk. Naviger til en lang side med mange billeder, og rul ned. Du skal se, at billederne længst nede ikke indlæses, før du ruller lavere.
Vær ikke bange, hvis billederne indlæses med det samme! Tærsklen, hvormed Chrome indlæser et billede, afhænger af flere faktorer, herunder forbindelseshastighed. Anekdotisk ser afstanden også markant højere ud end JavaScript-baserede løsninger, så du vil måske finde en virkelig lang side til test.
En alternativ måde er at starte en revision via de samme udviklerværktøjer eller bruge den webbaserede PageSpeed Insights-test. Se efter meddelelsen "Udskyd billeder uden for skærmen", som vises i afsnittet "Muligheder", hvis den endnu ikke er implementeret, og i afsnittet "Bestået kontrol", hvis doven indlæsning fungerer.
Nu har du barberet et par millisekunder fra dit Wordpress-websteds indlæsningstid. Godt arbejde!
