Lazy Load – Optimize Images

Beskrivning

Lazy Load by WP Rocket visar bilder och/eller iframes på en sida endast när de är synliga för användaren. Detta minskar antalet HTTP-förfrågningsmekanismer och förbättrar laddningstiden.

Detta tillägg fungerar på miniatyrer, alla bilder i ett inläggsinnehåll eller i en widgettext, profilbilder, smilies och iframes. Inget JavaScript-bibliotek, som jQuery, används och skriptets storlek är mindre än 10KB.

You can also replace Youtube iframes by a preview thumbnail to further speed up the loading time of your website.

Beroenden

Lazyload-skript: https://github.com/verlok/lazyload

Relaterade tillägg

  • Imagify: Bästa bildoptimeraren för att snabba upp din webbplats med komprimerade bilder.
  • WP Rocket: Bästa cache-tillägget för att snabba upp din WordPress-webbplats.
  • Heartbeat Control by WP Rocket: Heartbeat Control by WP Rocket: Best plugin to control the WordPress Heartbeat API and reduce CPU usage.

Installation

  1. Ladda upp hela mappen rocket-lazy-load till katalogen /wp-content/plugins/
  2. Aktivera tillägget via menyn ”Tillägg” i WordPress

Vanliga frågor

How can I use native lazyload?

To use native lazyload on browsers supporting this feature, you need to use the following line:

add_filter( 'rocket_use_native_lazyload', '__return_true' );

Browsers that do not support native lazyload will use the JS-based solution as before.

Hur kan jag inaktivera Lazy Load på vissa sidor?

Du kan använda filtret do_rocket_lazyload.

Here is an example to put in functions.php files that disable lazyload on posts:

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
    if ( is_single() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}

Hur kan jag inaktivera Lazy Load på vissa bilder?

Simply add a data-no-lazy="1" property in you img or iframe tag.

You can also use the filters rocket_lazyload_excluded_attributes or rocket_lazyload_excluded_src to exclude specific patterns.

For iframes, the filter is rocket_lazyload_iframe_excluded_patterns.

How can I change the threshold to trigger the load?

Du kan använda filtret rocket_lazyload_threshold.

Code sample:

