J'utilise Google PageSpeed insights pour essayer d'améliorer les performances de mon site et, jusqu'à présent, cela s'est avéré extrêmement efficace. Des choses comme le report de scripts fonctionnaient à merveille, puisque j'avais déjà une version interne de jQuery .ready()
pour différer les scripts jusqu'à ce que la page soit complètement chargée, tout ce que j'avais à faire était d'intégrer cette fonction particulière et de déplacer les scripts complets à la fin de la page. Cela a très bien fonctionné.
Mais maintenant, je me surprends à regarder le point jaune restant sur la liste de contrôle: "Éliminer les CSS bloquant le rendu dans le contenu au-dessus du pli".
La façon dont mon CSS est configuré consiste à avoir un _.css
fichier global contenant des styles qui s'appliquent à la structure de page en général, ou sont utilisés à plus d'un ou deux endroits sur le site. La plupart des pages ont alors un fichier CSS associé (par exemple, party.php
a party.css
) contenant des styles spécifiques à cette page particulière. Tous les fichiers CSS sont mis en cache indéfiniment, lorsque j'ajoute /t=FILEMTIME
aux noms de fichiers (et les supprime plus tard avec .htaccess) afin de garantir que les fichiers sont mis à jour lorsqu'ils sont modifiés.
Donc, de toute façon, Google recommande d'intégrer les styles critiques nécessaires pour le contenu au-dessus de la ligne de flottaison. Le problème est ... eh bien, jetez un œil à cette capture d'écran: http://prntscr.com/1qt49e
Comme vous pouvez le voir ... TOUT le contenu est au-dessus du pli! Les gens détestent le défilement, en particulier sur un jeu qui implique le chargement de nombreuses pages. J'ai donc conçu le site pour qu'il tienne sur un seul écran (en supposant une résolution suffisamment bonne). Cela signifie donc ... TOUS les styles s'appliquent au contenu au-dessus du pli! Alors ... y a-t-il une solution? Ou suis-je coincé avec cette marque jaune sur un score par ailleurs presque parfait?