Google PageSpeed - Googleフォントによる折り目の上のレンダリングブロックリソースを排除

Question

私はこのウェブサイトをelectronicsportsitalia-itに最適化しようとしています。Google PageSpeedで解析しようとすると、Googleフォントページのレンダリング：

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

フォントは、まずPHPによってロードされたが、その後私は、このコードでそれをロードしようとしているhtmlコードに直接挿入：<link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -putをも</body>タグ - 前しかしそれは働かなかった。

だから私はWeb Font Loaderでそれをロードするためにしようと試み、実際にウェブサイトでは、このスクリプトをrunngingさ： `

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

が、常にページスピードで同じ問題。

誰かが私を助けることができますか？

Answer 1

私の場合、font-face generator toolを使用してフォントを生成します。このフォントは使いやすく、手間は少なくなりますが、Googleフォントを使用すると、これができます。

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

か、このファイルをJS前に、次のフォントファイルがロードされなければならないHow to keep CSS from render-blocking my website?

Answer 2

を参照することができます：
https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js あなただけの終了</body>タグの前に、bodyの終わりにstyle要素を使用することができます

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