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
24
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
GA4のeコマーストラッキング設定方法
sherlocksinc
0
12
選挙における有料ネット広告配信について
sherlocksinc
0
31
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
260
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
180
GA4でサイト内検索の語句を取得
sherlocksinc
0
70
動画広告で成功する5つのコツ
sherlocksinc
0
43
ユーザーの知りたい事を書こう
sherlocksinc
0
120
GA4設定確認マニュアル
sherlocksinc
0
34
自治体向けネット広告で効果を出すコツ5選
sherlocksinc
0
190
Other Decks in Marketing & SEO
See All in Marketing & SEO
SEO, automatización & AI en grandes portales
estevecastells
PRO
1
450
Short term wins to build compounding SEO ROI
kevingibbons
0
140
Counterintuitive SEO - How to Achieve SEO Goals Going Beyond SEO Best Practices #BBSEO23
aleyda
6
1.4k
TikTok SEO @ BrightonSEO
mathoej
0
720
Building Data That Grows With You
samtorres
0
380
Brighton SEO
abbiedando
0
140
How to do anything in the Chrome DevTools Network panel
nathanless
PRO
0
330
Arabic SEO: How to engage 400+ million Arabic Speakers
taleb
0
230
Google‘s messy middle and what (ecommerce) SEOs need to know about it
neoseo
0
210
Addressing the gaps between SEO and CX
collettemdl
1
110
vandapokecz-brightonseo-presentation-September 2023
vandalillapokecz
0
340
Tips and Tricks for Understanding User Search Intent
charlesmeaden
0
100
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
44
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Become a Pro
speakerdeck
PRO
12
4.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Gamification - CAS2011
davidbonilla
77
4.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Side Projects
sachag
451
41k
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フォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。