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
49
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
塗装店向けWebマーケティング
sherlocksinc
0
450
GA4のeコマーストラッキング設定方法
sherlocksinc
0
34
選挙における有料ネット広告配信について
sherlocksinc
0
67
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
720
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
370
GA4でサイト内検索の語句を取得
sherlocksinc
0
91
動画広告で成功する5つのコツ
sherlocksinc
0
61
ユーザーの知りたい事を書こう
sherlocksinc
0
200
GA4設定確認マニュアル
sherlocksinc
0
58
Other Decks in Marketing & SEO
See All in Marketing & SEO
Going beyond "what happened" in SERP analytics (brightonSEO San Diego 2024)
raygrieselhuber
PRO
0
340
Matomo Analytics - the new kid on the block - MeasureFest (BrightonSEO Oct 2024)
kieramonaghan
1
340
Growing against the grain - doing more with less | Brighton SEO
paulaaronnorris
0
230
Creating data-driven SEO apps with AI - Brighton SEO
michaelvdr
0
240
AI for Marketers Sept '24 - How AI Agents will change your
dkundel
0
160
100% Evergreen Articles to Survive Search Updates
chrismeabe
0
380
Conversion optimisation strategies for business owners
olajiga
0
100
Using Cache to Make Cash
andrewprince
1
320
Perfekte Prompts für ChatGPT & Co.: Wie du KI-Tools optimal nutzt
kaispriestersbach
0
110
SEO Camp DK: Mastering eCommerce Audits: Driving Results for Large-Scale Sites
nikkihalliwell
1
160
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
2.4k
Topical Authority in the Age of Entity SEO - BrightonSEO San Diego
felipebazon
0
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Optimizing for Happiness
mojombo
376
70k
Building Your Own Lightsaber
phodgson
103
6.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Building an army of robots
kneath
302
44k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf 2023
tenderlove
29
940
Unsuck your backbone
ammeep
669
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.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フォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。