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

ブログ内検索

※本記事はプロモーションが含まれています。

ブログ作成

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

2017年4月15日

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

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

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

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

PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを~」を修正するのに使った「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の「スクロールせずに見えるコンテンツのレンダリングを~」を修正する方法

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

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

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

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

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

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

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

関連記事

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

人気おすすめ記事

  • この記事を書いた人

孔雀

ハンドルネーム:孔雀 2004年にアフィリ業界に参入。 2017年から脱サラし、専業アフィリエイターに転職。 ほぼ独学でSEO、マーケティングを学び、2018年6月にアフィリエイトのみで月収50万円を達成。 誰にも縛られない自由な生活を求めて日々精進中。 最終目標は、何もせずに収入が入ってくる不労所得を作り出すこと。 孔雀のブログ「専業アフィリエイター孔雀のつぶやき」ではプライベートな情報も発信中です。

-ブログ作成

© 2024 孔雀イズム