Page Speed InsightsでWebページを高速化してみた。

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on RedditShare on LinkedIn

PageSpeedInsights

ウェブページの表示高速化対策をアドバイスをしてくれるGoogle Chromeの機能拡張、「Page Speed Insights」を使ってみました。

友人の3G端末で「山本忠敬の世界」を表示してみた所、非常に時間が掛かってたしまったのが、そもそものきっかけです。

使い方は簡単。Google Chromeで「Page Speed Insights」にアクセスし、高速化したいページのURLを入力後、「分析」をクリックすれば、色々と詳しくアドバイスしてくれます。

今回はアドバイスのうち、「画像を最適化する」と「JavaScript の読み込みを遅らせる」を実施してみました。

まず画像の最適化ですが、Web上にある無料の画像圧縮ツールを使いました。

PNGはTinyPNG、JPEGはJPEG & PNG Image Compressionを使えば、いずれもファイルのドラッグ&ドロップで圧縮してくれます。PageSpeed Insightsで指摘された画像を、これらのツールで全て最適化したところ、1MB以上サイズを圧縮する事が出来ました。

次にJavaScriptですが、jQueryなどの外部スクリプトの読み込みを「スクロールせずに見える範囲のコンテンツが配信されるまで遅延させる」ようにしました。具体的にはHTML の async 属性を使用し、

script async src=”jquery.min.js”

という具合に記述を変更しました。

他にもまだまだ改善すべき点はあるかとは思いますが、上記に紹介した最適化は極めて簡単に実施出来ますので、お勧め致します。

Sponsored Links

LINEで送る
Pocket

Add a Comment

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