Taille du header ? Incidence ?

nantesweb · 2 Septembre 2018

J'ai une question qui va peut-être en interpeller certains mais pensez-vous que la taille du header peut gêner GG ?

Il faut savoir que pour passer le GG Speed à 100 il faut quasiment intégrer dans le header tous les javascript et les css des fichiers externes.

Ce qui fait bien évidemment un header d'1km et demi de long avec le framework responsive.

J'ai toujours eu l'idée de faire en sorte d'avoir la page contenant le html le plus propre possible. Avoir une page avec autant de lignes dans le header me gêne. Pourtant je passe à 100/100 sur Google speed avec.

Qu'en pensez-vous ?

Sachant qu'étant franc tireur et malgré mes très bonnes pôles positions je vais quand même tenter pour voir

spout · 2 Septembre 2018

C'est une idiotie de mettre tous les CSS et JS dans le <head>, tout le CSS et JS est rechargé de pages en pages.
Juste pr le page speed à 100, on dirait un concours de qui a la plus grosse...

nantesweb · 2 Septembre 2018

Le cache serveur agit sur tous les fichiers y compris le fichier index.php non ? Donc que les fichiers soient externes ou dans l'index, ça revient au même ou je me trompe ?

Apparamment pas dans mon htaccess :
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>

Cependant indépendamment du score, c'est vrai que sur Desktop et mobile du coup ça speed c'est le cas de le dire...

spout · 2 Septembre 2018

3 pages:
/foo
/bar
/baz
Avec chacune le CSS et JS dans le <head>, tout est rechargé à chaque fois.

Tandis que si les pages avaient styles.css et scripts.js, ils ne seraient téléchargés que la 1° fois.

rick38 · 2 Septembre 2018

Je note deux erreurs de compréhension :
Les JS il faut les garder dans 1 fichier externe chargé en asynchrone (propriété "async", sinon c'est débile de recharger le code à chaque page (vu que le cache existe). Ainsi pas d'impact négatif sur le score GoogleSpeed...
Les CSS c'est plus compliqué, mettre dans le header seul le code qui a un impact sur le haut du site (et non pas tout le code CSS...) puis charger le reste qui concerne la page en question dans un fichier externe en asynchrone, Google explique mais personne ne le fait tellement c'est complexe.

Et je ne comprends pas la dernière question, on ne met pas les index.php en cache parce que le but du php c'est de faire une page dynamique, pas une page statique .html.

CAMEO172 · 2 Septembre 2018

j'ai mon mon CSS critique en entête et le reste en fichier externe. C'est clair que c'est un poil plus rapide.
La perte de la mise en cache d'une partie du CSS est gagnée par la réactivité du site. Et tant pis si un peu de code inutile est sur toutes les pages.

Perso, j'ai réussi à avoir tout le JS en footer.

nantesweb · 2 Septembre 2018

@rick38 : j'ai répondu qu'effectivement c'est un erreur de ma part pour l'index.php

Ok, j'entends bien. J'étais sur la même longueur d'onde mais j'ai vu pas mal de première page avec de très bon scores Google Speed mobile, du coup je me suis posé la question si ça pouvait être un levier en étant jusqu'au boutiste dans certains mots concurrentiels.

@CAMEO : pour Material Design Lite impossible de le mettre en footer sans faire planter le responsive. Je code mes thèmes.

@Tous : j'ai quand même envie de tenter le coup. Je suis à 100/100, je vais voir si ça va agir sur des positions qui ne bougent pas depuis des semaines...