Download the PHP package heimrichhannot/contao-speed-bundle without Composer

On this page you can find all versions of the php package heimrichhannot/contao-speed-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of heimrichhannot/contao-speed-bundle

Informations about the package contao-speed-bundle

Contao speed bundle

This module improves the performance of your contao environment.

Improvements

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?

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

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.

Example: ce_image.html5

If you use the heimrichhannot/contao-utils-bundle TwigExtension image, just add 'lazyload': false to your item data.

Update lazy load on demand

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

Callbacks

In order to make adjustments like trigger animation on scroll after image has been loaded, there are some callbacks you might listen on the image:

Name Meaning Example
lazyload:enter A function which is called when an element enters the viewport. document.querySelector('[data-lazy]').addEventListener('lazyload:enter', function(event){});
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){});
lazyload:load A function which is called when an element was loaded. document.querySelector('[data-lazy]').addEventListener('lazyload:load', function(event){});

😋 Tips & tricks

Do NOT use placeholder images

Taken from the verlok/lazyload github README.md:

We do not recommend to use a placeholder image (like a transparent pixel GIF) in your HTML.

  • 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 or [this pen](https://> 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).
  • 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.

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 > client is a crawler like Googlebot, it will be detected by LazyLoad which will fix the HTML.

All versions of contao-speed-bundle with dependencies

PHP Build Version
Package Version
Requires php Version ^7.1||^8.0
contao/core-bundle Version ^4.4
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package heimrichhannot/contao-speed-bundle contains the following files

Loading the files please wait ....