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
69
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
塗装店向けWebマーケティング
sherlocksinc
0
560
GA4のeコマーストラッキング設定方法
sherlocksinc
0
52
選挙における有料ネット広告配信について
sherlocksinc
0
99
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
970
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
510
GA4でサイト内検索の語句を取得
sherlocksinc
0
110
動画広告で成功する5つのコツ
sherlocksinc
0
75
ユーザーの知りたい事を書こう
sherlocksinc
0
260
GA4設定確認マニュアル
sherlocksinc
0
86
Other Decks in Marketing & SEO
See All in Marketing & SEO
Umře SEO kvůli generativní AI?
pavelungr
0
220
Google Analytics 4 vs. Adobe Analytics
kieramonaghan
1
260
The State of Ecommerce SEO: How to Win in Today's Product SERPs [Featuring US & UK Insights] #Recommerce
aleyda
0
270
WordPress と SendGrid でユーザーコミュニケーション〜Webメディア受託制作の現場から
fumikito
0
300
Perfekte Prompts für ChatGPT & Co.: Wie du KI-Tools optimal nutzt
kaispriestersbach
0
150
会社説明資料|株式会社トライバルメディアハウス
tribal
0
830
Link Wars: The SEO Awakens
ajordanseo
0
170
Despegando en Google Discover: 14 horas de vuelo para vender unos auriculares
clarasoteras
1
190
Туризм Івано-Франківської області'2024
iftourism
0
200
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
250
Les daltoniens, les oubliés de l'UX
seomix
0
420
Joao Filipe Pereira - Predicting Core Web Vitals impact using Google Sheets [BrightonSEO April 2025]
joao_f_pereira
1
300
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Producing Creativity
orderedlist
PRO
346
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
How GitHub (no longer) Works
holman
314
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Agile that works and the tools we love
rasmusluckow
329
21k
A Tale of Four Properties
chriscoyier
160
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
We Have a Design System, Now What?
morganepeng
53
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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フォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。