PHPackages                             heimrichhannot/contao-speed-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. heimrichhannot/contao-speed-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

heimrichhannot/contao-speed-bundle
==================================

This module improves the performance of your contao environment.

1.9.1(3y ago)74.8k1[1 issues](https://github.com/heimrichhannot/contao-speed-bundle/issues)LGPL-3.0-or-laterPHPPHP ^7.1||^8.0CI failing

Since Jan 8Pushed 3y ago6 watchersCompare

[ Source](https://github.com/heimrichhannot/contao-speed-bundle)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-speed-bundle)[ RSS](/packages/heimrichhannot-contao-speed-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (9)Versions (31)Used By (0)

Contao speed bundle
===================

[](#contao-speed-bundle)

[![](https://camo.githubusercontent.com/702ff02a8e622b99732b0753b76a32e154dc6244a89db4d8913c320643a59d7e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652e737667)](https://camo.githubusercontent.com/702ff02a8e622b99732b0753b76a32e154dc6244a89db4d8913c320643a59d7e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652e737667)[![](https://camo.githubusercontent.com/b753afe429731e416cebbac98fb7c25d0ad61e5c1c75a0904704b05d8e41c76b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652e737667)](https://camo.githubusercontent.com/b753afe429731e416cebbac98fb7c25d0ad61e5c1c75a0904704b05d8e41c76b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652e737667)[![](https://camo.githubusercontent.com/7c0f4c26361786f651d8f08db791784c933d480494e23670b4557b4aea9a59c4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652e737667)](https://camo.githubusercontent.com/7c0f4c26361786f651d8f08db791784c933d480494e23670b4557b4aea9a59c4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652e737667)[![](https://camo.githubusercontent.com/3ddf7dad1c2ef91f1ee58e082b648c4d48d2ec671e47eac15ec02e895d6d4553/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652f6d61737465722e737667)](https://travis-ci.org/heimrichhannot/contao-speed-bundle/)[![](https://camo.githubusercontent.com/f2a1cac8335e41852dd46b59e18da8091b970e4aeca9dc9dcab4abbc13ee36bf/68747470733a2f2f696d672e736869656c64732e696f2f636f766572616c6c732f6865696d7269636868616e6e6f742f636f6e74616f2d73706565642d62756e646c652f6d61737465722e737667)](https://coveralls.io/github/heimrichhannot/contao-speed-bundle)

This module improves the performance of your contao environment.

Improvements
------------

[](#improvements)

### Lazy-loading offscreen images

[](#lazy-loading-offscreen-images)

Offscreen 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.

We 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:

#### How to use?

[](#how-to-use)

To enable lazy loading, enable the `js_lazyload` JavaScript-Template within your page layout.

**![]()**

```

```

```

```

**Background images**We 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.

```

```

**Lazy load inside sliders like slick slider**

In order to prevent bouncing of cloned carousel slide images (using infinite looping), the `lazyLoad` technique should be set to `progressive` instead of `on-demand`.

#### Prevent lazy loading

[](#prevent-lazy-loading)

If you want to prevent your image from being lazy loaded, you have to adjust your template and add `['lazyload' => false]` to the picture template data.

```

   style="" itemscope itemtype="http://schema.org/ImageObject">