アフィリエイトブログの始め方-月収100万円稼ぐまでの道のり

アフィリエイトブログの始め方から月収100万円以上稼ぐまでの記録を綴ったブログ。

ランキングに参加中です♪応援クリックをいただけると とても嬉しいです♪
人気ブログランキングへ

SEO

SEO対策:PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法

更新日:

今日は、PageSpeed Insightsでブログの表示速度を診断した後に出てくる

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の修正方法について書いていきたいと思います。

PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法
レンダリングをブロックするスクリプトリソース が1個、CSSリソースが13個あり、これが原因でページのレンダリングに遅延が発生しています。

と表示されますので、それを1つずつ解決していこうと思います。

「Autoptimize」というプラグイン

遅延を起こしているJavaScript1個とCSSリソースが13個、さてこれをどう修正すればいいのか?

私のようなプログラム知識のない人間がいじっていいものか、悩みながらいろいろ調べていたら「Autoptimize」というプラグインを見つけました。

今回参考にさせていただいたのは、This is between us.さんの「Webサイトの読み込み速度を改善する」という記事です。

「Autoptimize」はhtml、JavaScript、CSSコードを最適化するというプラグインです。

ただ、他のプラグインとの相性問題、テーマによっては不具合が起こる可能性もありますので設置は自己責任でお願いします。

本当はプログラムをいじってやるのがいいのでしょうが、私のような知識のない人間がいじって元に戻らなくなってはシャレにならないので、今回はプラグインで一発解決する方法を選びました。

ちなみにインストールしようと考えている人のために、私がインストールした時の環境を教えておきます。

私がインストールした時の環境

テーマ:AFFINGER4

インストール済みプラグイン

PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法
スポンサーリンク

「Autoptimize」インストールと設定

WordPressに「Autoptimize」をインストールした後に設定をしていきます。

PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法
[プラグイン]→[新規追加]ページで「Autoptimize」と検索します。

[今すぐインストール]をクリックして[有効化]をクリックします。

PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法

下にスクロールして「Autoptimize」の[設定]をクリックします。

スポンサーリンク
PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法

今回の設定では[HTMLオプション][JavaScriptオプション][CSSオプション]の3つにチェックを入れました。

チェックを入れたら[変更を保存してキャッシュを削除]をクリックします。

※[HTMLオプション]のチェックは関係あるのか?

PageSpeed Insightsでは「ブロックしているJavaScript/CSSを排除する」だけなので、[HTMLオプション]は関係がないように思いましたが、[HTMLオプション]にチェックを入れたほうがPageSpeed Insightsのスコアが上がりました。

これにチェックを入れるとどうなるのか、というとHTMLソースの無駄なタグ(改行、スペース)がなくなりページが軽くなります。

ただ、HTMLソース、CSSソースを頻繁にいじっている人はタグの場所がわかりずらくなるようなので、そういう人は[HTMLオプション]のチェックを入れないほうがいいかもしれません。

まとめ

今回の記事では、PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の修正方法について書きました。

「Autoptimize」というプラグインですが、正直インストールして不具合が起きたらどうしようと思いながら実行してみました。

しかし、特にデザインが崩れたり、表示するはずの画像が表示されなかったりといった不具合もなく設定は完了しました。

実際に「Autoptimize」で最適化することによってPageSpeed Insightsのスコアが上がることを確認しました。

このプラグインを入れたからといって修正項目がすべて消えるわけではありません。

あくまでも最適化できるところをやってくれるというだけなので、修正できない部分は検索されて残ります。

ただ、手動でプログラムをいじって最初からやるよりは全然楽ですね。

関連記事

最後までお読みいただき、ありがとうございました♪ 応援クリックをいただけると励みになります♪
人気ブログランキングへ

-SEO

Copyright© アフィリエイトブログの始め方-月収100万円稼ぐまでの道のり , 2018 AllRights Reserved Powered by AFFINGER4.

%d人のブロガーが「いいね」をつけました。