Welcome to my blog

ブログカスタマイズ

【ブログ表示速度アップ!? その5】GTmetrix にて Bランク頂いたのでいったん終了?

深緑の女魔術師です。

一旦スコアに満足したので終了??

数週間前くらいから、
なんとなくやってたブログメンテね。



@対応経緯



当ブログのアクセス数のメインは、
Googleさんからの検索からの訪問者さんですが、

そのGoogleさんの検索エンジンってか、
新しいアルゴニズムとしてスピードアップデート(Speed Update)
なるものを導入するって聞いてたのね。

ざっくり言うと、
ページ読込速度が遅いとペナあるよ?

的な感じなやつです。

そーゆうわけで、
当ブログもなんか対策してみる??

ってことで、

手探りといいながら、
カンニングにて対応してみた!

っていうのがここまでの流れです。



@対応してみたこと



先に・・・

自ブログの数ページで検証したけど、
経過については1ページだけ掲載するね。

ってことで以下ページで検証しました。

【北電子】これはゾンビですか?の初打ち記事

スロットという娯楽の実戦記事で、
画像が50枚ほど掲載された記事です。

なので、

普通のブログ記事よりは、
非常に重たい記事だと思う。



あとは、
検証に利用したサイトは以下です。

https://gtmetrix.com/

というわけで、
対応結果を並べてみるの!



@対応前:ありのままに晒すよ!

s_70_400_R_20180611_3687_01_対応前

PageSpeed Score
D:61%

YSlow Score
F:43%

Fully Loaded Time
8.5[s]

TotalSize
6.58[MB]

Request
283

対応してない状態の結果だけど、
ひどい結果だね。

ってもDランクで良かったね。
と思いました。
(良かったという根拠はないよ)

これについては、
SSL化の際にブログテンプレートを
レスポンシブ対応したおかげかと。



@対応1:テンプレを整理してみた
(不要なスクリプトを外してみた)

s_70_400_R_20180611_3687_02_対応1

PageSpeed Score
D:65%

YSlow Score
F:46%

Fully Loaded Time
7.5[s]

TotalSize
6.59[MB]

Request
220

リクエスト数を割と減らせました。
ついでにスコアも微妙にアップ!

っても、
まだDランクなんですよね。



@対応2:画像を遅延表示してみた
(lazyloadを埋め込んでみた)

s_70_400_R_20180611_3687_03_対応2

PageSpeed Score
C:70%

YSlow Score
F:46%

Fully Loaded Time
7.1[s]

TotalSize
4.50[MB]

Request
177

拍手とかの不要でないけど、
要らないスクリプトも外してみた。

リクエスト及びサイズが大幅に減って、
結果としてCランクになりました!

ただ、
これって遅延で読んでるだけなので、
結果としてサイズは変わってないんだよね。
(解析ツールをだましてるだけ)

正直これでいいの??

と少し思ってるので、
画像の遅延化は使わない予定。
(この記事は適用したままだけどね・・・)

といったものの、

仕組みとしては適切なタイミングで?、
画像がダウンロード?されるようになるらしいので、
ユーザさんのことを考えれば実装すべきなのかな?



@対応3:重たいスクリプトの処理タイミングを変えてみた
(自ブログってかFC2かつ対象のテンプレ利用だけだけど、
 サムネ画像取得してる処理をスクロール時に変更)

※重要※
 テンプレを作ってくれたAkiraさんは悪くないよ。

s_70_400_R_20180611_3687_04_対応3

PageSpeed Score
B:81%

YSlow Score
F:46%

Fully Loaded Time
7.7[s]

TotalSize
963[KB]

Request
84


どーゆう仕組みか分からないけど、
サムネ画像撮る際に前後記事をガッツリ解析されて、
スクリプトや画像が重たいよ!

って散々怒られてたけど、

スクリプトタイミングをスクロール時に変更したことで、
それらの減点が全部なかったことになりました。

すんごい効果だけど、
これも完全にインチキだね。

っても、
この減点項目については、
やや腑に落ちない感じだったので、
今後もこれについては採用します。


