ComboStrap - Perfomance

About

performance is how fast your page will be perceived by your user from the moment they click on a link until they see the resulting page.

Google has a more detailed definition of what performance is and gives you a performance score along with performance metrics via the lighthouse product.

Below is a run of the home page of this website with the lighthouse website version. Note that our web server is running on a small machine with only 2 cores from Canada.

Steps

Stylesheet

Critical Path

All published stylesheet (bootstrap and bootswatch) are served by defaut from a CDN

If you are using only ComboStrap, you can even disable the Dokuwiki Stylesheet for public user with the disableDokuwikiStylesheet configuration

The size of a web page served to the public (user not logged in) can be optimized with the CSS optimization module

Stylesheet Preload

We preload stylesheet that are non critical for rendering. For instance, the stylesheet used for animation are preloaded and added to the page at the end.

Javascript

All Javascript file are served from a CDN and are deferred (loaded at the end) because they are not needed for the first rendering.

If you only depend on the ComboStrap plugins, you can even disable the backend javascript.

Cache

All processing are cached by default until the page itself or a backlink page is changing.

With the cache component, you can control the cache interval for more granular control.

Side slots are using heavily the index when they show navigational components and have a great impact on the web server rendering time.

With the side slots automatic cache bursting, the only user impacted is the editor that is recreating the sidebar when he saves the page.

Action: If you have any ~~NOCACHE~~ instructions in your sidebar, just delete them.

Image

Lazy load

All images are lazy loaded by default. It means that they are loaded only when:

  • they are on the screen
  • they are going to enter in the screen.

Automatic Responsive Sizing

All raster images (jpg, png, …) are also automatically loaded with the appropriate sizing.

If a page contains an big image (say 2400px), this image will be resized and served to 300px on a small mobile screen.

If you want to see it in action, you can check the demonstration video.

Powered by ComboStrap