ノリックのIT生産性向上、ライフハック、プロマネのお仕事備忘録

IT系の仕事の事とか役立つツールとかプロジェクトマネジメントの事とかを記載していきます。

モバイル版 はてなブログサイトの高速化

購読している吉良野すたさんの以下のブログをみて自分のサイトもTest My Siteを試してみることにしました。素敵なサイトを紹介していただきありがとうございます。

 

stressfree-fulfilling-solo.hatenablog.com

 

 

 

環境

吉良野すたさんはうまく動かないと書かれていたのですが、私は問題なく動きました。

OS

Windows10 Pro 1809

 

ブラウザ

Chrome 72.0.3626.109

 

手順

1. 以下のサイトにアクセス

モバイルサイトの読み込み速度とパフォーマンスをテストする - Google

 

2.自分のサイトアドレスを入力  

testmysite

自分のサイトのアドレスを入力して→をクリック

testmysite

解析が進みますのでしばらく待ちます。

 

しばらく待っていると以下の画面が出てきました。自分のサイトの画面イメージが出ていてびっくりしました。結果は少し残念な結果です。下にスクロール出来るようなのでクリックします。

testmysite

テスト結果

同じ業種内の比較ってなってますが、どの業種?謎ですが平均的なスコアとなりました。良好ぐらいにはなってほしかったです。更に下にスクロールできるので下矢印をクリックします。

testmysite

テスト結果の詳細

 

指摘の点を改造すれば3秒ぐらいは目指せるそうです。優先度の高い修正点を確認してみます。

testmysite

改善目処

せっかく指摘していただきましたが、技術を持ち合わせていません。

testmysite

改善1

せっかく指摘してもらったのですが、2点目の指摘も何をしてよいのかわからなかったです。無料レポートを取得というボタンをクリックしてみます。

testmysite

改善2

 

レポートを希望する方を選択して登録すると1時間ぐらいかかるからちょっと待っててねと言われました。

testmysite

レポートの送信を希望

 

 

→来ました。以下全文。目指せ3秒台!!

 

www.norick-matsumot...* のテスト結果6S

読み込み速度: 普通24%

訪問者の推定離脱率(処理速度が原因となっている場合)3S次の推奨項目を導入すると、読み込み時間が最大 3 秒短くなると見込まれます。  サイトの処理速度を上げましょう

 

処理速度:普通

要改善 要検討 問題なし

ページの重さを軽減しましょう 画像を圧縮する画像を最適化してページの読み込み速度を上げる方法 » GZIP でリソースを圧縮する

リソースを圧縮するHTML、CSS、JavaScript を圧縮する方法 »

リクエスト数を減らしましょう

ブラウザ キャッシュを利用するブラウザ側にデータを保存することでネットワークの遅延を減らす方法 »

スクロールせずに見える範囲のコンテンツから、レンダリングを妨げる JavaScript や CSS を排除するスクリプトがサイトの処理速度に及ぼしうる悪影響 »

ランディング ページでのリダイレクトを避けるファーストビューの読み込み速度を速くしましょう 画面に表示されるコンテンツを CSS や JS ファイルよりも先に読み込む サーバーの応答時間を短縮する AMP でページの読み込みを高速化しましょう

 

改善する

さてどうしたものかとググっていたら流石!既に取り組んでいる方がいらっしゃいました。。。simadzuさんのブログです。ありがとうございます。

 

simadzu.hatenablog.com

 

 

だがしかし! 私には少し難しい内容だったので、simadzuさんのブログを参考にさせていただきながら少しづつ改善していきたいと思います。しかしレスポンス時間6秒って私が就職したときでも先輩から「3秒ルールというのがあってな・・・」と言われたものである。読み込み時間だからレスポンスタイムとは違うと思うが、SE失格である。

 

画像を圧縮する

simadzuさんから画像サイズを見直すのが一番の効果だと伺い、画像を圧縮して貼り直してみた。

testmysite

2度めの計測

遅くなった orz

そう思っていたら、simadzuさんも同じテストサイトでテストしているではないですか!

simadzu.hatenablog.com

3秒って鬼速じゃん!!

冷静に考えるんじゃ、何かが悪いはずじゃ。。とと思ってデザインテンプレートを見ていたらはてな公式デザインテンプレートが「smooth」っていう名前になっています。

これや!

名前からして、このデザインテンプレートにしたら早くなるに違いないと思い、テンプレートを変更してサイド計測してみます。

testmysite

3度めの計測

やったー! デザインテンプレートを変えただけで2秒縮まりました。

simadzuさんはフッターも非表示にしているとのこと。そう言えばスティーブ・ジョブズもプレゼンテーションZENの本でも余計なものは徹底的に削ぎ落とすって言ってたか。こちらも思い切ってヘッダーとフッターの両方を非表示にしてみます。サイト計測

testmysite

4度目の計測

結果は変わらず。ヘッダーとフッターを削っただけでは効果が薄かったか。さらに禅の精神で無駄なものは無いか探す。

・お星さま・お星は欲しい。外せない。

・コメント・コメントも欲しい。 この欲しがりめ!

・ブクマ・・バズった事ないけどバズるかもだし。

なかなか決断がつかない。

・トップページの記事数

 これは減らしてもよいか。7→4に変更

・最近の記事

 これもトップページ見ればわかるし抹殺

・検索

 自分のサイトを検索する人いないな。消す

testmysite

5度目の計測

orz

まあ、今日はこのあたりで許してやるか。

  

まだチャレンジは続く

 

さらなる断捨離

やはりこれではだめだ。諦めんな!と松岡修造の動画を見ていたら言われてしまった。さらなるスピードアップを求めブログのシンプル化を目指した。

  1. スターボタン抹殺
    なぜブログを始めたか、文章力を上げるため、Outputを増やしてInputした事を身につけるためではなかったか。スターがほしけりゃ購読している人の記事にコメントしてスターをもらうほうがよっぽどアウトプットしているじゃねえか・・・・と思い泣きながら断捨離(T皿T)

  2. はてブコメントボタン抹殺
    はてブされてなに満足してんだ!てかされたことねえじゃねえか!友人に桜でもいいからはてブしといてねって頼んだのにしてくれねえし。そんなボタン遅延の原因になるだけじゃろ
    ・・・・と思い泣きながら断捨離(T皿T)

  3. プロフィールのTwitterボタン抹殺
    以下同文(T皿T)

  4. プロフィール画像を極小化
    295バイトまで縮小。

testmysite

やっと4秒

3秒の壁は厚い。でも次叩いたら壊れるんじゃねえかと思い諦めないことが大事。!

2019/2/26追記

stressfree-fulfilling-solo.hatenablog.com

購読させてもらっている吉良野すたさんのブログで公式テーマは重いと語られていた。。なに!

公式だからきっと速いと思っていました。吉良野すたさん推薦のテーマに変更して計測したところ

testmysite

やったー

3秒台に到達することが出来ました。 

 

 

最後までお読みいただきありがとうございました。

ページスピードを高速にするための画像圧縮について記事にしました。もしよかったら御覧ください。

 

www.norick-matsumoto.com