ただ、
もともと画像が多いせいなのか、
表示速度はあまり変化ないね。

というより、
検証サイトでもバラツキがあったので、
表示速度に関してはあまり当てにしてません。

んで、
ほかのページの現在のスコアは??

@トップページ

深緑の女魔術師の私的なブログ★彡

s_70_400_R_20180611_0000_05_対応後

PageSpeed Score
B:87%

YSlow Score
E:51%

Fully Loaded Time
5.5[s]

TotalSize
901[KB]

Request
65

ブログパーツ外せば、
おそくらAランクになりそうだね。



@ちょっと画像多めページ

【サミー】ツインエンジェルブレイク 遥さんの誕生日

(画像30枚ほど通常表示)
(遅延表示はしてないよ)

s_70_400_R_20180611_3745_06_対応後

PageSpeed Score
B:83%~86%

YSlow Score
F:44%

Fully Loaded Time
5.7[s]

TotalSize
1.50[MB]

Request
120

ランクが胡散臭かったので、
何回か検証してみたけど、
一応ランクBはあるみたいです。

うん、
普通の記事でこれなら十分じゃん。

と勝手に認識してます。

世の中には、
もっと高速表示なブログもあるけど、
こんな重たいブログなんだしいいじゃん。



@画像のリサイズ(画像圧縮)に関して



一番ハマったのこれだね。

いつも無駄に画像載せてるけど、
最低限の画像圧縮はしてたのね。

が、

計測サイトにて、
画像のリサイズちゃんとしようね!

って散々怒られました。

極限まで圧縮しても、
怒られる始末で諦めてましたが、

結果として、
画像の縦横が正しく認識されてなくて、
リサイズしようね!って怒られてることが判明。

というのは、
横長画像が怒られて、
縦長画像は怒られてなかったのさ。

わたしの場合だけだけど、
リサイズ用に「縮小専用」というアプリを使ってて、
画像を縮小後に縦画像のみを右回転させてました。
(アプリの都合上縦が横になってしまうため)

詳細は以下

【ブログ表示速度アップ!? その3】続 Optimize images にて 画像サイズ怒られる原因が分かったけど、アホくさい理由でどうでもよくなりました ・・・ Exif情報必要なんでつか ・・・ - ブログカスタマイズ

深緑の女魔術師です。↓前回記事【ブログ表示速度アップ!? その2】Optimize images にて 画像サイズ怒られるけど、どんぐらい圧縮すればよいの?? - ブログカスタマイズ深緑の女魔術師です。表示速度アップ!ってことで、画像を縮小しないと・・・@Optimize images の 判断基準ってなーに?これでもブログに掲載する画像は、ある程度縮小してアップしてるのね。使ってるソフトは、「縮小専用。AIR」というやつ。1記事に対し...





なので、

圧縮後に全画像を一旦回転させるという、
頭悪いことを現在やってます。

#当時はやらないと言ったけど、
#結局今はやってます。
#そこまで面倒じゃないしね・・・

ただ・・・

回転 = 画像劣化

だと思うので頭悪いよね。。。

(Windows曰く劣化はないらしいけど、
 ファイルサイズは少し増えてしまう・・・)

結果として、
最近の記事画像は怒られなくなりました。

ただ、
これでいいのかな??

って切に思います。

なので、
やっぱり遅延表示しなよ!

ってことなのかな?



とりあえず、
平均スコアがBになったので満足っしょ?

他人から見たら多分不要であろう、
アクセスカウンターやにほんブログ村のブログパーツなどを
外すことで一応スコアアップ出来るけど、

わたしには、
外せないアイテムなので、

スコアBで満足っしょ?
ってことでいったん終了??

記事にはしないと思うけど、
残作業としては、

・GoogleFontを辞めたい
・CSSのスリム化
・その他シェイプアップ

などを予定してます。



以上。

関連記事
スポンサーサイト
最後まで読んでくれてありがとう!

こんなブログですが、
クリック応援はすごい励みになるので大歓迎です!

   
深緑の女魔術師ブログカスタマイズ

0 Comments

There are no comments yet.

Leave a reply