{"id":20961819,"url":"https://github.com/heimrichhannot/contao-speed-bundle","last_synced_at":"2025-05-14T07:31:05.387Z","repository":{"id":62515631,"uuid":"116676541","full_name":"heimrichhannot/contao-speed-bundle","owner":"heimrichhannot","description":"A contao bundle that improves the performance of your contao environment. ","archived":false,"fork":false,"pushed_at":"2023-02-08T13:56:18.000Z","size":73,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-18T11:32:06.834Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heimrichhannot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-08T12:55:17.000Z","updated_at":"2023-02-08T13:56:10.000Z","dependencies_parsed_at":"2022-11-02T13:03:46.274Z","dependency_job_id":null,"html_url":"https://github.com/heimrichhannot/contao-speed-bundle","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-speed-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-speed-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-speed-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-speed-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heimrichhannot","download_url":"https://codeload.github.com/heimrichhannot/contao-speed-bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254094857,"owners_count":22013649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T02:17:42.299Z","updated_at":"2025-05-14T07:31:03.337Z","avatar_url":"https://github.com/heimrichhannot.png","language":"PHP","readme":"# Contao speed bundle\n\n![](https://img.shields.io/packagist/v/heimrichhannot/contao-speed-bundle.svg)\n![](https://img.shields.io/packagist/l/heimrichhannot/contao-speed-bundle.svg)\n![](https://img.shields.io/packagist/dt/heimrichhannot/contao-speed-bundle.svg)\n[![](https://img.shields.io/travis/heimrichhannot/contao-speed-bundle/master.svg)](https://travis-ci.org/heimrichhannot/contao-speed-bundle/)\n[![](https://img.shields.io/coveralls/heimrichhannot/contao-speed-bundle/master.svg)](https://coveralls.io/github/heimrichhannot/contao-speed-bundle)\n\n\nThis module improves the performance of your contao environment. \n\n## Improvements\n\n### Lazy-loading offscreen images\n\nOffscreen images are images that appear below the fold. Since users can't see offscreen images when they load a page, there's no reason to download the offscreen images as part of the initial page load. In other words, deferring the load of offscreen images can speed up page load time and time to interactive.\n\nWe ship an adjusted `picture_lazyload.html5` with this bundle to provide proper lazy loading setup for images (`picture_default.html5` will be replaced with `picture_lazyload.html5` if script `js_lazyload` in `tl_layout.scripts` is enabled). If in case you use custom `picture-*.html5` templates adjust like the following:\n\n#### How to use?\n\nTo enable lazy loading, enable the `js_lazyload` JavaScript-Template within your page layout.\n\n**\u003cimg\u003e**\n```\n\u003cimg data-src=\"/your/image1.jpg\"\n    data-srcset=\"/your/image1.jpg 200w, /your/image1@2x.jpg 400w\"\n    sizes=\"(min-width: 20em) 35vw, 100vw\"\u003e\n``` \n\n**\u003cpictures\u003e**\n\n```\n\u003cpicture\u003e\n    \u003csource media=\"(min-width: 1024px)\" data-srcset=\"/your/image1a.jpg\" /\u003e\n    \u003csource media=\"(min-width: 500px)\" data-srcset=\"/your/image1b.jpg\" /\u003e\n    \u003cimg alt=\"Stivaletti\" data-src=\"/your/image1.jpg\"\u003e\n\u003c/picture\u003e\n```\n\n**Background images**\nWe also support lazy loading for background images. To take advantage of this feature, add the css class `lazy` to the background image container and provide the path to the image within the `data-src`  attribute.\n\n```\n\u003cdiv class=\"lazy\" data-src=\"../img/44721746JJ_15_a.jpg\"\u003e\u003c/div\u003e\n```\n**Lazy load inside sliders like slick slider**\n\nIn order to prevent bouncing of cloned carousel slide images (using infinite looping), the `lazyLoad` technique should be set to `progressive` instead of `on-demand`.\n\n \n#### Prevent lazy loading \n\nIf you want to prevent your image from being lazy loaded, you have to adjust your template and add `['lazyload' =\u003e false]` to the picture template data.\n\n```\n\u003c?php $this-\u003eextend('block_searchable'); ?\u003e\n\n\u003c?php $this-\u003eblock('content'); ?\u003e\n\n  \u003cfigure class=\"image_container\"\u003c?php if ($this-\u003emargin): ?\u003e style=\"\u003c?= $this-\u003emargin ?\u003e\"\u003c?php endif; ?\u003e itemscope itemtype=\"http://schema.org/ImageObject\"\u003e\n\n    \u003c?php if ($this-\u003ehref): ?\u003e\n      \u003ca href=\"\u003c?= $this-\u003ehref ?\u003e\"\u003c?php if ($this-\u003elinkTitle): ?\u003e title=\"\u003c?= $this-\u003elinkTitle ?\u003e\"\u003c?php endif; ?\u003e\u003c?= $this-\u003eattributes ?\u003e itemprop=\"contentUrl\"\u003e\n    \u003c?php endif; ?\u003e\n\n    \u003c?php $this-\u003einsert('picture_default', array_merge(['lazyload' =\u003e false] ,$this-\u003epicture)); ?\u003e\n\n    \u003c?php if ($this-\u003ehref): ?\u003e\n      \u003c/a\u003e\n    \u003c?php endif; ?\u003e\n\n    \u003c?php if ($this-\u003ecaption): ?\u003e\n      \u003cfigcaption class=\"caption\" itemprop=\"caption\"\u003e\u003c?= $this-\u003ecaption ?\u003e\u003c/figcaption\u003e\n    \u003c?php endif; ?\u003e\n\n  \u003c/figure\u003e\n\n\u003c?php $this-\u003eendblock(); ?\u003e\n```\n*Example: ce_image.html5*\n\nIf you use the `heimrichhannot/contao-utils-bundle` TwigExtension `image`, just add `'lazyload': false` to your item data.\n\n```\n{{ singleSRC|image([0,0,3],{'href' : url, 'lazyload': false})|raw }}\n```\n\n#### Update lazy load on demand\n\nIf you need to update your lazy load instances on demand, for example using the barba.js PJAX page transition plugin, use the `window.lazyLoad.update()` function.\n\n#### Callbacks\n\nIn order to make adjustments like trigger animation on scroll after image has been loaded, there are some callbacks you might listen on the image:\n\n\n| Name                | Meaning                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Example                            |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |\n| `lazyload:enter`    | A function which is called when an element enters the viewport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `document.querySelector('[data-lazy]').addEventListener('lazyload:enter', function(event){});`     |\n| `lazyload:set`      | A function which is called after the `src`/`srcset` of an element is set in the DOM.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `document.querySelector('[data-lazy]').addEventListener('lazyload:set', function(event){});`         |\n| `lazyload:load`     | A function which is called when an element was loaded.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `document.querySelector('[data-lazy]').addEventListener('lazyload:load', function(event){});`      |\n\n\n\n#### 😋 Tips \u0026 tricks\n\n##### Do NOT use placeholder images\n\nTaken from the `verlok/lazyload` github README.md:\n\n\u003e We do not recommend to use a placeholder image (like a transparent pixel GIF) in your HTML. \n\u003e \n\u003e * For **best perceived performance, leave the `src` and `srcset` attributes blank**. Doing so, the image will be shown as soon as LazyLoad starts loading the image. See [this video](https://youtu.be/2E3ociaFJS0) or [this pen](https://\u003e codepen.io/verlok/pen/bKYggE?editors=0110) to test the difference (remember to disable the cache and to set a slower connection speed if you have a very fast one).\n\u003e * If you put anything in the src (like a transparent GIF), then LazyLoad starts loading the image but it won't be shown by browsers until the new image is loaded, leading to a **worse perceived performance**.\n\u003e\n\u003e It's safe not to put any value in the `src` nor `srcset` attributes, even if your HTML won't validate by a static code analyzer. The reason is that once JavaScript is executed, those values will be set by LazyLoad. For SEO, if the \u003e client is a crawler like Googlebot, it will be detected by LazyLoad which will fix the HTML.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-speed-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheimrichhannot%2Fcontao-speed-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-speed-bundle/lists"}