SlideShare a Scribd company logo
クリエイター
じゃなくてもできる
Webサイト表⽰速度改善⽅法
⾃⼰紹介
神守由理⼦/NexSeedInc.
通称かみーゆ
ブリッジSE
フロントエンドエンジニア
好きなものは
⾁とビール
lirioY
コンテンツが好き
実は昔、
Web解析⼠
初級合格済
Webサイトは、
コンテンツが載るし、コンテンツが主役
今⽇のレベル
ブログを書き始めたい
勉強し始めたばかり
少し知識がある
初級
今⽇はクリエーター⽬線から
知識がない⽅でも出来そうな
表⽰改善ポイントについて
お話しします
突然ですが
みなさん、質問です
スマフォで閲覧時、
表⽰速度3秒以上かかった
らどのくらいの⼈が離脱する
かご存知ですか?
4割
早いは正義
限りなく2秒に近づけるため
のお話です。
サイトの表⽰を
遅くさせる理由を
探る
突然ですが
みなさん、質問です
サイト表⽰速度を
重くする原因って
何だと思いますか?
あるあるその1
画像がヘビー級
適切な画像サイズに変える
デジカメ・スマフォで撮影した画像をそのま
ま使うと4000px~とかザラなのでリサイズ
&圧縮する。
適切な画像サイズに変える
必ず何かしらの⽅法で圧縮する
クリエイターの⽅
必ず何かしらの⽅法で圧縮する
クリエイターの⽅
あるあるその2
不要なギミック
使ってませんか?
かっこいいとユーザビリティ
は反⽐例
ふわふわ
シュー
くるくる
あるあるその3
読み込むファイル点数
が肥⼤化する
何も知らずにブログツールを
使うと不必要な
ファイルが
読み込まれる
ムダなファイルを読み込まな
いようにする
プラグインを
使う
画像がそもそも多い場合は
Lazyload(jQuery)などを
使う
不要ファイルは最初から読まな
い処理をする。
ムダなプラグインは
⼊れない
クリエイターの⽅
サイトの状態を⾒る
計測する
PageSpeedInsights
計測する
LightHouse:Googleの拡張機能
シークレットモードで使うと○
まずは⾃分の
できる範囲でやる
ちょっとだけ事例の
お話
複数あった
スタイル・JSを1ファイルにまとめ
画像圧縮
とある
住宅メーカーのサイト
既存サイト改修のみ
参加者特典
検索キーワードA
表⽰順位 47位→17位(30位上昇)
検索キーワードB
表⽰順位 20位→10位(10位上昇)
参加者特典
それ以外に特別なことは
ほぼしていません参加者特典
徹底的に
内側のダイエットをした参加者特典
Webサイトは
コンテンツありき
⾒て欲しいなら
快適に⾒てもらうため
ユーザーファーストな
⼼配りが⼤事
ご静聴ありがとう
ございました

More Related Content

What's hot

JPUG の中国支部長変わったってよ #mysqlbeginner
JPUG の中国支部長変わったってよ #mysqlbeginnerJPUG の中国支部長変わったってよ #mysqlbeginner
JPUG の中国支部長変わったってよ #mysqlbeginner
Ikki Takahashi
 
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
minoru nakanou
 
Slimの紹介
Slimの紹介Slimの紹介
Slimの紹介
豊明 尾古
 
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたWeb Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
 
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックスレスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
minoru nakanou
 
【俺聞け5】私とflashとhtml5&java script
【俺聞け5】私とflashとhtml5&java script【俺聞け5】私とflashとhtml5&java script
【俺聞け5】私とflashとhtml5&java script
Asami Abe
 

What's hot (6)

JPUG の中国支部長変わったってよ #mysqlbeginner
JPUG の中国支部長変わったってよ #mysqlbeginnerJPUG の中国支部長変わったってよ #mysqlbeginner
JPUG の中国支部長変わったってよ #mysqlbeginner
 
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
 
Slimの紹介
Slimの紹介Slimの紹介
Slimの紹介
 
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたWeb Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
 
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックスレスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
 
【俺聞け5】私とflashとhtml5&java script
【俺聞け5】私とflashとhtml5&java script【俺聞け5】私とflashとhtml5&java script
【俺聞け5】私とflashとhtml5&java script
 

