lazysizes

Beskrivelse

lazysizes is a WordPress plugin for the high performance, SEO-friendly and auto-triggering lazyloader with the same name. Support includes images (including responsive images with srcset and the picture tag), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. Additionally, you can add low-res/blurry placeholder images using the Blurhash algorithm.

This plugin works by loading the lazysizes script and replacing the src and srcset attributes with data-src and data-srcset on the front end of a WordPress site. When a post or page is loaded, the lazysizes javascript will load the images, iframes etc. dynamically when needed. All you need to do is to enable the plugin, and possibly tweak a few settings to your liking.

Takk til aFarkas og bidragsyterne for å gjøre lazysizes-biblioteket mulig, og for å la meg bruke det samme navnet.

Også takk til dbhynds, som lagde Lazy Load XT-utvidelsen denne utvidelsen er basert på.

FAQ

Hvorfor blir ikke innlastingen av bildene mine forsinket?

Lazysizes filtrerer bilder som blir lagt til på siden ved å bruke the_content, post_thumbnail_html, widget_text og get_avatar. Hvis bildene dine blir lagt til med en annen funksjon (for eksempel wp_get_attachment_image), kan ikke lazysizes filtrere de som standard. Det er flere muligheter for å endre hva lazysizes filtrerer, som å slå på filtrering av acf_the_content for WYSIWYG-innhold fra Avanserte egendefinerte felter, og å aktivere støtte for wp_get_attachment_image (noe begrenset, se under). For ikke-støttede tilfeller kan du også filtrere HTML-koden selv, ved å gi den som parameter til get_lazysizes_html.

Denne utvidelsen har støtte for wp_get_attachment_image, men denne er deaktivert som standard siden utvidelsen ikke kan legge til en reserveløsning for når JavaScript er utilgjengelig, noe som ville gjort bilder usynlige for brukere i denne situasjonen. Vi kan ikke fikse dette automatisk, men du kan ordne det selv med noen få endringer i koden som bruker wp_get_attachment_image. For eksempel, hvis et tema har: echo wp_get_attachment_image($id);, kan du endre det til følgende for å forsinke innlasting av bilder, med reserveløsning ved mangel på JavaScript hvis dette er aktivert i innstillingene: echo get_lazysizes_html( wp_get_attachment_image($id) );

If a popular plugin is incompatible and has a filter for modifying the HTML output, lazysizes could most likely get support for that plugin. In that case, feel free to ask! If the plugin has no such way to filter the output, they would have to add one for lazysizes to leverage.

What is the Blurhash placeholder feature, and how do I use it?

The low-res Blurhash placeholder feature generates a text string for each image using the Blurhash algorithm. This string includes all the information necessary for the Blurhash script running in the visitor’s browser to decode it into a blurry image, which will be shown while the real image is loading.

Because the final image placeholder is generated in JavaScript, users on faster internet connections can sometimes see the full image directly for images that are above the fold. Images lower down on the page will have a placeholder ready by the time the user reaches them.

The placeholder Blurhash string is not computed on page load, as it can in some cases take several seconds to do so. Instead, it will need to be pregenerated. As long as Blurhash is enabled in the settings, all new images uploaded will have a Blurhash string generated automatically. Additionally, you can manage the Blurhash string for each attachment individually in the Media Library. There is an option to generate and store Blurhash strings on page load, which can be used to easily generate Blurhash strings for lots of images by visiting the page they’re shown on. Just remember to turn that option back off, or your visitors may be slightly upset.

For technical reasons, Blurhash is only supported for local image attachments, and at the moment is not officially supported for picture elements. Images without a Blurhash string will behave just like they do with the option turned off. Blurhash placeholders work with the existing effects, like fade-in, but in some cases the perfect fade-in effect may not be possible. The Blurhash placeholder will still fade in, but it might not fade when transitioning to the full image. This is because of a few edge cases not supported by the advanced Blurhash reveal effect.

