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
70
GoogleChrome開発者ツールを使ったサイト高速化手順
GoogleChrome開発者ツールを使ったサイト高速化の手順をお伝えします。
株式会社シャーロック
March 06, 2024
Tweet
Share
More Decks by 株式会社シャーロック
See All by 株式会社シャーロック
塗装店向けWebマーケティング
sherlocksinc
0
570
GA4のeコマーストラッキング設定方法
sherlocksinc
0
52
選挙における有料ネット広告配信について
sherlocksinc
0
100
【学生集客】学校向けWebマーケティング (オープンキャンパス・オープンスクール編)
sherlocksinc
1
1k
BtoBマーケティングでFAX-DMを活用しよう
sherlocksinc
1
520
GA4でサイト内検索の語句を取得
sherlocksinc
0
120
動画広告で成功する5つのコツ
sherlocksinc
0
76
ユーザーの知りたい事を書こう
sherlocksinc
0
260
GA4設定確認マニュアル
sherlocksinc
0
90
Other Decks in Marketing & SEO
See All in Marketing & SEO
BrightonSEO April 2025: XML Sitemaps + Hreflang For E-Commerce
nmsamuel
1
170
Surviving the Search Apocalypse: How Nonprofits Can Sustain Free Website Traffic in an AI-Driven World
katherinewatierong
1
220
A Friggin' Sweet Insider Guide to Google Sheets for SEO
greggifford
PRO
2
580
WaytoAGI Tokyo 2025 - MarketDev of Creative AI from Local to Global – The Challenge of AICU: AI Creators Union
o_ob
0
150
BrightonSEO: Advanced SEO techniques with .htaccess
jancaerels
1
410
0-Click SEO. How to optimize for visibility, awareness and memorability.
gfiorelli1
0
210
The untapped power of vector embeddings
frankvandijk
0
1.1k
GA4 Standard (Free) vs GA4 360 (Enterprise)
kieramonaghan
1
450
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
1.9k
Data Driven SEO: A Framework Based Approach
knagayama
0
280
From Search Rankings to Answer Synthesis - How to Weather The AI Storm
dawnieando
0
220
How to Optimise 3,500 Product Descriptions for eCommerce in One Day Using ChatGPT & Make
katarinadahlin
PRO
1
1.2k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Balancing Empowerment & Direction
lara
1
500
Git: the NoSQL Database
bkeepers
PRO
431
65k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
KATA
mclloyd
30
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Six Lessons from altMBA
skipperchong
28
3.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フォントの読み込み 前でもテキストを表⽰させたりすると良いでしょう。 •
メインビジュアルに動画を使うのは、デメリットの⽅が⼤きいです(個⼈的 ⾒解)。