Lazy Load – Optimize Images

Beschreibung

Lazy Load von WP Rocket zeigt Bilder und/oder Iframes auf einer Seite nur dann an, wenn sie für den Benutzer sichtbar sind. Dies verringert die Anzahl der HTTP-Anfragen und verbessert die Ladezeit.

Dieses Plugin funktioniert mit Vorschaubildern, allen Bildern im Inhalt eines Beitrags oder in einem Widget-Text, Avataren, Smilies und Iframes. Es wird keine JavaScript-Bibliothek wie jQuery benutzt und das Skript ist kleiner als 10KB.

Du kannst auch deine YouTube-Iframes durch Vorschaubilder ersetzen, um die Ladezeit deiner Website noch mehr zu verbessern.

Abhängigkeiten

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

Verwandte Plugins

  • Imagify: Der beste Bildoptimierer, um deine Website mit leichtgewichtigeren Bildern zu beschleunigen.
  • WP Rocket: Das beste Caching-Plugin, um deine WordPress-Website zu beschleunigen.
  • Heartbeat Control by WP Rocket: Heartbeat Control by WP Rocket: Das beste Plugin für die Steuerung der WordPress-Heartbeat-API und die Reduzierung der CPU-Last.

Installation

  1. Lade den ganzen rocket-lazy-load-Ordner in das /wp-content/plugins/-Verzeichnis hoch
  2. Aktiviere das Plugin im „Plugins“-Menü in WordPress

FAQ

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.

Wie kann ich Lazy Load auf manchen Seiten deaktivieren?

Du kannst den do_rocket_lazyload-Filter benutzen.

Hier ein Beispiel für die Einbindung in die functions.php-Datei, das lazyload für Beiträge deaktiviert:

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

Wie kann ich Lazy Load für manche Bilder deaktivieren?

Füge einfach ein data-no-lazy="1" deinem img oder iframe Tag hinzu.

Du kannst auch die Filter rocket_lazyload_excluded_attributes oder rocket_lazyload_excluded_src benutzen, um bestimmte Muster auszuschließen.

Für Iframes ist der Filter rocket_lazyload_iframe_excluded_patterns.

Wie kann ich den Schwellwert für das Auslösen des Ladens ändern?

Du kannst den rocket_lazyload_threshold-Filter benutzen.

Codebeispiel:

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

Ich benutze Plugin X und meine Bilder werden nicht mehr angezeigt

Manche Plugins sind nicht mit lazy loading kompatibel. Bitte öffne eine Supportanfrage und wir werden versuchen herauszufinden, wie wir das Problem lösen können, indem laszy loading für dieses Plugin ausgeschlossen wird.

Wie funktioniert lazyload bei Hintergrundbildern?

Das Plugin wird Hintergrundbilder automatisch per lazyload laden, die mit einem style-Attribut in einem div-Element eingebunden sind:

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

Du kannst es auch manuell anwenden. Das Element, auf das du lazyload anwenden willst, muss diese bestimmte Auszeichnung haben:

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

Das Element muss die Klasse rocket-lazyload haben und ein data-bg-Attribut, dessen Wert die CSS-URL dieses Bildes ist.

Rezensionen

21. August 2020
I haven't tested the other features, but iFrames and vimeo videos look and work great! It has better behavior with vimeo videos than others that I tried. Increases PageSpeed score.
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
Lies alle 110 Rezensionen

Mitwirkende & Entwickler

„Lazy Load – Optimize Images“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Lazy Load – Optimize Images“ wurde in 6 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Lazy Load – Optimize Images“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

2.3.4

Enhancement: Allow <a> tags to lazyload background images
Enhancement: Add tag to lazyloaded picture elements
Bugfix: Prevent a Fatal error related to the League Container package conflict with WooCommerce 4.4
Bugfix: Update lazyload for background images support for new version of lazyload script
Bugfix: Correctly apply the rocket-lazyload class on elements with a background-image and an empty class value
Bugfix: Correctly apply the rocket-lazyloadclass on elements with malformed HTML
Bugfix: Prevent a display issue with background-images when using different types of quotes around the URL
Bugfix: Prevent Layout from breaking when alt attribute has any html encoded characters

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

  • Enhancement: Update lazyload script to the latest available version
  • 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

  • Notice: Minimum WordPress version required is now 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
  • Enhancement: Support Youtube URL parameters
  • 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
  • Fix: Correct text domain for translations (thanks @ 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

  • Update lazyload script to bring back compatibility with IE9/10

1.4.1

  • Fix bug caused by a too aggressive cleanup

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
  • Prevent scripts and styles being removed during html parsing

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
  • Improve HTML parsing of images and iframes to be faster and more efficient
  • 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
  • Fix missing lazyload script
  • 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
  • New
    • JS library updated
    • Support for 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.