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