もう勝負ついてるから。

~次世代系無職マガジン~

ウェブページの読み込みが致命的に遅い時に絶対やっておくべき対応策

f:id:hyo-ta:20170703212628p:plain

こんばんは、部屋がニオイがやばい氷太です。

このブログ、自分で言うのもなんだけどさ。

そこそこ洗練された見栄えなんじゃないかと思っている。

青でスッキリと統一された、まとめブログっぽい感じがあるだろう?

「もう改善の余地などないだろう・・・。」

そう思った。

改めてこの記事を読む前は。

ブログカスタマイズで1番大事な事

少し前だが、この記事を見かけた。

www.fusigin.com

 

PCやスマホそれぞれの読み込み速度を計測する、ブロガーの基本的なツールだな。

「あー、このデザインにした時に計測したっきりだなあ、やらなきゃな~」

と思っていたんだが、見事に今日まで放置していた。

 

確か1番最初に計った時、32点くらいだったかな?

なかなかワイルドな点数だろう?

正直低いスコアだが、まあいいだろう。

このブログは読み込み速度じゃなくって、質で勝負するブログだしな・・・。

ここ、ツッコむところだぞ。

なんなら鈍器持って来い。

 

その時に比べると見違えるくらいの、かなりのカスタマイズを施した。

とはいえ体感的に速度が遅いとは感じなかった。

そんなに点数変わらないだろうな~と思って軽い気持ちで試してみた。

 

使うのはこのツール。

PageSpeed Toolsさんだ。

 

PageSpeed Toolsを使って計測する

まず自分のサイトのURLを入力するやん?

f:id:hyo-ta:20170703223702p:plain

 

PageSpeed Toolsさんが計測を開始するやん?

f:id:hyo-ta:20170703223712p:plain

 

点数出るやん?

f:id:hyo-ta:20170703223734p:plain

f:id:hyo-ta:20170703223741p:plain

f:id:hyo-ta:20170703223751p:plain

 

何だこのツール、ブッ壊れてんじゃねーの?

f:id:hyo-ta:20170703223800p:plain

 

  オメーのサイト構築が狂ってんだよ 

f:id:hyo-ta:20170703223808p:plain

 

・・・やばない?ねえコレってやばないん?

 

読み込みが遅いと何が起こるのか? 

操作開始時間が3秒以内に収まらなかった場合、どのような影響があるのだろうか。増山氏によると下記の通りだ。

  • 過半数(57%)のユーザーがそのサイトから離脱
  • 80%のユーザーは、そのサイトを再訪しない
  • 不満が伝染し、サイトの集客に悪影響を及ぼす

もちろん、3秒はあくまで及第点であり、早いに越したことはない。

操作開始時間が1秒のサイトと3秒のサイトを比較しても、3秒のサイトは1秒のサイトに比べ、ページビューが22%低下、コンバージョン率は38%低下、直帰率は50%上昇してしまうというデータがあります(増山氏)

日本ラドウェア | 【レポート】Web担当者Forumミーティング 2014 Spring | Web担当者Forum

悲報、ワイのブログ無事に逝ってた模様。

3秒はあくまで及第点・・・だと・・・?

ちなみにオレのブログの読み込みの時間は何秒になるんだ?

アナリティクスで調べてみよう。

 

行動押すやん?

f:id:hyo-ta:20170703223817p:plain

 

サイトの速度押すやん?

f:id:hyo-ta:20170703223825p:plain

 

概要押すやん?

f:id:hyo-ta:20170703223833p:plain

 

表示されるやん?

f:id:hyo-ta:20170703223840p:plain

頼む・・・!せめて10秒・・
いや8秒以内であってくれ・・・!!

f:id:hyo-ta:20170703223850p:plain

 

f:id:hyo-ta:20170703223857p:plain

 

f:id:hyo-ta:20170703223903j:plain

 

f:id:hyo-ta:20170703223916p:plain

 

読み込み速度を上げる具体的な対策

多分誰も提示されるとは思うけど具体的に以下の4つ。

  1. 画像を最適化する
  2. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
  3. ブラウザのキャッシュを活用する
  4. HTML,CSS,JavaScriptを縮小する

 

オレの場合、1番何が足を引っ張っているのか判明している。

画像の多さだ。

しかもデカイまま、圧縮しないまま貼り付けている。

ここは必ずやっておかなければならないだろう。

 

逆に言うと、それ以外に活路が見出せない。

それ以外に対する知識がなさ過ぎる・・・!!

まだだ・・・まだ終われないんや!!

 

JavaScriptとcssを圧縮する

このツールの出番だな。

Refresh-SF - Online JavaScript and CSS Compressor

このツール、JavaScriptとcssを圧縮してくれる。

早速ヘッダからフッダ、CSSまで圧縮させて頂きますた!

f:id:hyo-ta:20170703223924p:plain

 

その結果・・・・。

f:id:hyo-ta:20170703223931p:plain

f:id:hyo-ta:20170703223938p:plain

30分もかけたのに、微かに上がった程度なんだが?

 

まだ終わらんよ!!

TOPページの記事数が多いかな~とは思ってたのでここも変更する事に。

設定→詳細設定→トップページの記事数

f:id:hyo-ta:20170703223946p:plain

 

10記事は・・・さすがに多いよな。

6記事くらいにしとくか。

変更して計測する。

 

f:id:hyo-ta:20170703223955p:plain

f:id:hyo-ta:20170703224001p:plain

は?一気に上がったんだが・・・?

 

やはりか。

このTOPカード形式のブログデザイン。

画像の量が半端ないもんな。

 

画像を圧縮する

使うツールはこちら。

TinyPNG – Compress PNG images while preserving transparency

無料版だと1回に20枚までしか一括で圧縮する事ができないが、使い勝手がすこぶる良い。

やってやるぜ!

まずはこの画像だ。

f:id:hyo-ta:20170703224008p:plain

元々作成者のゆでたまさんが、オレのブログの遅さを感じ取っていたのか

「低解像度の画像も足しておきます」

と気を使ってくれたもの。

 

この画像をパンダさんにIN!

f:id:hyo-ta:20170703224034p:plain

252.6KBから55.7KBへとスリム化に成功。

どういうわけなのか、右に出てるダウンロードが反応しないので

f:id:hyo-ta:20170703224051p:plain

このダウンロードオールを押す。

よーし!どんどこやってくぜ!!

多分あと3時間は必要になってくると思うから、12時前には結果をお見せしますぞ!!

それまでせいぜい

「なんだこのクソ遅えブログは!バックバック!!」してるがいいさ・・・!!

きっと震えが止まらないくらいの軽さになってるからよ!!

 

7/3 24時前の追記

f:id:hyo-ta:20170703235900j:plain

f:id:hyo-ta:20170703235853j:plain

グフゥ・・・無念なり・・・。

あと50記事も圧縮して行かなあかんのか・・・

f:id:hyo-ta:20170616111031p:plain
f:id:hyo-ta:20170616111031p:plain