Performance web:vers le 100/100 au Google Pagespeed Insights

Bérénice - 03/11/2015

Le temps du modem 56k, qui nous demandait plusieurs minutes de patience pour charger une seule image, est bien loin derrière nous. Pourtant, avec des applications web aux contenus de plus en plus riches et aux fichiers dont la taille augmente constamment, nous passons encore du temps à attendre le chargement de certaines pages. Mais, dans un contexte d’instantanéité, les utilisateurs sont de plus en plus exigeants sur le temps d'exécution. Il est donc primordial de s’intéresser à la performance des applications que nous développons pour optimiser l’expérience utilisateur.

performance web old computer

Photo : Steve Juvertson


En plus de représenter un impératif pour l’expérience utilisateur, et donc un impact indéniable sur le taux de conversion, le panier moyen ou encore le taux de rebond, la performance web est également un point important à prendre en compte pour le SEO (référencement naturel). En effet, la vitesse de chargement des applications web est prise en compte par les robots de Google, qui pénalisent le référencement naturel des sites considérés trop lents depuis 2010. Cette pénalisation des sites trop lents par Google a été renforcée il y a quelques mois suite à l’évolution du label Mobile Friendly. En effet, la compatibilité mobile est maintenant un critère clé pour Google, et la vitesse de chargement est étroitement liée à l’expérience utilisateur sur mobile.

Plus de 90% du temps de chargement se passe au niveau du réseau et du navigateur, c’est donc sur la partie front-end que l’on va pouvoir jouer pour obtenir un gain de performance important. Pour optimiser l’expérience utilisateur, ainsi que le SEO, sur nos plate-formes, nous allons présenter dans cet article deux outils parmi ceux que nous utilisons chez Escale :


UN INDICATEUR DE PERFORMANCE : GOOGLE PAGESPEED INSIGHTS

Depuis 2011, Google propose, parmi ses outils à destination des développeurs, l’outil Google Pagespeed Insights. Créé en 2011, et enrichi en 2014 par un test pour version mobile, cet outil nous permet de mesurer la performance de nos pages web.

Comment ça marche ? Il nous suffit tout simplement de nous rendre sur Google Pagespeed Insights et de rentrer l’URL de la page que nous souhaitons tester. En quelques secondes, Google passe en revue le contenu de notre page et nous fournit une analyse détaillée des points faibles et des points forts sur mobile et sur desktop, ainsi que des suggestions pour améliorer la performance de la page : les points à corriger impérativement, ceux à corriger éventuellement et les règles respectées.

pagespeed insights escale digitale

escaledigitale.com au Google Pagespeed Insights : « les cordonniers sont toujours les plus mal chaussés »


Nous retrouvons dans ces suggestions Google des guidelines très complètes afin d’améliorer notre score Pagespeed Insights.

Rendu au dessus de la ligne de flottaison

Google exige un rendu le plus rapide possible au dessus de la ligne de flottaison, c’est-à-dire la zone que l’utilisateur peut consulter sans scroll. L’affichage de la page est généralement retardée par le chargement de ressources CSS et JavaScript. Afin de résoudre cela, Google nous conseille de différer le chargement de ces éléments, de les charger de manière asynchrone ou encore de les insérer directement dans le code HTML, ce qui n’est pas à faire dans tous les cas de figure.

Le cache des ressources avec date d’expiration

Afin d’accélérer le chargement d’une page, nous pouvons mettre en place un système de cache des ressources dans le navigateur. Nous évitons ainsi certains dialogues entre navigateur et serveur en indiquant au navigateur d’aller chercher les ressources déjà chargées dans le passé sur le disque local plutôt que d’interroger le serveur à nouveau. Couplé à l’en-tête “expires”, nous définissons la période pendant laquelle le navigateur est autorisé à utiliser les données mises en cache sans requête au serveur.

La compression gzip

En autorisant la compression gzip, nous permettons au serveur de compresser les ressources avant leur envoi au navigateur. Elles seront ensuite décompressées par ce dernier.

Pas de redirection

