/speed-lab

A dummy website to showcase the importance of webperformance

Primary LanguageJavaScript

speed-lab

A live version is availabe here : http://speedlab.antoinebrossault.com/

Fully optimized results :

WPT Tested From: Ireland - EC2 - Chrome - Emulated Motorola G - 3GFast

speed-lab-wpt-SI.png

before-after.png

How to setup the environement

npm install

Run Grunt tasks

Default grunt task JS validation / concat / minification with CSS concatenation / minification

grunt watch

Extract critical CSS

grunt critical-css

Generate a sprite

grunt sprite

Lazy loading

For lazy loading I use lazysizes. Images can saturate the bandwith with mobile connection. We can load the images (not ATF (Above the fold) images) after the onLoad event or just before the user need them (onScroll)

Responsive images with lazy loading

Important to not display downscaled images on mobile but the perfect image size for each device size. Further more the code bellow (with lazysizes Lib) allow you to use responsive images and lazy loading at the same time.

<img
alt=""
data-sizes="auto"
data-srcset="
css/img/450x400.jpeg 300w,
css/img/450x400.jpeg 400w,
css/img/768x400.jpeg 640w,
css/img/1200x800.jpeg 1000w"
data-src="css/img/1200x800.jpeg"
class="lazyload img-responsive img-center" />

Add the lazyloadclass and prefix and set data-sizesto auto

We sometime have to load bigger images (superior to the screen width it self) because of the device pixel ratio (DPR)

Details : If we take as example the code below on a 400x736 px smarthpone with a DPR (device pixel ratio) of 1 the image that will be loaded will be the 450x400.

dpr-1.png

On the same screen size (400x736) but with a DRP of 2 the image that will be loaded will be the 1200x800

drp-2.png

Lazy loading for the background images

Include to your page this addon bgset for lazysizes

<div class="bg-video lazyload"  data-bgset="http://lorempicsum.com/simpsons/200/200/1 200w, http://lorempicsum.com/simpsons/300/300/1 300w, http://lorempicsum.com/simpsons/400/300/1 400w, http://lorempicsum.com/simpsons/768/400/1 700w" data-sizes="auto">

</div>

CSS example

.bg-video{
  width: 450px;
  height: 250px;
  max-width: 100%;
  display: block;
  margin: auto;
}

RESS (Responsive Web Design with Server-Side Components)

To conditionnaly load some scripts / css... based on the User-Agent I use mobile detect

<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

if($detect->isMobile()){
  // do stuff
}else {
  // do stuff
}

HTTP 2

** NB : HTTP2 require https**

In HTTP2 is not a best practice anymore to inline the critical css in the document. Instead use server push.

How to push an asset ?

<?php
  function push_to_browser($as, $uri) {
    header('Link: ' . $uri . '; rel=preload; as=' . $as, false);
  }
  $assets = array(
    // insert here the path   here the file type
    '<css/critical.css>' => 'style'
  );
  array_walk( $assets, 'push_to_browser');

How to check if the push is activated ? :

server-push.png

In the example above the file critical.csslocated in the folder cssis server pushed.

How to setup modPageSpeed (Apache)

If you’re on a 64-bit version (likely)...

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

If you’re on a 32-bit version (less likely)...

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb

sudo dpkg -i mod-pagespeed-*.deb
apt-get -f install

Remove the downloaded package

rm mod-pagespeed-*.deb

in your htaccess / virtualhost

<IfModule !mod_version.c>
  LoadModule version_module /usr/lib/apache2/modules/mod_version.so
</IfModule>

<IfVersion < 2.4>
  LoadModule pagespeed_module /usr/lib/apache2/modules/mod_pagespeed.so
</IfVersion>
<IfVersion >= 2.4.2>
  LoadModule pagespeed_module /usr/lib/apache2/modules/mod_pagespeed_ap24.so
</IfVersion>

Result in details

Gzip

If we activate Gzip the Speed Index will not move but the weight of the page will decrease. Gzip works well for text files.

Screen Shot 2016-11-11 at 5.28.16 PM.png

Screen Shot 2016-11-11 at 5.30.27 PM.png

Renderblocking VS non-blocking

This optimization is about putting your critical css direclty in the document. (Only for HTTP 1.1, for HTTP2 use server push instead). This optimization can decrease your speed index by 50%

Renderblocking VS non-blocking

The blocking behavior waterfall : Screen Shot 2016-11-11 at 10.26.57 AM.png

The non-blocking behavior waterfall :

Screen Shot 2016-11-11 at 10.29.19 AM.png

Huge Speed-index drop !

si-drop.png

SSL VS noSSL

In my tests the SSL certificate add 200ms

Above no-ssl, below with SSL Screen Shot 2016-11-17 at 10.09.52 AM.png

Speed Index without ssl : 793 Speed Index with ssl : 982 Screen Shot 2016-11-17 at 10.12.02 AM.png

modPageSpeed On VS OFF

Tested modPagespeed on the unoptimized version of the project. As the page is built I didn't noticed a speedindex drop. MPS minified the JS / CSS and converted the images in webP format.

Nothing changed in terms on "speed perception" Screen Shot 2016-11-26 at 11.45.37 AM.png

onLoad / fullyLoaded time dropped due to images compression Screen Shot 2016-11-26 at 11.49.08 AM.png

There's our drop : images weight -40% thanks to webp Screen Shot 2016-11-26 at 11.51.24 AM.png

TTFB vs Content download

[Screen Shot 2016-11-26 at 11.51.24 AM.png]

This issue (content download) is generated by

<?php for($i = 0; $i < 100000; $i++): ?>

<p style="display:none">Lorem ipsum dolor sit met, qui at desert mandamus, adduce ullum apeirian mea at. Eu mel vide saltando vituperata, sonet quidam deterruisset te qui. Te cum vivendum explic$
Id venom argumentum vel. Ut lorem bocent hendrerit eam.</p>

<?php endfor; ?>

It's a download content issue, the html content is bloated.

[screen]

This issue is generated by

  
  sleep(4);

It's a time to first byte issue.