The advanced Blurhash reveal effect works by creating an additional image element positioned under the regular image. This gives the best result in combination with the fade effect, but might not support all WordPress themes. Safeguards exist to prevent using the advanced effect when not supported (by falling back to the slightly imperfect fade effect), but in some cases problems may still occur. If you see this type of problem, you can disable the advanced Blurhash reveal effect in the settings. Feel free to contact me on the support forums, and I may be able to work out what was going wrong.

There’s a plugin called Lazy Load XT. Why does this one look a bit similar?

The PHP code for this plugin was originally based on that of Lazy Load XT, with many changes since. The main difference is that this plugin is using a completely different lazy loading library (lazysizes), with no jQuery dependency. Additionally, this plugin is actively maintained and has advanced features like Blurhash support.

Takk til dbhynds for Lazy Load XT-utvidelsen. Uten det prosjektet ville ikke dette vært mulig.

Why is this plugin called lazysizes, the same as the JS library it uses?

Det er flere grunner:

  1. Jeg liker navnet.
  2. Det er et passende navn, siden det får deg til å tenke på forsinket innlasting.
  3. Jeg håper dette vil hjelpe folk med å oppdage utvidelsen. Jeg prøvde opprinnelig å søke etter en WordPress-utvidelse med dette biblioteket selv, og andre folk vil kanskje gjøre det samme.

This plugin is not affiliated with the lazysizes project, but I asked for, and got, permission by aFarkas to use the name. That’s as far as any connection between the two go.

Vurderinger

30. april, 2019
Works great, even with picture tags! The fade-in effect of the lazyloaded images is really nice! And the developer is really active and helped me a lot! Thanks again, Patrick 🙂
22. desember, 2018
As a developer I knew the lib js that does a very good job. So I'm not surprised to have a plugin that does a good job too. (Except, video loading does not work)
1. november, 2018
I already tested some other plugins against this plugin for my site load speed and request counts. This plugin is greatly reducing my page load speed I really don't know why they couldn't beat this plugins performance on gtmetrix. Performance is really high as author mentioned!
3. september, 2018
LazySizes is lazyloading done right. I've used it before and was pleased to see that it's now available as a WordPress plugin. For me, this is the best lazy-load script on the planet. I've tried many WordPress plugins and all failed except LazySlides. Excellent!
Les alle 6 vurderinger

Bidragsytere og utviklere

“lazysizes” er programvare med åpen kildekode. Følgende personer har bidratt til denne utvidelsen.

Bidragsytere

“lazysizes” har blitt oversatt til 2 språk. Takk til oversetterne for deres bidrag.

Oversett “lazysizes” til ditt språk.

Interessert i utvikling?

Bla gjennom koden, sjekk ut SVN-repositoriet, eller abonner på utviklingsloggen med RSS.

Endringslogg

1.3.3

  • Add support for WordPress 5.5 and native lazy loading (see point below).
  • Add option for full native lazyloading, which gives the browser full control over when to load the image. Not compatible with the old native lazy load option, which only gives the browser partial control over loading. Currently only supports images, other elements will be lazyloaded like previously.
  • Add support for transforming HTML using single quotes instead of double quotes for attributes.
  • Fix lazy loading for commenter avatars. This feature had actually been disabled for a while, because it was broken. The new support for single quote attributes fixes this.
  • Fix positioning of the blurhash placeholder when the image is directly inside a link element.
  • Fix Blurhash integration in the Media Library being incompatible with certain other plugins extending this area using JS. This mainly fixes compatibility with the plugin Smush, but should make other plugins more likely to work as well.
  • Fix incompatibilities with certain older versions of WordPress. Please note that it is always recommended to use the latest version of WordPress, and that the next major version of this plugin will require a more up to date WordPress installation than it does now.

1.3.2

A partial deploy caused by human error led to a fatal error due to missing files for versions v.1.3.0 and v1.3.1. This has been fixed, along with the following:

  • Fix warning caused by missing check for metadata existing.
  • Fix script for the attachment page being minified even when SCRIPT_DEBUG is true.
  • Properly implement Blurhash management support in the post editor.
  • Fix non-existent CSS stylesheet being enqueued when no lazy load effect was selected.
  • Improve logic for finding attachment id from an image url.
  • Fix issue with minified lazysizes script.

