A live version is availabe here : http://speedlab.antoinebrossault.com/
Fully optimized results :
WPT Tested From: Ireland - EC2 - Chrome - Emulated Motorola G - 3GFast
npm install
Default grunt task JS validation / concat / minification with CSS concatenation / minification
grunt watch
grunt critical-css
grunt sprite
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)
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.
On the same screen size (400x736) but with a DRP of 2 the image that will be loaded will be the 1200x800
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;
}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
}** 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 ? :
In the example above the file critical.csslocated in the folder cssis server pushed.
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>
If we activate Gzip the Speed Index will not move but the weight of the page will decrease. Gzip works well for text files.
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%
The blocking behavior waterfall :
The non-blocking behavior waterfall :
Huge Speed-index drop !
In my tests the SSL certificate add 200ms
Above no-ssl, below with SSL
Speed Index without ssl : 793
Speed Index with ssl : 982
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"
onLoad / fullyLoaded time dropped due to images compression
There's our drop : images weight -40% thanks to webp
[
<?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.
[
sleep(4);It's a time to first byte issue.