google pagespeed insights 得点向上のための改善 - vasily...

Google PageSpeeds Insights得点向上のための改善

Presented by

Created by Kubo Shizuma

期間 2015.8.3 ~ 2015.8.13

久保静真

VASILY フロントエンド　インターン成果報告

プロフィール


久保静真

東京大学工学部システム創成学科

VASILY インターン 2015.8.3~2015.8.13

学生向けイベントキュレーションサイト facevent （ http://facevent.jp/ ）の開発を契機にプログラミングの世界に入る。

その後、 facevent の開発チームで他サイトも作成。また、それと平行して長期インターンを 2 社経験。

現在、プログラミングスクール TECH::CAMP メンターや他 Rails 開発に携わる。

プログラム


目的目的と目標

初期状態

結論結果

学び

改善策

JavaScript/CSS 画像の最適化

ブラウザのキャッシュ

目的と目標


テーマiQON の PC トップページにおいてGoogle の PageSpeed Insights の点数を上げる

PageSpeed Insights は、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれる。

目的と目標


iQON の PC トップページの改善前の点数

35/100

画像の最適化


35/100 -> 80 /100

目標

プログラム



初期状態

結論結果

学び

改善策



初期状態


Google からのメッセージ

修正が必要

修正を考慮

・画像を最適化する・ブラウザのキャッシュを活用する

・スクロールせずに見えるコンテンツのレンダリングを　ブロックしている JavaScript/CSS を排除する・サーバーの応答時間を短縮する

プログラム



初期状態

結論結果

学び

改善策



JavaScript/CSS


1. スクロールせずに見えるコンテンツのレンダリングを　ブロックしている JavaScript/CSS を排除する

JavaScript

下記のように、 html に async 属性を付与。このようにすることで、 JavaScript の読み込みを遅らせ、ページの読み込みを妨げないようにする。 <script async src="my.js">

JavaScript リソースで document.write を使用している場合は、非同期の読み込みを安全に使用できません。 document.write を使用するスクリプトは、別の方法を使用するように書き直すことをおすすめします。また、 JavaScript を非同期的に読み込む際に、ページで互いに依存している複数のスクリプトを読み込む場合は、アプリケーションで適切な依存関係の順序でスクリプトを読み込むように注意を払う必要があります。

引用： Google

JavaScript/CSS


CSSCSS ファイルを html の head 内にインライン化する。インライン化では CSS の読み込みをせずに直接 head 内に style を記述する。

<head> <style>…</style></head>

<head> <style> <link rel…> </style></head>

大きな CSS ファイルの場合は、スクロールせずに見える範囲のコンテンツのレンダリングに必要な CSS を特定してインライン化し、残りのスタイルの読み込みはスクロールせずに見える範囲のコンテンツの後まで遅らせる必要があります。

引用： Google

JavaScript/CSS


JavaScript 、 CSS とも今回の対応で「修正を考慮」の項目はクリアしたが、点数自体は変化がなかった。

プログラム



初期状態

結論結果

学び

改善策



画像の最適化


2. 画像を最適化

1

2

3

画像の圧縮率を上げる

画像のサイズを適切にする

不要なメタデータは削除する

画像を最適化するために

画像の最適化


ⅰ. static な画像の最適化

手動で画像の quality 、メタデータの削除

ⅱ. CMS で登録した画像の最適及び新しい　　　　サイズの画像の生成

初期： 750x750 、 300x300 の 2 種類 =>quality の最適化、メタデータの削除さらに、サイズ 150x150 の small サイズを準備

メタデータ：撮影日時やカメラの設定、画像加工ソフトの情報などのデータ。今回は著作権がクリアな素材であるため削除を行う。

画像の最適化


＊ AWS S3 内にて一括で画像の最適化及び新しいサイズの画像を生成するための batch ファイルを作成。＊ AWS S3 内の画像を一括でダウンロードし backup フォルダを作成する batch ファイルを作成。

画像の最適化


ⅲ. CMS で登録時に画像が最適化されるように変更

CMS で記事を登録時に画像を最適化するように変更 =>quality ・サイズの最適化、メタデータの削除

画像の最適化


35/100 -> 65 /100

点数の途中経過

プログラム



初期状態

結論結果

学び

改善策





3. ブラウザのキャッシュを活用する

画像内のメタデータにキャッシュに関するデータを追加画像のメタデータに Cache-Control: max-ageヘッダーの設定

＊ AWS 内の任意のフォルダにメタデータを追加するための batch ファイルを作成。



35/100 -> 78 /100




35/100 -> 78 /100


目標 80 /100 まであと少し足りない…

やれることはやったはずだが、



そうだ、遅延ローディングだ！

画像の quality を維持したかった画像のデータ量が大きいままだった

プログラム



初期状態

結論結果

学び

改善策


ブラウザのキャッシュ遅延ローディング

遅延ローディング


4. 画像を遅延ローディングする ⅰ. jQuery プラグイン lazy-load を導入

画面下部のアイテムランキングの画像を遅延ローディング

遅延ローディング


ⅱ. カルーセルの画像を遅延ローディング

カルーセルで初期で表示される画像とその両隣の画像以外を遅延ローディング ( はじめにカルーセルを移動するタイミングで残りの画像を読み込む )

プログラム



初期状態

結論結果

学び

改善策



結果


結果

35/100 -> 85 /100

目標到達 !!

プログラム



初期状態

結論結果

学び

改善策



学び


所感

◇　 35/100 から 85/100 まで点数を上げられて、目標に到達したので達成感！

◇　 78/100 で目標の 80 点まで若干届かなかったときは焦った。

◇　 facevent は PageSpeed Insights で点数がおそろしく低いのでこちらも改善しないと…

学び


◇　開発から deploy までの一連の流れと　　 deploy の責任と楽しさ

◇　自分の技量の足りなさと今後の指針

インターンを通して

今回のインターンでは、この PageSpeed Insights以外にもタスクをこなし、社員さんと同じように deploy まで作業でき、直接技術的な手ほどきも受けられてとても勉強になりました！ありがとうございました！！

おわりに



初期状態

結論結果

学び

改善策



- 今回のプログラムを紹介してこれでおわりとします。

google pagespeed insights 得点向上のための改善 - vasily...

Internet