Google PageSpeed ​​- Éliminer Render-blocage des ressources au-dessus du pli causé par Google Fonts

Question

j'essaye d'optimiser ce site Web: electronicsportsitalia-it et quand j'essaye de l'analyser sur Google PageSpeed ​​les plates-formes indique qu'il y a un blocage de police de google la page rendu:

https://fonts.googleapis.com/css?family=Lato:300,400,700

la police a été d'abord chargé par php mais j'inséré directement dans le code html essayant de le charger avec ce code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -Mettre également avant la </body> TAG- mais ça n'a pas marché.

donc je tryed pour le charger avec Web Font Loader et en fait le site est runnging ce script: `

</script> 
<script> 
    WebFont.load({ 
    google: { 
     families: ['Lato'] 
    } 
    }); 
</script>` 

mais toujours le même problème sur PageSpeed.

Quelqu'un peut-il m'aider?

Answer 1

Dans mon cas, je vais générer ma police en utilisant un font-face generator tool qui est plus facile à utiliser et moins de tracas mais quand j'utilise les polices google, c'est ce que je fais. Vous pouvez utiliser l'élément style à la fin de body, juste avant la fermeture </body> tag:

<style> 
@import "//fonts.googleapis.com/css?family=Lato:300,400,700" 
</style> 

ou vous pouvez vous référer à How to keep CSS from render-blocking my website?

Answer 2

Les fichiers de police suivants doivent être chargés avant ce fichier JS:
https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js

https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2 
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2 
https://fonts.googleapis.com/css?family=Lato 
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2 
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2