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
25
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
GA4のeコマーストラッキング設定方法
sherlocksinc
0
12
選挙における有料ネット広告配信について
sherlocksinc
0
33
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
290
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
190
GA4でサイト内検索の語句を取得
sherlocksinc
0
71
動画広告で成功する5つのコツ
sherlocksinc
0
45
ユーザーの知りたい事を書こう
sherlocksinc
0
130
GA4設定確認マニュアル
sherlocksinc
0
36
自治体向けネット広告で効果を出すコツ5選
sherlocksinc
0
190
Other Decks in Marketing & SEO
See All in Marketing & SEO
PMとPMMの良い連携について話そう 〜急成長プロダクトBill OneとLoglassの事例〜 / Partnership between PM and PMM
ykmc09
1
940
Optimaliseren voor Groei: TUI's Succes met het adverteren op 2 Miljoen Zoekwoorden
louisvanbelle
0
140
E-E-A-T before it was cool
lindahogenes
1
1.6k
Everything I've Learned in 5 Years of Doing SEO on Shopify
lgef
1
190
Would You Still Want This Link If Google Didn't Exist?
brockbankjames
1
180
Ecommerce SEO: The Keys for Success in 2024 #SEOMeetup
aleyda
2
2k
Banana King
lyh125
0
720
bSEO - How to write THE perfect SEO ticket for your devs
pelogia
0
150
Managing Anxiety in You and Your Team
kayleydempsey
0
110
brightonSEO Set 23 - Exploiting XPath in ScreamingFrog and Google Sheets
pojda
0
370
Addressing the gaps between SEO and CX
collettemdl
1
170
Ehab Aboud | Uberall | Local SEO at scale: turning a single drop into a waterfall of impact
ehababoud
0
290
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
515
39k
Adopting Sorbet at Scale
ufuk
69
8.6k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4.1k
Design by the Numbers
sachag
274
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building Adaptive Systems
keathley
32
1.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Facilitating Awesome Meetings
lara
43
5.6k
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フォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。