東京のWeb制作会社LIGLIGならできるおもしろいこと。ライフシェアこんにちは、ライターのモリイです。Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。たかがページの読み込み時間、と侮ることはできません。読み込み時間が短くなることで、Googleに評価される。ユーザーにストレスをあたえない。いうメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。ページの読み込みスピードを分析してみる画面中央のフォームにサイトのURLを入力し、「分析」をクリックします。モバイルで読み込んだ場合と、パソコンで読み込んだ場合の両方で、スコアと改善内容が表示されます。ダメですね......反省です。ここから心機一転し、改善に取り組みます。ツールから提案された修正項目は以下になります。排除するブラウザのキャッシュを活用するHTML,CSS,JavaScriptを縮小するあまり馴染みのない項目もありますが、やっていきましょう。実際に改善してみよう各提案にはGoogleから推奨される解決方法が記載されています。順番にやっていきます。サイズを大きく削減できます」と言っています。そこで、画像圧縮ツールを使用し、画像のサイズを小さくしましょう。「でも、画像加工ソフトを持っていない」という方もいるかもしれません。その場合はWebサービスを使いましょう。pngファイルであれば、ドラッグ・アンド・ドロップするだけの「TinyPNG」が便利です。jpegファイルであれば、「JPEGmini」なんていかがでしょうか。以下のような画像圧縮プラグインを利用することもできます。Optimizerhttps://wordpress.org/plugins/ewww-image-optimizer/(使い方の詳細については、日本語解説記事もあります)これでだいぶページが軽くなりました。それでは、次に行きます。排除するGoogleはJavaScriptについて、2通りの解決方法を推奨しています。インライン化するこれは、外部スクリプトの内容が小さい場合はHTMLに直接記述することでJavaScriptの読み込みを減らしてページの表示を速くするというものです。残念ながら今回は対応できそうなものがなかったので実行はしませんでした。読み込みを遅らせるこれはHTMLのscript要素にasync属性を記述するというものです。これによってJavaScriptを非同期で読み込むことができます。今回は上記の内容に加え、JavaScriptをwp_footer()内で呼び出すようにしました。本来であればwp_head()内で読み込まれることが多いかと思いますが、wp_enqueue_scriptを実行する際に、パラメーターの最後にtrueを記述することでwp_footer()内で呼び出すようにしています。利用状況によってレイアウトが崩れたり、思った挙動がされなくなることがありますので、1つ1つ確認して実装しましょう。プラグインを利用することで、実装することもできます。Javascripthttps://wordpress.org/plugins/asynchronous-javascript/次は、CSS配信の最適化を行います。Googleは、次の3つの解決方法を推奨しています。先ほどのJavaScriptの例と同じように、HTMLに直接記述をすることで読み込みするファイルを減らすというものです。これはすぐ出来ますね。インライン化しない小さなCSSファイルをインライン化すると読み込みファイルを減らすことができますが、データ量の多いものをインライン化するとスクロールせずに見える範囲のCSSのサイズが大きくなり、読み込み時間が遅くなってしまいます。)をインライン化するのはできるだけ避けてください。例によって、プラグインを利用することで、実装することもできます。ブラウザのキャッシュを活用するこれについては、.htaccessを設置してブラウザキャッシュを設定することにより解決できます。.htaccessは、設置したディレクトリ以下に適用されます。弊社の場合はWordPressインストール時に展開されたディレクトリ内に置きました。.htaccess内に以下の内容を記載してください。month”</ifModule>なお、Apacheのモジュール「mod_expires」に対応している必要があります。記述する期間はサイトの運用状況によって変更が必要になります。キャッシュ系のプラグインは、扱いが難しいので推奨はいたしません。HTML,CSS,JavaScriptを縮小するGoogleからは余分なスペース、改行、インデントなどの不要なバイトを取り除くことが必要だと言われています。Webサービスで実装できるものがあります。Refresh-SFhttp://gpbmike.github.io/refresh-sf/対象ファイルをドラッグ・アンド・ドロップして、右上のJavascript・CSS・HTMLの該当するボタンをクリックします。改善してみた結果スコアは上がりましたが、Googleはスコア85以上がパフォーマンスの高いページだと言っているので、まだまだ改善が必要ですね。まとめ上記以外にも改善方法はあるかと思います。サイトの運用状況によっては変更することで不具合が出ることもありますし、必ずしも全ての項目を修正できるとは限らないと思います。できる範囲で少しでもページの読み込み速度を速くすることができればいいと思います。みなさんも試してみてはいかがでしょうか。【Webサイト運用は、Googleのツールでもっと賢く。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。