Insightの最適化Tweetページの表示速度はサイトの集客を考える上でとても大切です。ユーザーはなるべく早く情報に辿りつきたいと思っているので表示速度が遅ければストレスを与えることになり直帰の原因にもなってしまいます。自分のサイトの表示が遅いと感じた場合には表示速度の改善を考えましょう。Insightsとはgoogleが提供しているサービスの一つで、サイトの表示速度を計測して点数化してくれるものです。弊社のサイトの点数を計測してみます。結果はPC「52点」モバイル「43点」という結果がでました。点数の結果が85点以上がよいサイトだとされているので、現在の点数はよくありません。いう訳でgoogleの指示に従い改善を行っていきます。処理が必要なものは大きくわけて2つあります。「修正が必要」なもの、「修正を考慮」するものです。点数が減点される要因の大半が「修正が必要」なものにあるので、今回は「修正が必要」なものを修正していきます。弊社のサイトで「修正が必要」なものは画像を最適化するブラウザのキャッシュを活用する圧縮を有効にするスクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/cssを排除するでした。4つともそれぞれ別の処理を行う必要があるので、順番に1つずつ説明していきます。画像を最適化する一部の画像の容量を削ることで表示速度を改善できるようです。「詳細を表示」で問題のある画像を一覧で確認し全てコピーします。コピーしたものをテキストエディタに貼り付けて、templateファイル内の画像とwordpressにuploadsしたものを分けます。次に画像を圧縮するために「kraken.io」を開きます。圧縮方法の選択ができ、複数の画像の圧縮が行えるのでとても便利です。insightsの指摘で「ロスレス圧縮すると」とあったのでkraken.ioで画像のように「LOSSLESS」を選択。テキストエディタで分けたtemplateファイル内の画像をimgフォルダから選択してkraken.ioにドラッグ&ドロップします。すると自動で圧縮が始まります。Files」で全ての画像をダウンロードします。ダウンロードしたzipファイルを開き中の画像を全て選択し、圧縮前のimgフォルダ内の画像と置き換えます。これで「画像の最適化」は完了です。uploadsした画像の最適化wordpressへuploadsした画像を圧縮する方法を説明します。Optimizer」をインストールして有効化します。Optimizer」はプラグインを有効化しておくだけで、アップロードの際に画像を自動圧縮してくれます。アップロードしてある画像の圧縮も可能ですが必要な処理があるので以下で説明します。Optimize」で「適用」します。Optimizing」で圧縮を実行します。圧縮が完了するとどれだけ圧縮できたか確認できます。Images」を選択して実行することで全ての画像の圧縮が始まります。以上がuploadsした画像の圧縮方法になります。ブラウザのキャッシュを活用するブラウザのキャッシュを活用することで、読み込むサイトのデータ量を減らすことができるので、表示速度が早くなるようです。html,css,javascript,画像などそれぞれサイトに適切なキャッシュの有効期限を決めていきましょう。キャッシュの有効期限を決めるにはhtaccessというファイルを修正していきます。「public_html」内にhtaccessがあるのでそれをテキストエディタで開きます。htaccessに下のコードを追加します。C#キャッシュの有効期限を設定する。</ifModule>1234567891011121314#キャッシュの有効期限を設定する。days"期限はできれば長いほうがいいですが、頻繁に変更する可能性のあるものは一日や一週間に設定する必要があります。弊社のサイトはスタイルの変更が頻繁にあるわけではないので上記のようにcssを一週間に設定してみました。これで「ブラウザのキャッシュを活用する」は完了です。圧縮を有効にする画像同様、ファイルのサイズを圧縮することでブラウザへの負担を減らすことができます。圧縮を有効にするために、再びhttaccessを修正していきます。キャッシュの活用で処理したhtaccessをテキストエディタで開き下のコードを追加します。application/x-javascriptこれでファイルの「圧縮の有効化」ができました。スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/cssを排除する。難しい言い回しなので簡単に説明をします。ブラウザでwebページを表示した時にスクロールせずに見える部分が、ユーザーが最初に目にするページの部分となります。ブラウザは優先的にスクロールせずに見える部分の情報を読み込もうとします。ブラウザがその情報を読み込む際にjavascriptやcssがあるとそちらを読み込もうとするので、必要な情報の読み込みを遅らせて。スクロールせずに見える部分に必要でないjavascriptやcssはできるだけあとで読み込むように処理をしましょうということです。今回はjavascriptを非同期にすることで解決をしてみたいと思います。スクロールせずに見える部分には必要のないjavascriptに対してasync属性を追加していきます。async></script>このようにasync属性を追加することでjavascriptが読み込みをブロックすることを防ぐことができます。CSS」でインストールできたら有効化します。画像のようにsettingをしたらcssの配置の最適化は完了です。改善後の計測結果はPC「81点」モバイル「71点」でした。改善が難しいものもあるので「修正を考慮」がいくつか残っていますがPC,モバイルそれぞれ約30点も点数を上げることができました。改善の処理の方法は他にもあるようなので、いろいろ試して高得点を目指していきたいです。今回の記事で説明した処理自体は1時間ほどでできるので表示速度の改善のために是非試してみてください。Tweetこの記事を読んだ人は、こんな記事も読んでいます。