function rocket_lazyload_custom_threshold( $threshold ) {
    return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

Jag använder tillägg X och mina bilder visas inte längre

Some plugins are not compatible without lazy loading. Please open a support thread, and we will see how we can solve the issue by excluding lazy loading for this plugin.

How can I lazyload a background-image?

The plugin will automatically lazyload background-images set with a style attribute to a div element:

<div style="background-image: url(image.jpg);">

You can also apply it manually. The element you want to apply lazyload on must have this specific markup:

<div class="rocket-lazyload" data-bg="url(../img/image.jpg)"></div>

The element must have the class rocket-lazyload, and a data-bg attribute, which value is the CSS url for the image.

Recensioner

17 juni, 2020
My GT metrix scores are 100% without lazy load. The newest Google Page Speed critera made me look for a lazy load plugin. This one is the Only one that occasionally brings me to 100 on Page Speed. Unfortunately, it breaks 2 of my footer scripts and tiny thumbnail pics for them. I doubt any other plugin will bring my site up to this proportion,,,,,but what can you do? GREAT PLUGIN
8 maj, 2020
So far, so good. Love that it lazy loads background images too.
30 april, 2020
It couldn't be simpler. It took 5 seconds to set up and immediately reduced requests from 70 to 48.
Läs alla 107 betyg

Bidragsgivare och utvecklare

”Lazy Load – Optimize Images” är programvara med öppen källkod. Följande personer har bidragit till detta tillägg.

Bidragande personer

”Lazy Load – Optimize Images” har översatts till 6 språk. Tack till översättarna för deras bidrag.

Översätt ”Lazy Load – Optimize Images” till ditt språk.

Intresserad av programutveckling?

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

Ändringslogg

2.3.3

Enhancement: Add data-skip-lazy and skip-lazy class to exclusions list as part of the interoperability initiative between lazyload plugins
Enhancement: Use native lazyload only if filter rocket_use_native_lazyload is true
Enhancement: Apply lazyload on background images set on figure elements
Bugfix: Correctly add the rocket-lazyload class when class attribute is empty on an element with a background image
Bugfix: Correctly replace YouTube iframe with preview image when using relative protocol
Bugfix: Preserve youtube-nocookie.com during LazyLoad

2.3.2

Bugfix: Incorrect characters used in Youtube thumbnail HTML code

2.3.1

Bugfix: Prevent a conflict with WP Rocket
Bugfix: apply loading=”lazy” on Youtube thumbnail
Bugfix: Add autoplay attribute on iframe loaded with Youtube thumbnail

2.3

Enhancement: Add support for browser native lazyload
Bugfix: Prevent broken image in some cases for picture element
Bugfix: Prevent wrong lazy attributes for srcset and sizes on an image inside a picture element

2.2.3

  • Enhancement: Improve compatibility for the picture element
  • Enhancement: Apply lazyload on background images set on section, span and li elements
  • Enhancement: also pass $width and $height values to the rocket_lazyload_placeholder filter
  • Bugfix: Use 0 instead of 1 for the default placeholder dimensions to improve compatibility
  • Bugfix: Improve infinite scroll support
  • Bugfix: Exclude Enfold avia-background-fixed background images and data-large_image from lazyload

2.2.2

  • Bugfix: Auto-exclude data-height-percentage attribute to prevent display issues
  • Bugfix: Correctly handle responsive videos using fitVids again

2.2.1

  • Enhancement: add a way to customize the lazyload script options
  • Bugfix: Prevent error on Internet Explorer 11
  • Bugfix: Prevent conflict with WooCommerce variation swatches
  • Bugfix: Prevent empty src when the image is an inline base64
  • Bugfix: Prevent issue when the original src attribute uses single quotes

2.2

  • Enhancement: Update lazyload script to the latest version
  • Enhancement: Use the dimensions of the original image for the placeholder size when possible, to reduce content reflow
  • Enhancement: Ignore images using the new loading attribute introduce by Chrome for browser-native lazyload

2.1.5

  • Bugfix: Prevent matching with the wrong data when a data-style attribute is on a div for background images
  • Remove data-cfasync=”false” by default
  • Enhancement: Add filter rocket_lazyload_script_tag to modify the lazyload script HTML if needed
  • Enhancement: Add data-no-minify attribute to the lazyload script tag to prevent it from being combined by JS combiners
  • Enhancement: Improve MutationObserver code to only call the lazyload update method if an image/iframe or element with .rocket-lazyload is contained in the new node(s) added to the DOM

2.1.4

  • Regression fix: Correctly exclude scripts from lazyload again

2.1.3

  • Bugfix: Ignore content inside noscript tags to prevent modifying them and causing some display issues

2.1.2

  • Enhancement: Update lazyload script to the latest version
  • Enhancement: Add a way to lazyload the Youtube thumbnail image
  • Enhancement: Add width and height attributes to the Youtube thumbnail image depending on the resolution
  • Enhancement: Disable polyfill for intersectionObserver by default, added a way to activate it instead
  • Enhancement: Add data-cfasync=”false” to the lazyload script tag
  • Enhancement: Prevent lazyload on the Oxygen Builder page editor
  • Bugfix: Wrap no JS CSS in noscript tag and remove the no-js identifier

2.1.1

  • Bugfix: Correctly apply lazyload on picture elements
  • Bugfix: Prevent double loading of an image when an img element inside a picture element only has a srcset attribute and no src attribute

2.1

  • Enhancement: Update lazyload script to the latest version
  • Enhancement: Apply lazyload on picture elements found on the page
  • Enhancement: Apply lazyload on div elements with a background image found on the page. See FAQ for more info.

2.0.4

  • Enhancement: Add filter for iframe lazyload pattern exclusion
  • Enhancement: Auto-exclude soliloquy-image pattern from lazyload
  • Bugfix: Prevent issue when an image/iframe is duplicated on the same page
  • Bugfix: Prevent W3C validation error for the SVG placeholder

2.0.3.2

  • Bugfix: Correctly ignore inline scripts with line breaks inside

2.0.3.1

  • Bugfix: Correct an issue preventing lazyload from working

2.0.3

  • Bugfix: Prevent incorrect display if JavaScript is disabled
  • Bugfix: Don’t apply lazyload on Divi/Extra/Beaver Builder Editor pages
  • Bugfix: Use the correct URL for each iframe when multiple iframes are on the same page
  • Bugfix: Ignore content inside inline script tags to prevent applying lazyload in it

2.0.2

  • Bugfix: Fix an error in the compatibility for the AMP plugin

2.0.1

  • Bugfix: Prevent a fatal error on case sensitive operating systems

2.0

  • Enhancement: Lazyload is now applied on the template_redirect hook, which should allow the plugin to apply the optimization on more images and encountering less conflicts at the same time
  • Enhancement: Specifically target with the lazyload script images/iframes elements with a data-lazy-src attribute
  • Enhancement: Update lazyload script to the latest version
  • Enhancement: Possibility to apply lazyload on background-images with a specific markup, see FAQ
  • Enhancement: Use a svg image as placeholder instead of a base64 gif
  • Bugfix: Only use MutationObserver if available in the browser
  • Bugfix: When using the Youtube thumbnail option, correctly format the Youtube query if the video URL is encoded
  • Bugfix: Improve iframe matching to prevent unexpected results
  • Bugfix: Update CSS for the Youtube thumbnail option to prevent issue with the Gutenberg embeds block

1.4.9

  • Förbättring: Uppdatera lazyload-skript till den senaste tillgängliga versionen
  • Enhancement: Use lazy-sizes to prevent W3C validation error when sizes is defined but srcset is not
  • Enhancement: Parse images or iframes only if the element is selected to be lazyloaded in the options
  • Fix: Prevent warning for lazyload+v in Google Search Console
  • Fix: Prevent PHP Notice with WooCommerce for product images

1.4.8

  • Obs! Minsta WordPress-version som krävs är nu 4.7
  • Enhancement: Update lazyload script version
  • Enhancement: Remove placeholder image to improve perceived loading time
  • Enhancement: Compatibility with Youtube privacy URL
  • Enhancement: Update play image to match Youtube logo
  • Förbättrat: Stöd för Youtube URL-parametrar
  • Enhancement: Lazyload images displayed with wp_get_attachment_image(). /!\ no fallback if JavaScript is disabled
  • Fix: Use the correct size set in srcset for the lazyloaded image
  • Fix: Prevent Youtube thumbnail replacement on playlists
  • Fix: Prevent iframe lazyload on AMP pages
  • Åtgärdat: Korrigerat textdomän för översättningar (tack @ Chantal Coolsma)

1.4.7

  • Fix compatibility with infinite scroll
  • Prevent lazyload on masterSlider images

1.4.6

  • Correctly include version 8.5.2 of lazyload script
  • Prevent 404 error on lazyload script if URL contains ”-v”

1.4.5

  • Rename Setting Page Name in WP Menu
  • New Product Banner in Settings Page
  • Conditionally load a different version of the script depending on browser support of IntersectionObserver
  • Fix a bug where images initially hidden are not correctly displayed when coming into view (slider, tabs, accordion)

1.4.4

  • Admin Redesign

1.4.3

  • Plugin is compatible again with PHP < 5.4

1.4.2

  • Uppdaterat lazyload-skript för att få tillbaka kompatibilitet med IE9/10

1.4.1

  • Åtgärdat fel som orsakade en alltför aggressiv upprensning

1.4

  • New option: replace Youtube videos by thumbnail. This option can improve your loading time a lot, especially if you have multiple videos on the same page

1.3.3

  • 2017-09-16
  • Förhindra att skript och stilar tas bort under HTML-analysering

1.3.2

  • 2017-09-12
  • Fix images not displaying in certain conditions because image attributes exclusion was not working correctly

1.3.1

  • 2017-09-07
  • Don’t apply lazyload on Divi slider

1.3

  • 2017-09-01
  • Förbättrat HTML-analysering av bilder och iframes för att bli snabbare och effektivare
  • Make the lazyload compatible with fitVids for iframes
  • Don’t apply lazyload on AMP pages (compatible with AMP plugin from Automattic)
  • Use about:blank as default iframe placeholder to prevent warning in browser console
  • Don’t apply lazyload on upPrev thumbnail

1.2.1

  • 2017-08-22
  • Åtgärdat saknat lazyload-skript
  • Don’t lazyload for images in REST API requests

1.2

  • 2017-08-22
  • Update lazyload script to latest version
  • Change the way the script is loaded

1.1.1

  • 2017-02-13
  • Bug fix: Remove use of short tag to prevent 500 error on some installations

1.1

  • 2017-02-12
  • Nytt
    • JS-bibliotek uppdaterat
    • Stöd för iFrame
    • Support for srcset and sizes
    • New options page

1.0.4

  • 2015-04-28
  • Bug Fix: Resolved a conflict between LazyLoad & Emoji since WordPress 4.2

1.0.3

  • 2015-01-08
  • Bug Fix: Don’t apply LazyLoad on captcha from Really Simple CAPTCHA to prevent conflicts.

1.0.2

  • 2014-12-28
  • Improvement: Add « rocket_lazyload_html » filter to manage the output that will be printed.

1.0.1.1

  • 2014-07-25
  • Fix stupid error with new regex in 1.0.1

1.0.1

  • 2014-07-16
  • Bug Fix: when a IMG tag or content (widget or post) contains the string ”data-no-lazy”, all IMG tags were ignored instead of one.
  • Security fix: The preg_replace() could lead to a XSS vuln, thanks to Alexander Concha
  • Code compliance

1.0

  • 2014-01-01
  • Initial release.