Similar to クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)

スマホフロントエンド最速化手法
スマホフロントエンド最速化手法スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
 
5分で詰め込む フロントエンド最適化
5分で詰め込む フロントエンド最適化5分で詰め込む フロントエンド最適化
5分で詰め込む フロントエンド最適化
Shohei Tai
 
WebSocketを学ぼう!
WebSocketを学ぼう!WebSocketを学ぼう!
WebSocketを学ぼう!
Katsuki Chousa
 
効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~
効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~
効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~
毅 佐藤
 
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
tama200x Kobayashi
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
masaaki komori
 
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Kyo Kaji
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
 
AlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライドAlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライド
Sawada Makoto
 
第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)
Takahisa Iwamoto
 
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
odakeiji
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
 
Webサイト高速化 Cacheの方法を見てみよう
Webサイト高速化 Cacheの方法を見てみようWebサイト高速化 Cacheの方法を見てみよう
Webサイト高速化 Cacheの方法を見てみよう
Kazuma Kimura
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
 
20101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok420101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok4
Chiaki Hayashi
 
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
Y Watanabe
 
How to learn Rails
How to learn RailsHow to learn Rails
How to learn Rails
deeeki
 

Similar to クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき) (20)

スマホフロントエンド最速化手法
スマホフロントエンド最速化手法スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
 
5分で詰め込む フロントエンド最適化
5分で詰め込む フロントエンド最適化5分で詰め込む フロントエンド最適化
5分で詰め込む フロントエンド最適化
 
WebSocketを学ぼう!
WebSocketを学ぼう!WebSocketを学ぼう!
WebSocketを学ぼう!
 
効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~
効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~
効果的なブログの書き方 ~仕事につながるブログ術、3つのポイント~
 
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
 
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
 
AlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライドAlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライド
 
第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)
 
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
Webサイト高速化 Cacheの方法を見てみよう
Webサイト高速化 Cacheの方法を見てみようWebサイト高速化 Cacheの方法を見てみよう
Webサイト高速化 Cacheの方法を見てみよう
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
 
20101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok420101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok4
 
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
 
How to learn Rails
How to learn RailsHow to learn Rails
How to learn Rails
 

More from Yuriko Kamimori

やめる勇気 〜人生も仕事も想像以上にシンプル〜
やめる勇気 〜人生も仕事も想像以上にシンプル〜やめる勇気 〜人生も仕事も想像以上にシンプル〜
やめる勇気 〜人生も仕事も想像以上にシンプル〜
Yuriko Kamimori
 
かみーゆは見た!ブラックSEOトップ3
かみーゆは見た!ブラックSEOトップ3かみーゆは見た!ブラックSEOトップ3
かみーゆは見た!ブラックSEOトップ3
Yuriko Kamimori
 
捨てるなんてもったいない! 子ども服をセブに送るプロジェクト
捨てるなんてもったいない! 子ども服をセブに送るプロジェクト捨てるなんてもったいない! 子ども服をセブに送るプロジェクト
捨てるなんてもったいない! 子ども服をセブに送るプロジェクト
Yuriko Kamimori
 
サイト引越しの際に学んだ5の教訓
サイト引越しの際に学んだ5の教訓サイト引越しの際に学んだ5の教訓
サイト引越しの際に学んだ5の教訓
Yuriko Kamimori
 
こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島
こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島
こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島
Yuriko Kamimori
 
イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話
イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話
イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話
Yuriko Kamimori
 
組織の中でのコミュ力
組織の中でのコミュ力組織の中でのコミュ力
組織の中でのコミュ力
Yuriko Kamimori
 
「広島でコンクリ」vol.16ブロックカスタマイズ 超初級
「広島でコンクリ」vol.16ブロックカスタマイズ 超初級「広島でコンクリ」vol.16ブロックカスタマイズ 超初級
「広島でコンクリ」vol.16ブロックカスタマイズ 超初級
Yuriko Kamimori
 
駆け足で紹介する concrete5のおすすめ機能5選
駆け足で紹介するconcrete5のおすすめ機能5選駆け足で紹介するconcrete5のおすすめ機能5選
駆け足で紹介する concrete5のおすすめ機能5選
Yuriko Kamimori
 
