【プラグインで対応】レンダリングをブロックしている JavaScript/CSS を排除する方法




ブログの速度を測定するサイト「PageSpeed Insights」では、改善点も教えてくれるんです。

その中でも

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
のポイントがどう対応したら良いのかさっぱり。

検索に検索を重ね、やっと改善できました。

そして結果的に、この改善点が1番ブログ高速化に役立ちました!!

この記事では、ブログの高速化対策の1つ「レンダリングのブロックの排除方法」について、当ブログの対応をまとめました。

スポンサーリンク




レンダリングのブロックって何?

そもそも、改善ポイントの

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
のレンダリングをブロックってところが意味不明。笑

散々調べたところ、こちらのブログの前半部分が個人的には分かりやすかったかなぁと思いました。

WordPress でレンダリングを妨げる JavaScript を削除する簡単な方法のまとめ

実際にレンダリングをブロックしていた犯人は2ヶ所!

ブログ速度測定サイト「PageSpeed Insights」で調べた時に、下の方にスクロールしてください。

実際に問題になっている箇所を「最適化についての提案」というところで教えてくれます。

「詳細を表示」をクリックすると具体的な問題箇所を教えてくれます。

私の場合、CSSに問題があるとのことだったので、問題のCSSをコピーして、googleの検索窓にペースト。

そうするとCSSの中身が見れました。
私のブログでレンダリングをブロックしてた犯人は大きく2ヶ所。

1つはカエレバのカスタマイズCSS。
もう1つはgoogleフォントCSS。

レンダリングをブロックしてたCSS①カエレバのカスタマイズ

amazonや楽天の商品を紹介する時に、現在はRinker(リンカー )というプラグインを使っています。
こういうやつです。

Rinker(リンカー )の前は「カエレバ」というサイトを使っていました。

カエレバの初期設定だとボタン部分が分かりにくく、デザインも気に入らなかった私。

先輩ブロガーさんがブログで紹介していた記事を参考にカスタマイズ。

その際に記事内でプラグイン「simple custom css」を使っていたので、私もプラグイン導入。

そのCSSが悪さをしていた模様。

カエレバ自体もう使ってないし、プラグインもそのCSSだけで使ってたので、思い切って全削除しました。

レンダリングをブロックしてたCSS②googleフォント

もう一つは、googleフォントのCSSが原因の模様。

調べてもgoogleフォントのCSSがどこにあるのか、どういじれば良いのかわからぬ!!!

よく分からないまま、検索しまくった結果「Autoptimize」プラグインが使えました。

  1. プラグインをインストール→有効化
  2. 管理画面の設定から「Autoptimize」をクリック。
  3. 「追加」をクリック
  4. google fontsの項目が選択できるので「Combine and preload in head (fonts load late, but are not render-blocking)」を選択。
  5. 「変更を保存」をクリック。

 

英語がさっぱりなんで、翻訳したら

「頭を組み合わせて事前ロードする(フォントは遅くロードされますが、レンダリングはブロックされません」
とのこと。

レンダリングがブロックされないようにしたかったので、こちらを選択。

これが当ブログの高速化に、かなり良い影響が!!

[注意]このgoogle fontsの項目で「googleフォントの削除」にして見たところ、高速化できましたが、ブログ全体のデザインが崩壊。
慌てて戻す羽目に。

また「webfont.js で非同期にフォントを結合して読み込む。」にしてみたところ、特にブログの高速化に影響無し。

スポンサーリンク

googleフォントはレンダリングをブロックしてる可能性大

読み込み速度測定サイト「PageSpeed Insights」で「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という改善が出た方。

CSSを確認して、googleフォントが原因だった場合は、プラグイン「Autoptimize」で対応可能かもしれません。

[注意]今回の改善点は、あくまでも当ブログで改善が見込めたものです。

全ての方の全てのブログで当てはまるかどうか、また不具合が発生する可能性もあります。

バックアップを取った上でご検討ください。

スポンサーリンク





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

まめま

20代後半、真面目だけど超絶面倒くさがりママ、略して「まめま」です。 1歳ヤンチャboy、俺様旦那、ぶちゃカワ犬との4人暮らし。 日々、妊娠や出産、育児に関する悩みについて調べたり、経験したことを綴っています。