Les redirections déclenchent un cycle de requête-réponse HTTP supplémentaire et augmentent donc le temps de réponse. C’est pourquoi il faut les éviter, ou au moins les minimiser afin de réduire le temps d’attente de l’internaute.

Des éléments tactiles de taille convenable

Les boutons et liens de notre application doivent être suffisamment grands pour que l’internaute puisse appuyer dessus facilement depuis un écran tactile, afin d’améliorer son expérience utilisateur.

L’ensemble des éléments vu ci-dessus démontrent l’importance de développer des applications web responsives, c’est-à-dire conçues avec un design adaptable aux différentes tailles d’écran, du mobile au desktop en passant par la tablette.


CRITICAL CSS : UNE SOLUTION POUR OPTIMISER LE CHARGEMENT DU RENDU AU DESSUS DE LA LIGNE DE FLOTTAISON

Une des recommandations de Google est l’optimisation de la diffusion des ressources CSS. En effet, le chargement de feuilles de styles CSS externes bloque les navigateurs et retarde donc l’affichage du contenu à l’écran. Chez Escale, nous utilisons Bootstrap pour l’intégration des plate-formes web que nous développons, mais c’est un framework complet et malgré une optimisation importante, il reste relativement lourd. Malgré l’utilisation des fonctions concat (action d'accoler plusieurs fichiers CSS afin de réduire les appels entre navigateur et serveur) et minify (action de minifier les fichiers CSS en supprimant tous les espaces et sauts de ligne superflus) du CSS en une seule feuille de style, nous conservons des feuilles de styles relativement lourdes. C’est pourquoi il est indispensable de travailler sur ce point pour optimiser notre performance web.

pagespeed insights google goutez electronique

Le score de goutez-electronique.com, développé par Escale, au Pagespeed Insights après l’utilisation du CriticalCSS


C’est avec cette problématique que nous avons récemment mis en place le CriticalCSS. Ce plugin, développé par Filament Group, permet de détecter et d’extraire de la feuille de styles le contenu CSS dit critique, c’est-à-dire l’ensemble des règles CSS nécessaires à l’affichage de la page au dessus de la ligne de flottaison. CriticalCSS nous permet d’inliner les CSS critiques en une unique feuille de 13 ko maximum dans le HTML.

Concrètement, comment cela fonctionne-t-il ? PhantomJS, un navigateur web headless (c’est à dire dépourvu d’interface graphique), parcourt la ou les page(s) concernée(s) et en déduit les styles CSS nécessaires à l’affichage au dessus de la ligne de flottaison. On les isole au sein d’un fichier puis on les minifie et on les insère au sein d’une balise < style > dans le document HTML. Le reste de la feuille de style CSS est alors chargée de manière asynchrone, c’est à dire après le premier rendu du navigateur, ce qui permet un affichage plus rapide du contenu au dessus de la ligne de flottaison.

Nous noterons que ces solutions sont adaptées au protocole HTTP1.1, omniprésent sur internet aujourd’hui, mais qu’elles ne le seront probablement plus lorsque nous adopterons le protocole http2. Nous assistons actuellement aux prémices de http2, qui réduit le nombre d’allers-retours nécessaires entre le client HTTP et le serveur. Il permet un nombre important de flux parallèles et si les priorités de flux sont correctement utilisées, le client devrait recevoir les données les plus importantes avant les moins importants. Cela devrait donc mener à un meilleur temps de chargement des pages. Cependant, le passage au protocole http2 nécessitera un temps d’adaptation de la part des développeurs qui ont mis en place de nombreuses astuces pour contourner les limites de HTTP1.1, mais qui pourraient pénaliser les performances de http2.

Mathieu Escale Digitale Human Talks performance web

Mathieu Le Gac, CEO d'Escale, présentant les concepts de cet article aux Humans Talks du mardi 8 septembre 2015 à Nantes


Et si on parlait de vous ?

Vous avez un projet de site web ? Une problématique technique à nous soumettre ?
Dites-nous en plus : nous sommes impatients de découvrir votre projet !

escale © 2017 | Startup Palace - 18 rue Scribe - 44000 Nantes France | Proudly built on GestionAIRMentions Légales