WordPress.org

Svenska

Skaffa WordPress
WordPress.org

Plugin Directory

Native Lazyload

Det här tillägget har inte testats med någon av de 3 senaste huvudversionerna av WordPress. Det kanske inte längre underhålls och kan ha kompatibilitetsproblem när det används tillsammans med nyare versioner av WordPress.

Native Lazyload

Av Google
Ladda ner

Beskrivning

Använder lazy-load för att hämta mediefiler med hjälp av den motsvarande inbyggda webbläsarfunktionen. Läs mer om det nya attributet loading eller besök ärende för ändring av WordPress-kärnan man diskuterar introduktionen av samma lösning direkt i WordPress-kärnan.

Om attributet loading inte stöds av webbläsaren använder tillägget en reservlösning i JavaScript, baserat på IntersectionObserver. Om JavaScript är avstängt med attributet loading faktiskt stöds av webbläsaren kommer en noscript-variant för respektive element att läggas in, där även attributet loading inkluderas, utan några ytterligare ändringar.

”Native” (inbyggd från start) innebär ”snabb”

Om du har hittat hit vet du antagligen hur avgörande prestandan är för besökarens upplevelse och webbplatsens framgång. Du vet troligen också att lazy-load är en viktig funktion för att förbättra samma upplevda prestanda. Tyvärr har dock de funktioner som hittills funnits för lazy-load skapat en del extra belastning i sig själva, eftersom de är beroende av att specialanpassad JavaScript-logik laddas, tolkas och körs, något som i sig kan ha mer eller mindre påverkan på prestandan.

Detta tillägg lyckas till stor del komma tillrätta med detta mönster. Det utnyttjar det nya attributet loading som lyfter lazy-load till en funktion som är inbyggd i själva webbläsaren. Attributet stöds redan av Chrome och kommer så småningom att dyka upp i andra webbläsare. Att lösningen är ”inbyggd” (native) innebär att den inte förlitar sig på någon specialanpassad JavaScript-logik och därmed inte kräver lika stora resurser. Och ”färre resurser” innebär ”snabbare”.

Sist men inte minst – något att ha i åtanke är att detta tillägg kommer efterhand att ge allt bättre resultat, i takt med att allt fler webbläsare inför stöd för attributet loading.

Användning

Du behöver bara aktivera tillägget, så kommer alla dina bilder och iframes som finns i innehållet för olika inlägg att laddas via lazy-load.

Erkännande

Detta tillägg baseras delvis på logik från WP Rig och rekommendationer från web.dev och developers.google.com.

Installation

  1. Ladda upp hela mappen native-lazyload till katalogen /wp-content/plugins/ eller installera tillägget via adminpanelen i WordPress.
  2. Aktivera tillägget via menyn ”Tillägg” i WordPress.

Vanliga frågor

Var hittar jag inställningarna för tillägget?

Det finns ingen sida med inställningar för detta tillägg. Det börjar fungera direkt så snart du har aktiverat det.

Hur kan jag förhindra att en viss bild eller ifram laddas via lazy-load?

Du kan lägga till klassen skip-lazy för att berätta för tillägget att du inte vill använda lazy-load för just denna bild eller denna iframe.

Detta tillägg laddar ju en exta JavaScript-fil! Så kan vi inte ha det.

Det är en helt korrekt invändning. Observera att tillägget laddar JavaScript-filen endast som en reservlösning om besökarens webbläsare fortfarande saknar stöd för det inbyggda attributet loading. Filen innehåller logik för att trots detta hämta bilden på rätt sätt utan det inbyggda stödet. Om du istället hellre förlitar dig enbart på attributet loading och inte vill inkludera någon reservlösning kan du enkelt inhibera skriptet genom att lägga till raden add_filter( 'native_lazyload_fallback_script_enabled', '__return_false' ) någonstans i koden för din webbplats.

Fungerar detta med AMP?

Om du använder AMP behövs faktiskt inte detta, eftersom AMP redan från början utnyttjar lazy-load på ett intelligent sätt. Men för säkerhets skulle är tillägget trots detta byggt så att det inte kommer att störa kompatibiliteten med AMP.

Vart kan jag skicka support-frågor?

För vanliga supportfrågor ber vi att du använder tilläggets supportforum hos wordpress.org. Om du skulle stöta på något tekniskt problem och redan vet hur det går att lösa, kan du istället öppna ett ärende på Github.

Hur kan jag bidra till tillägget?

Om du har några idéer om hur tillägget kan förbättras eller något fel kan rättas är du välkommen att öppna ett ärende eller en ”pull request” i tilläggets filförvar på Github. Vi ber då att du följer våra riktlinjer för hur man bidrar till utvecklingen.

Du kan också bidra till tillägget genom att översätta det. Det är bara att gå till translate.wordpress.org för att komma igång.

Recensioner

Native lazy loading – the only viable lazy loading solution

31 december 2020
This plugin adds loading=”lazy” and then, the browser lazy loads the image. I think that native lazy loading performed by the browser is the only viable solution for lazy loading. For many years, I tried to implement lazy loading on my websites. I faced many issues. Once images were not crawled. Once my website was penalized because of cloaking. Versions differed depending on the client. I am enough with javascript scripts that slow down the pageload and negatively impact the pagespeed insight. I think that for now and in the future, the native lazy loading is the only way to go for lazy loading.

It does not improve my sites

27 februari 2020
First, did not break my site and it did lazyload most of the page images. It does not lazyload images if they are served from a different host. Example, unbounce, etc. I will add another caveat, all of my images and their versions are always carefully resized and highly compressed. Checked with lighthouse and my score took a hit downwards. 13 points down on performance score. I tested on my Staging area, uncached. FCP went from 2.1s to 4.2s, all of the other metrics, including time to interactive, CPU idle, speed index and First Meaningful Paint took a dive. I will chuck this to I was already hyperoptimized and lazy loading is not truly needed on my site/s. But I would advise others to try it out (not on their live site) and test speed with Google Lighthouse before and after.

Does what it says

17 februari 2020
Seems to work well. On browsers that don’t support lazy loading, it doesn’t seem to load the images as soon as I would like. As in there can be a bit of a delay between scrolling and the image appearing on screen. Not to bad though. Not going to worry about it as native image loading is the way of the future and will be implemented into more browsers.
Läs alla 31 betyg

Bidragsgivare och utvecklare

”Native Lazyload” är programvara med öppen källkod. Följande personer har bidragit till detta tillägg.

Bidragande personer

”Native Lazyload” har översatts till 16 språk. Tack till översättarna för deras bidrag.

Översätt ”Native Lazyload” till ditt språk.

Intresserad av programutveckling?

Läs programkoden, kika på SVN-filförvaret eller prenumerera på utvecklarloggen via RSS.

Ändringslogg

1.0.2

  • Fix broken images which are using data URI scheme (e.g. base64-encoded images). Props ieim.
  • Fix images in IE 11 not being loaded until the user starts scrolling. Props Soean.
  • Fix image loading script not working in IE10 and other browsers that do not support dataset.

1.0.1

  • Improve compatibility with other plugins by using more specific class and only adding it for JS fallback.
  • Run lazy-load script on DOMContentLoaded when necessary to improve compatibility with plugins like Autoptimize.
  • Do not transform elements inside an AJAX response due to lack of predictability of the context and script execution.

1.0.0

  • Första utgåvan

Meta

Betyg

Se alla
Logga in för att skicka in en recension.

Bidragande personer

Support

Har du något att säga? Behöver du hjälp?

Visa supportforum