Antoinebr

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)

Optimisation du chemin critique

Optimisation des JavaScript

Essayez de charger vos JS de manière non bloquantes.

	<img
	src="css/img/1200x800.jpeg"
	media="(min-width: 320px) 300w, (min-width: 400px) 400w, (min-width: 640px) 640w, (min-width: 1000px) 1000w"
	srcset="
	css/img/450x400.jpeg 300w,
	css/img/450x400.jpeg 400w,
	css/img/768x400.jpeg 640w,
	css/img/1200x800.jpeg 1000w"
	alt="" class="img-responsive img-center" />

	<?php

	function push_to_browser($as, $uri) {
	header('Link: ' . $uri . '; rel=preload; as=' . $as, false);
	}

	$assets = array(
	// enter the path enter the type of file (script / style / etc...)
	'<css/critical.css>' => 'style'
	);

	function onOpen() {
	var spreadsheet = SpreadsheetApp.getActive();
	var entries = [{name: "Get Results", functionName: "getResults"}];
	spreadsheet.addMenu("WebPagetest", entries);
	};

	var critical = require('critical');

	critical.generate({
	src: 'https://www.example.com', // url
	dest: 'critical.css', // fichier de destination
	width: 412, // largeur de la fenêtre
	height: 732 // hauteur
	});

	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>


	// The lazyoad class is added

	<?php the_post_thumbnail('medium', array('class' => "img-responsive lazyload")); ?>

	<?php

	// #1 We register LoadCss script, and we load it in the footer
	// LoadCss is here -> https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
	add_action( 'wp_enqueue_scripts', 'register_my_scripts' );

	function register_my_scripts() {
	wp_enqueue_script( 'loadCss', get_template_directory_uri() . '/js/libs/loadCss.js',false, '1.2.1', true );
	}