Pourquoi je m'en fous de PageSpeed

Et vous devriez aussi

Remy Perona

Lead developpeur de WP Rocket chez WP Media

 

      @remyperona

Qui veut un site rapide ?

Qui veut un site rapide ?

TOUT LE MONDE

Comment mesurer la vitesse

de mon site ?

Comment mesurer la vitesse

de mon site ?

Google PageSpeed Insights

Le problème avec PageSpeed

PageSpeed ne mesure pas le

temps de chargement

de votre site

Bon Score PageSpeed

SITE RAPIDE

Score PageSpeed : 85

Temps de chargement :

3,16s

Score PageSpeed : 58

Temps de chargement :

596ms

"La note PageSpeed n'a aucun impact sur votre SEO.

Pour Google, le temps de chargement de votre site est important."

Joost De Valk - Yoast

"Bien que le score soit lié à la vitesse de la page, il n'est pas complètement représentatif de l'expérience utilisateur réelle."

La seule mesure importante pour vos visiteurs est le temps de chargement

de votre site !

Pourquoi utiliser PageSpeed ?

Pourquoi utiliser PageSpeed ?

détecter des optimisations possibles (avec précaution)

Pourquoi utiliser PageSpeed ?

détecter des optimisations possibles (avec précaution)

Complément à un outil de mesure

du temps de chargement (Pingdom Tools)

Recommandations PageSpeed

Recommandations PageSpeed

Autoriser la compression

Activez la compression gzip sur votre serveur (.htaccess, nginx.conf)

Recommandations PageSpeed

Autoriser la compression

Activez la compression gzip sur votre serveur (.htaccess, nginx.conf)

Exploiter la mise en cache du navigateur

Activez les en-têtes d'expiration sur votre serveur (.htaccess, nginx.conf)

Recommandations PageSpeed

Autoriser la compression

Activez la compression gzip sur votre serveur (.htaccess, nginx.conf)

Exploiter la mise en cache du navigateur

Activez les en-têtes d'expiration sur votre serveur (.htaccess, nginx.conf)

Éviter les redirections sur la page de destination

Minimisez/supprimez les redirections pour accéder à la page

Recommandations PageSpeed

Réduire la taille des ressources CSS/JS/HTML

Minifiez vos ressources statiques (Autoptimize, WP Rocket…)

Recommandations PageSpeed

Réduire la taille des ressources CSS/JS/HTML

Minifiez vos ressources statiques (Autoptimize, WP Rocket…)

Réduire le temps de réponse du serveur

Utilisez un système de cache statique (plugin) ou serveur (Varnish)

Recommandations PageSpeed

Réduire la taille des ressources CSS/JS/HTML

Minifiez vos ressources statiques (Autoptimize, WP Rocket…)

Réduire le temps de réponse du serveur

Utilisez un système de cache statique (plugin) ou serveur (Varnish)

Optimiser les images

Utilisez une solution de réduction du poids des images (ImageOptim, Smush, Imagify…)

Suivre ces recommandations

=

meilleur temps

de chargement

Ne s'appliquent pas aux sources externes (Google fonts, analytics, tracking…)

Recommandations PageSpeed

Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison

Chargez les fichiers CSS et JS de façon asynchrone/différée

!

Peut causer des problèmes d'affichage

CSS critique différent pour chaque page

Insérez le "CSS critique" directement dans le <head> de vos pages

Recommandations PageSpeed

Afficher en priorité le contenu visible

!

Difficile à mettre en place avec WordPress

Dépendant des thèmes/extensions

Structurez votre code HTML pour charger le contenu au dessus de la ligne de flottaison en premier

Suivre ces recommandations

=

(Possible) amélioration du temps de chargement perçu

"Certaines des recommandations PageSpeed nécessitent des efforts considérables à mettre en place,

vous devez donc évaluer le coût de leur mise en place vs le bénéfice pour votre page."

RECAP

RECAP

Le score PageSpeed n'a pas d'importance

RECAP

Le score PageSpeed n'a pas d'importance

Suivre les recommandations de PageSpeed avec précaution

RECAP

Le score PageSpeed n'a pas d'importance

Focus sur le temps de chargement de votre site

Suivre les recommandations de PageSpeed avec précaution

Q/A

Ressources

Made with Slides.com