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
32
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
GA4のeコマーストラッキング設定方法
sherlocksinc
0
20
選挙における有料ネット広告配信について
sherlocksinc
0
41
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
460
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
240
GA4でサイト内検索の語句を取得
sherlocksinc
0
74
動画広告で成功する5つのコツ
sherlocksinc
0
49
ユーザーの知りたい事を書こう
sherlocksinc
0
160
GA4設定確認マニュアル
sherlocksinc
0
40
自治体向けネット広告で効果を出すコツ5選
sherlocksinc
0
240
Other Decks in Marketing & SEO
See All in Marketing & SEO
How to explain what you do in 10 sticky, memorable words - BrightonSEO
charlihunt
2
130
Google SGE: Estado actual, riesgos y oportunidades - #SEOCAMP
aleyda
0
410
Measure the whole SERP at any scale #brightonSEO
raygrieselhuber
PRO
1
450
Going beyond "what happened" in SERP analytics
raygrieselhuber
PRO
2
470
[Brighton SEO] Beyond ChatGPT: Secrets to Dominate SEO and Create Captivating Content with AI
samanyougarg
0
530
Microsoft Clarity なら、初心者もニッコリ☺️ユーザー行動の分析からサイトの改善ポイントを探ろう
kosgis
2
450
SEOloger 75: CX a SEO - Lukáš Pítra
pavelungr
0
170
Short term wins to build compounding SEO ROI
kevingibbons
1
160
Sponsored posts, parasite SEO, helpful content and what to make out of it all - BrightonSEO April 2024
zangoosed
4
460
Advancing your SEO Career - 15 Tips from my own SEO Journey #WTSFest
aleyda
6
1.3k
SNS運用支援サービス ”リベラバ” 実績(出光興産様)
ln0721
0
270
Unlocking SEO and Revenue with Accessibility
scudamore
0
300
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Designing for Performance
lara
604
67k
Debugging Ruby Performance
tmm1
71
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Side Projects
sachag
451
42k
It's Worth the Effort
3n
181
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Happy Clients
brianwarren
94
6.6k
Web development in the modern age
philhawksworth
203
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
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フォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。