Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GoogleChrome開発者ツールを使ったサイト高速化手順
Search
株式会社シャーロック
March 06, 2024
Marketing & SEO
0
70
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
塗装店向けWebマーケティング
sherlocksinc
0
600
GA4のeコマーストラッキング設定方法
sherlocksinc
0
52
選挙における有料ネット広告配信について
sherlocksinc
0
110
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
1k
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
560
GA4でサイト内検索の語句を取得
sherlocksinc
0
120
動画広告で成功する5つのコツ
sherlocksinc
0
76
ユーザーの知りたい事を書こう
sherlocksinc
0
270
GA4設定確認マニュアル
sherlocksinc
0
95
Other Decks in Marketing & SEO
See All in Marketing & SEO
How to Optimise 3,500 Product Descriptions for eCommerce in One Day Using ChatGPT & Make
katarinadahlin
PRO
1
1.4k
Deer in the City
reubenj
0
330
Smarter Search Strategies: Diversifying Ad Platforms in the Age of AI
yourppcdoc
1
150
The End of SEO As We Know It
ipullrank
3
1.9k
Despegando en Google Discover: 14 horas de vuelo para vender unos auriculares
clarasoteras
1
210
0-Click SEO. How to optimize for visibility, awareness and memorability.
gfiorelli1
0
230
Sitekwaliteit is dé nr. 1 ranking factor - Eduard Blacquière - SEO Benelux meetup (mei 2025)
seoproacademy
0
160
YouTube Keyword Research 2.0
philnottingham
0
340
What the f**k is alt-text, and how do you write it?
liamcumber
0
400
Joao Filipe Pereira - Predicting Core Web Vitals impact using Google Sheets [BrightonSEO April 2025]
joao_f_pereira
1
360
La Brand SERP come asset strategico SEO - Valentina Lepore
valijolie
0
120
Scaling AI on a budget - responsibly!
eminadw
3
480
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Unsuck your backbone
ammeep
671
58k
Fireside Chat
paigeccino
39
3.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Producing Creativity
orderedlist
PRO
347
40k
Code Review Best Practice
trishagee
71
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Facilitating Awesome Meetings
lara
55
6.5k
Transcript
1 おおいたウェブマーケティング塾 GoogleChrome開発者ツールを 使ったサイト⾼速化⼿順
2 1. 現状の概要を把握する 「キャッシュを無効化」 にチェックしてからペー ジを開く。 画像なども含め、ページ を読み込むのにかかった 秒数。早い⽅が良い。 画像なども含め、ページ
を読み込むのに転送した データ容量。
3 2. 読み込みが遅いファイルを特定する ページ内の各ファイル(JS や画像なども含め全て)ご とに、ファイルサイズや読 み込み時間が表⽰される。 サイズが⼤きかったり、読み 込み時間が⻑くかかってるも のがあれば、サイズ削減がで
きないか検討する。
4 3. 読み込みが遅い原因を特定する ウォーターフォールのバー が⻑いものをひとつクリッ クすると、 読み込みの中でも、どの段階 で時間がかかってるのかが分 かる。
5 5. まずは画像を圧縮しよう • 最も改善幅の⼤きなものは、画像の圧縮です。 • JSやHTMLファイルなど、テキストファイルをチマチマ短くしても、実 際全く変わりません。 • それよりも画像を圧縮した⽅が、効果が圧倒的に⼤きいです。
• TinyPNG(「パンダ 圧縮」で検索)など、画像を荒くせずに⼩さくする サービスを使ってみて下さい。
6 6. ページ上部を早く表⽰しよう • 読み込みスピードが変わらなくても「ページ上部を早く⾒せる」だけで も、快適さがアップします。 • とにかく上部を早く⾒せるだけで、お客さんは早くページが表⽰された と感じるからです。 •
これはFCPと呼ばれていまして、PageSpeed Insightsで時間を計測でき ます。 ページ上部が表⽰されるまでに2.7秒か かっている例。 これくらいだとお客さんはかなり遅く 感じ、離脱の可能性が⾼まるレベル。
7 7. 必要なファイルだけを読むようにする • ページ上部にはデザインのあしらいとしてイメージ画像がよく使われますが、 お客さんを待たせるだけだなと判断すれば、使わないという選択もアリです。 • あとは使っていないJSやCSSを読み込まないとか、Webフォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。