Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Google PageSpeeds Insights
得点向上のための改善
Presented by
Created by Kubo Shizuma
期間 2015.8.3 ~ 2015.8.13
久保 静真
VASILY フロントエンド イン...
プロフィール
Created by Kubo Shizuma
久保 静真
東京大学工学部システム創成学科
VASILYインターン 2015.8.3~2015.8.13
学生向けイベントキュレーションサイトfacevent(http://face...
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ
目的と目標
Created by Kubo Shizuma
テーマ
iQONのPCトップページにおいて
Google の PageSpeed Insights の点数を上げる
PageSpeed Insightsは、ウェブページのコンテンツを解...
目的と目標
Created by Kubo Shizuma
iQONのPC トップページの改善前の点数
35/100
画像の最適化
Created by Kubo Shizuma
35/100 -> 80/100
目標
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ
初期状態
Created by Kubo Shizuma
Googleからのメッセージ
修正が必要
修正を考慮
・画像を最適化する
・ブラウザのキャッシュを活用する
・スクロールせずに見えるコンテンツのレンダリングを
ブロックしている Java...
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ
JavaScript/CSS
Created by Kubo Shizuma
1. スクロールせずに見えるコンテンツのレンダリングを
ブロックしている JavaScript/CSS を排除する
JavaScript
下記のように、htmlにas...
JavaScript/CSS
Created by Kubo Shizuma
CSS
CSSファイルをhtmlのhead内にインライン化する。
インライン化ではCSSの読み込みをせずに直接head内にstyleを記述する。
<head>
<st...
JavaScript/CSS
Created by Kubo Shizuma
JavaScript、CSSとも今回の対応で「修正を考慮」の項目
はクリアしたが、点数自体は変化がなかった。
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ
画像の最適化
Created by Kubo Shizuma
2.画像を最適化
1
2
3
画像の圧縮率を上げる
画像のサイズを適切にする
不要なメタデータは削除する
画像を最適化するために
画像の最適化
Created by Kubo Shizuma
ⅰ. staticな画像の最適化
手動で画像のquality、メタデータの削除
ⅱ. CMSで登録した画像の最適及び新しい
サイズの画像の生成
初期:750x750、300x300の...
画像の最適化
Created by Kubo Shizuma
*AWS S3内にて一括で画像の最適化及び新しいサイズの
画像を生成するためのbatchファイルを作成。
*AWS S3内の画像を一括でダウンロードし
backupフォルダを作成する...
画像の最適化
Created by Kubo Shizuma
ⅲ. CMSで登録時に画像が最適化されるように変更
CMSで記事を登録時に画像を最適化するように変更
=>quality・サイズの最適化、メタデータの削除
画像の最適化
Created by Kubo Shizuma
35/100 -> 65 /100
点数の途中経過
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ
ブラウザのキャッシュ
Created by Kubo Shizuma
3.ブラウザのキャッシュを活用する
画像内のメタデータにキャッシュに関するデータを追加
画像のメタデータにCache-Control: max-ageヘッダーの設定
*AWS...
ブラウザのキャッシュ
Created by Kubo Shizuma
35/100 -> 78 /100
点数の途中経過
ブラウザのキャッシュ
Created by Kubo Shizuma
35/100 -> 78 /100
点数の途中経過
目標 80/100 まであと少し足りない…
やれることはやったはずだが、
ブラウザのキャッシュ
Created by Kubo Shizuma
そうだ、遅延ローディングだ!
画像のqualityを維持したかった画像のデータ量が大きいままだった
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ 遅延ローディング
遅延ローディング
Created by Kubo Shizuma
4.画像を遅延ローディングする
ⅰ. jQueryプラグインlazy-loadを導入
画面下部のアイテムランキングの画像を遅延ローディング
遅延ローディング
Created by Kubo Shizuma
ⅱ. カルーセルの画像を遅延ローディング
カルーセルで初期で表示される画像とその両隣の画像以外を遅延ローディング
(はじめにカルーセルを移動するタイミングで残りの画像を読み込む)
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ 遅延ローディング
結果
Created by Kubo Shizuma
結果
35/100 -> 85 /100
目標到達!!
プログラム
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ 遅延ローディング
学び
Created by Kubo Shizuma
所感
◇ 35/100から85/100まで点数を上げられて、
目標に到達したので達成感!
◇ 78/100で目標の80点まで若干届かなかったときは焦った。
◇ faceventはPageSp...
学び
Created by Kubo Shizuma
◇ 開発からdeployまでの一連の流れと
deployの責任と楽しさ
◇ 自分の技量の足りなさと今後の指針
インターンを通して
今回のインターンでは、このPageSpeed Insight...
おわりに
Created by Kubo Shizuma
目的
目的と目標
初期状態
結論
結果
学び
改善
策
JavaScript/CSS 画像の最適化
ブラウザのキャッシュ 遅延ローディング
- 今回のプログラムを紹介してこれでおわりとし...
Upcoming SlideShare
Loading in …5
×

Google PageSpeed Insights 得点向上のための改善 - VASILY フロントエンドインターン 成果報告-

2,078 views

Published on

VASILY フロントエンドインターンの成果報告です。
Google PageSpeed Insightsの得点を向上させるためにさまざまな改善策を取りました。

Published in: Internet
  • Be the first to comment

Google PageSpeed Insights 得点向上のための改善 - VASILY フロントエンドインターン 成果報告-

  1. 1. Google PageSpeeds Insights 得点向上のための改善 Presented by Created by Kubo Shizuma 期間 2015.8.3 ~ 2015.8.13 久保 静真 VASILY フロントエンド インターン 成果報告
  2. 2. プロフィール Created by Kubo Shizuma 久保 静真 東京大学工学部システム創成学科 VASILYインターン 2015.8.3~2015.8.13 学生向けイベントキュレーションサイトfacevent(http://facevent.jp/)の 開発を契機にプログラミングの世界に入る。 その後、faceventの開発チームで他サイトも作成。 また、それと平行して長期インターンを2社経験。 現在、プログラミングスクールTECH::CAMPメンターや他Rails開発に携わる。
  3. 3. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ
  4. 4. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ
  5. 5. 目的と目標 Created by Kubo Shizuma テーマ iQONのPCトップページにおいて Google の PageSpeed Insights の点数を上げる PageSpeed Insightsは、ウェブページのコンテンツを解析し、 ページの読み込み時間を短くするための方法を提案してくれる。
  6. 6. 目的と目標 Created by Kubo Shizuma iQONのPC トップページの改善前の点数 35/100
  7. 7. 画像の最適化 Created by Kubo Shizuma 35/100 -> 80/100 目標
  8. 8. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ
  9. 9. 初期状態 Created by Kubo Shizuma Googleからのメッセージ 修正が必要 修正を考慮 ・画像を最適化する ・ブラウザのキャッシュを活用する ・スクロールせずに見えるコンテンツのレンダリングを ブロックしている JavaScript/CSS を排除する ・サーバーの応答時間を短縮する
  10. 10. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ
  11. 11. JavaScript/CSS Created by Kubo Shizuma 1. スクロールせずに見えるコンテンツのレンダリングを ブロックしている JavaScript/CSS を排除する JavaScript 下記のように、htmlにasync属性を付与。 このようにすることで、JavaScriptの読み込みを遅らせ、 ページの読み込みを妨げないようにする。 <script async src="my.js"> JavaScript リソースで document.write を使用している場合は、 非同期の読み込みを安全に使用できません。document.write を使用するスクリプトは、 別の方法を使用するように書き直すことをおすすめします。 また、JavaScript を非同期的に読み込む際に、ページで互いに依存している 複数のスクリプトを読み込む場合は、アプリケーションで適切な依存関係の順序でスクリプトを 読み込むように注意を払う必要があります。 引用:Google
  12. 12. JavaScript/CSS Created by Kubo Shizuma CSS CSSファイルをhtmlのhead内にインライン化する。 インライン化ではCSSの読み込みをせずに直接head内にstyleを記述する。 <head> <style>…</style> </head> <head> <style> <link rel…> </style> </head> 大きな CSS ファイルの場合は、スクロールせずに見える範囲のコンテンツの レンダリングに必要な CSS を特定してインライン化し、残りのスタイルの読み込みは スクロールせずに見える範囲のコンテンツの後まで遅らせる必要があります。 引用:Google
  13. 13. JavaScript/CSS Created by Kubo Shizuma JavaScript、CSSとも今回の対応で「修正を考慮」の項目 はクリアしたが、点数自体は変化がなかった。
  14. 14. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ
  15. 15. 画像の最適化 Created by Kubo Shizuma 2.画像を最適化 1 2 3 画像の圧縮率を上げる 画像のサイズを適切にする 不要なメタデータは削除する 画像を最適化するために
  16. 16. 画像の最適化 Created by Kubo Shizuma ⅰ. staticな画像の最適化 手動で画像のquality、メタデータの削除 ⅱ. CMSで登録した画像の最適及び新しい サイズの画像の生成 初期:750x750、300x300の2種類 =>qualityの最適化、メタデータの削除 さらに、サイズ150x150のsmallサイズを準備 メタデータ:撮影日時やカメラの設定、画像加工ソフトの 情報などのデータ。今回は著作権がクリアな素材であるため 削除を行う。
  17. 17. 画像の最適化 Created by Kubo Shizuma *AWS S3内にて一括で画像の最適化及び新しいサイズの 画像を生成するためのbatchファイルを作成。 *AWS S3内の画像を一括でダウンロードし backupフォルダを作成するbatchファイルを作成。
  18. 18. 画像の最適化 Created by Kubo Shizuma ⅲ. CMSで登録時に画像が最適化されるように変更 CMSで記事を登録時に画像を最適化するように変更 =>quality・サイズの最適化、メタデータの削除
  19. 19. 画像の最適化 Created by Kubo Shizuma 35/100 -> 65 /100 点数の途中経過
  20. 20. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ
  21. 21. ブラウザのキャッシュ Created by Kubo Shizuma 3.ブラウザのキャッシュを活用する 画像内のメタデータにキャッシュに関するデータを追加 画像のメタデータにCache-Control: max-ageヘッダーの設定 *AWS内の任意のフォルダにメタデータを追加するためのbatchファイルを作成。
  22. 22. ブラウザのキャッシュ Created by Kubo Shizuma 35/100 -> 78 /100 点数の途中経過
  23. 23. ブラウザのキャッシュ Created by Kubo Shizuma 35/100 -> 78 /100 点数の途中経過 目標 80/100 まであと少し足りない… やれることはやったはずだが、
  24. 24. ブラウザのキャッシュ Created by Kubo Shizuma そうだ、遅延ローディングだ! 画像のqualityを維持したかった画像のデータ量が大きいままだった
  25. 25. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ 遅延ローディング
  26. 26. 遅延ローディング Created by Kubo Shizuma 4.画像を遅延ローディングする ⅰ. jQueryプラグインlazy-loadを導入 画面下部のアイテムランキングの画像を遅延ローディング
  27. 27. 遅延ローディング Created by Kubo Shizuma ⅱ. カルーセルの画像を遅延ローディング カルーセルで初期で表示される画像とその両隣の画像以外を遅延ローディング (はじめにカルーセルを移動するタイミングで残りの画像を読み込む)
  28. 28. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ 遅延ローディング
  29. 29. 結果 Created by Kubo Shizuma 結果 35/100 -> 85 /100 目標到達!!
  30. 30. プログラム Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ 遅延ローディング
  31. 31. 学び Created by Kubo Shizuma 所感 ◇ 35/100から85/100まで点数を上げられて、 目標に到達したので達成感! ◇ 78/100で目標の80点まで若干届かなかったときは焦った。 ◇ faceventはPageSpeed Insightsで点数が おそろしく低いのでこちらも改善しないと…
  32. 32. 学び Created by Kubo Shizuma ◇ 開発からdeployまでの一連の流れと deployの責任と楽しさ ◇ 自分の技量の足りなさと今後の指針 インターンを通して 今回のインターンでは、このPageSpeed Insights以外にもタスクをこなし、 社員さんと同じようにdeployまで作業でき、 直接技術的な手ほどきも受けられてとても勉強になりました! ありがとうございました!!
  33. 33. おわりに Created by Kubo Shizuma 目的 目的と目標 初期状態 結論 結果 学び 改善 策 JavaScript/CSS 画像の最適化 ブラウザのキャッシュ 遅延ローディング - 今回のプログラムを紹介してこれでおわりとします。

×