concrete5 5.7でテーマ作ってみよう 超初級編
concrete5 5.7でテーマ作ってみよう超初級編concrete5 5.7でテーマ作ってみよう超初級編
concrete5 5.7でテーマ作ってみよう 超初級編
Yuriko Kamimori
 
初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!
Yuriko Kamimori
 
コーチングから学んだこと
コーチングから学んだことコーチングから学んだこと
コーチングから学んだこと
Yuriko Kamimori
 
concrete5を使ってみよう!
concrete5を使ってみよう!concrete5を使ってみよう!
concrete5を使ってみよう!
Yuriko Kamimori
 
第1回concrete5 in HIROSHIMA勉強会
第1回concrete5 in HIROSHIMA勉強会第1回concrete5 in HIROSHIMA勉強会
第1回concrete5 in HIROSHIMA勉強会
Yuriko Kamimori
 
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
Yuriko Kamimori
 
Windows8.1-アップグレードのすゝめ!-
Windows8.1-アップグレードのすゝめ!-Windows8.1-アップグレードのすゝめ!-
Windows8.1-アップグレードのすゝめ!-
Yuriko Kamimori
 

More from Yuriko Kamimori (16)

やめる勇気 〜人生も仕事も想像以上にシンプル〜
やめる勇気 〜人生も仕事も想像以上にシンプル〜やめる勇気 〜人生も仕事も想像以上にシンプル〜
やめる勇気 〜人生も仕事も想像以上にシンプル〜
 
かみーゆは見た!ブラックSEOトップ3
かみーゆは見た!ブラックSEOトップ3かみーゆは見た!ブラックSEOトップ3
かみーゆは見た!ブラックSEOトップ3
 
捨てるなんてもったいない! 子ども服をセブに送るプロジェクト
捨てるなんてもったいない! 子ども服をセブに送るプロジェクト捨てるなんてもったいない! 子ども服をセブに送るプロジェクト
捨てるなんてもったいない! 子ども服をセブに送るプロジェクト
 
サイト引越しの際に学んだ5の教訓
サイト引越しの際に学んだ5の教訓サイト引越しの際に学んだ5の教訓
サイト引越しの際に学んだ5の教訓
 
こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島
こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島
こんなところで使えるのXD活用法|20191208 XD勉強会 in セブ島
 
イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話
イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話
イカしたポートフォリオ作ったら ヘッドハントされたので オフショアしにセブ島に行った話
 
組織の中でのコミュ力
組織の中でのコミュ力組織の中でのコミュ力
組織の中でのコミュ力
 
「広島でコンクリ」vol.16ブロックカスタマイズ 超初級
「広島でコンクリ」vol.16ブロックカスタマイズ 超初級「広島でコンクリ」vol.16ブロックカスタマイズ 超初級
「広島でコンクリ」vol.16ブロックカスタマイズ 超初級
 
駆け足で紹介する concrete5のおすすめ機能5選
駆け足で紹介するconcrete5のおすすめ機能5選駆け足で紹介するconcrete5のおすすめ機能5選
駆け足で紹介する concrete5のおすすめ機能5選
 
concrete5 5.7でテーマ作ってみよう 超初級編
concrete5 5.7でテーマ作ってみよう超初級編concrete5 5.7でテーマ作ってみよう超初級編
concrete5 5.7でテーマ作ってみよう 超初級編
 
初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!
 
コーチングから学んだこと
コーチングから学んだことコーチングから学んだこと
コーチングから学んだこと
 
concrete5を使ってみよう!
concrete5を使ってみよう!concrete5を使ってみよう!
concrete5を使ってみよう!
 
第1回concrete5 in HIROSHIMA勉強会
第1回concrete5 in HIROSHIMA勉強会第1回concrete5 in HIROSHIMA勉強会
第1回concrete5 in HIROSHIMA勉強会
 
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
 
Windows8.1-アップグレードのすゝめ!-
Windows8.1-アップグレードのすゝめ!-Windows8.1-アップグレードのすゝめ!-
Windows8.1-アップグレードのすゝめ!-
 

クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)