J'écris cet article car j'ai galéré à trouver la réponse.
J'ai cherché partout ... et quand je dit partout c'est jusqu'à aller sur des forums de développeurs Russe et de faire Google traduction :X
Mise en situation :
Voilà j'ai créé ce blog il n'y a pas longtemps et j'étais curieux de savoir quel score il faisait sur GtMterix et sur PageSpeed Insights .
Une des principales recommandations pour alléger et de rendre plus fluide le blog était d'éliminer le contenu bloquant dans le chargement de celui-ci.
En gros quand une page de mon blog se charge elle attend le chargement de tout un tas de scripts avant de continuer plus loin dans le code.
Le problème c'est que certains scripts peuvent mettre des plombes à se charger, ce qui ralentit ma page de presque 2 secondes (c'est énorme).
Après avoir fouiné dans tout les coins j'ai trouvé l'astuce.
Étape1 - Changer L'En-tête.
Cette astuce est destiné à bloquer l'accès au CSS afin de l'optimiser.
Pour cela allez sur votre espace administrateur du blog puis dans la colonne de gauche cliquez sur modèle puis "modifier le code html".
Copiez tout le code et sauvegardez le dans un coin en cas de fausses manips.
1) Nous pouvons commencer ...
dans cette fenêtre d'éditeur de code html fait un "ctrl+f"
une petite fenêtre "search" va apparaitre.
tapez <head pour chercher la balise <head> dans le code.
2) Changer la balise <head> en <head>
et la balise </head> en </head><!--<head/>-->
vous devriez voir du code en vert (normal car on a fait un commentaire).
Maintenant rechargez votre blog (touche F5 ^_^ ) après avoir enregistré les modifications du code et faites ctrl+U (pour afficher le code source de la page avec les modifs fait dans le code)
Vous tombez sur le code source de la page et là nous allons faire ce qui suit :
1) Copiez l'url du code en commentaire qui fait référence au CSS.
ca ressemble à peu prés à ça :
https://www.blogger.com/static/v1/widgets/124733060-widget_css_2_bundle.css
(faites une recherche (ctrl+f) et copié l'adresse qui vous correspond, si vous copiez celle du dessus ça ne marchera peut être pas, cherchez la votre avec css_2_bundle.css à la fin).
Ouvrez cette URL en .css dans une fenêtre de votre navigateur et copiez le code CSS de cette page.
Mettez ce code CSS dans un fichier texte pour plus tard bien au chaud.
2) Même opération mais avec la version mobile de votre blog.
Prenez l'adresse de votre blog et rajoutez "?m=1" à la fin de l'adresse
Par exemple : Exemple.blogspot.com?m=1
Maintenant on fait pareil qu'à l'étape 1.
On charge la page du blog version mobile, on fait Ctrl + U,
on copie L’URL du code en commentaire qui fait référence au CSSMobile cette fois ci.
Ça ressemble à peu prés à ça :
https://www.blogger.com/static/v1/widgets/124733060-widget_css_mobile_2_bundle.css
(pareil cherchez bien votre url à vous)
Mettez ce code CSSMobile dans un fichier texte pour plus tard en séparant bien de celui
de la version normale de votre blog qui est déjà au chaud !
Étape 2 - Mettez le CSS version normal et le CSS version mobile dans Blogger.
Dans le code ci-dessous on ira mettre le CSS normal et le CCS mobile qu'on à planqué
dans un fichier texte de la manière suivante :
<b:if cond="data:blog.isMobile">
<style type="text/css">
CSS_Mobile ICI !
</style>
<b:else/><style type="text/css">
CSS Normal ICI !
</style>
</b:if>
Et voilà c'est bientôt fini !
Il ne reste plus qu'à prendre le tout et de le coller dans le <head> (juste après)dans votre éditeur HTML de blogger.
Puis de sauvegarder le Template et de rafraichir votre blog.
Normalement vous avez éliminé le code bloquant dans votre blog.
enjoy =)