1.3.0

Note that this is the last release that will support PHP 5.6 and WordPress 3.9. The next release will most likely require PHP 7.2 and WordPress 4.5 or newer.

  • Add support for generating low-res placeholder images using Blurhash, which stores the placeholder as a short text string. Computing this string does not happen on page load, as it’s rather expensive, but when the blurhash placeholder option is enabled it can be controlled individually for each attachment, and new attachments will have a placeholder generated automatically. For more information, see the FAQ and the settings page.
  • Add custom lazysizes script and styles feature, which uses scripts and styles optimized for size and fewer requests.
  • Improve aspectratio calculation. Local images no longer need both width and height set, only one of them, since the aspect ratio can be calculated based on attachment metadata.
  • Various performance tweaks.
  • Add experimental option for skipping adding a src attribute to images, and letting the browser load the image progressively instead.
  • Fix issue where a picture element with an excluded class could still be lazy loaded.
  • Upgrade lazysizes library to 5.2.2.

1.2.1

  • Forbedre logikk for å hoppe over transformering av bilder inne i noscript-elementer. Skal fikse kompatibilitetsproblemer med Envira Gallery sin noscript-reserveløsning. Takk til snippet24 for rapportering.
  • Fiks at standardinnstillinger ikke er aktivert. Hvis du er påvirket av denne feilen, se en liste over anbefalte standardinnstillinger her. Takk til snippet24 for rapportering.

1.2.0

  • Oppgrader lazysizes-biblioteket til versjon 5.2.0.
  • Legg til valgfri støtte for Avanserte egendefinerte felter.
  • Utvidelsen bruker nå namespaces for PHP-klasser.
  • Bekreftet at utvidelsen virker med WordPress 5.3 og PHP 7.4.

1.1.0

  • Oppgrader lazysizes-biblioteket til versjon 5.0.0
  • Legg till eksperimentell støtte for innebygd forsinket innlasting.
  • Fiks feil under ajax-behandling. Takk til @eastgate for rapportering.
  • Fiks PHP-advarsel på enkelte sider, blant annet hendelser-siden fra utvidelsen The Events Calendar. Takk til @julian_wave for rapportering.

1.0.0

Stor takk til martychc23 og dutze for deres hjelp og tålmodighet. Uten dere ville ikke denne versjonen blitt så god som den er.

  • Ordentlig støtte for picture-elementer, grunnet stor etterspørsel. Stor restrukturering av koden som transformerer sidens HTML var nødvendig for å gjøre denne støtten mulig.
  • Forbedre og fiks støtte for audio/video-elementer. Utvidelsen håndterer nå preload-attributten og lar src-attributten være som den er på source-elementer inne i video/audio.
  • Valgfri støtte for get_attachment_image. Merk at utvidelsen ikke kan legge til reserveløsning for brukere uten JavaScript for bilder som lastes inn på denne måten.
  • Legg til innstilling for å aktivere/deaktivere noscript-reserveløsningen
  • Fiks utvidelsens handlingslenker
  • Flere feilfikser for å forbedre kompatibilitet

0.3.0

  • Legg til støtte for aspectratio-utvidelsen for lazysizes, som gjør at bilder har riktig høyde mens de lastes inn. Takk til Teemu Suoranta (@teemusuoranta) for implementering.
  • Hvis Javascript er skrudd av, vil bildeelementet som normalt ville vært lastet inn forsinket nå være skjult. Takk til @diegocanal for rapportering og fiksing av denne feilen.

0.2.0

  • Oppdater lazysizes-biblioteket til versjon 4.1.5
  • Fiks forsinket innlasting av elementer uten en klasse-attributt, for eksempel noen iframe-innbygginger
  • Fiks innlasting av oversettelser

0.1.3

  • Fjern ubrukt kode for avanserte innstillinger

0.1.2

  • Fiks innlasting av tekstdomene

0.1.1

  • Uppdaterte readme

0.1.0

  • Opprinnelig versjon av utvidelsen