J'ai utilisé 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 ont très bien fonctionné, puisque je disposais déjà d'une version interne de jQuery's .ready() pour différer les scripts jusqu'au chargement complet de la page, il m'a suffi de mettre en ligne 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 retrouve à regarder le seul point jaune restant sur la liste de contrôle : "Éliminer les feuilles de style en cascade (CSS) qui bloquent le rendu dans le contenu au-dessus du pli".
La façon dont mon CSS est configuré est d'avoir un global _.css contenant les styles qui s'appliquent à la structure de la page en général, ou qui sont utilisés à plus d'un ou deux endroits sur le site. La plupart des pages ont ensuite 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, car j'ajoute /t=FILEMTIME aux noms de fichiers (et les supprimer ultérieurement avec .htaccess) afin de garantir que les fichiers sont mis à jour lorsqu'ils sont modifiés.
Quoi qu'il en soit, Google recommande de mettre en ligne les styles critiques nécessaires au contenu du haut de page. Le problème est que... eh bien, jetez un coup d'oeil à cette capture d'écran : http://prntscr.com/1qt49e
Comme vous pouvez le voir... TOUTES du contenu se trouve au-dessus du pli ! Les gens détestent le défilement, surtout 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 suffisante). Ce qui veut dire... TOUTES des styles s'appliquent au contenu supérieur au pli ! Alors... existe-t-il une solution ? Ou suis-je coincé avec cette marque jaune sur un score autrement presque parfait ?
