ソロ活@自由人

主夫ソムリエの雑記ブログ

はてなブログが重い?サイト高速化・表示速度改善法6選!SEO集客で収益化!

ねぇ~
あんたの記事なぜか?
検索順位上がってない?

オレも思ってた!
なんか悪いことやらかした?

やらかしてません.....

(ーー:)

少しくらい喜んでくれても

いいじゃないですか?

頑張ったのに..... (・_・、)

 

でも確かに検索順位が全体的に

上がってきてますね。

要因は表示速度!

(それだけじゃないけど)

ということで

この記事はこんな人向け!
  • あたしのブログは重いから何とかして!
  • 検索順位を上げたいのよ!
  • サクサク見れるサイトにしたい!
  • でもめんどくさいのはイヤだ!

では

はてなブログは元々重いからって

あきらめちゃってる、そこのあなた?

必ず速くなりますよ!

 

はてなブログでも出来る!
サイト表示の高速化方法6選

表示速度改善法①
レンダリングを妨げるリソースの除外

f:id:sorokatu:20211002173314j:plain

最初に結論からお伝えします。

ブロガーにとって

サイトの表示速度は

最重要です!

あっ!

日記や備忘録として使っている方や

別に誰にも読んでもらえなくていい!

と言う方は別ですけど.....

(・・;)

でも記事の質が一番大事なんじゃないの?

もちろん記事の質は大事ですよ!

でもせっかく良い記事なのに

読んでもらえなかったとしたら?

収益化したいな~(*’∀’人)♥*+

と思ってるひとは特に。

 

検索結果の上位に表示して

ひとりでも多くのひとに

まずは読んでもらう必要がありますよね?

実際にGoogleが公式

ページの読み込み速度をモバイル検索のランキング要素に使用します!

と断言しています!

分かったよ!早く教えて!

分かりました!

レンダリングを妨げるリソースの除外とは?

あなたも使ってますよね?

Pagespeed Insights

サイトの表示速度に関して改善すべき点。

改善余地がどのくらいあるのか?を確認できるツールです。

f:id:sorokatu:20211006140902p:plain

こんな感じのツール!

点数低すぎでしょ.....小声

※実際の表示速度はサイトを見る人の通信環境によります。

実際の表示速度の確認方法は

こちらの記事「Googleアドセンス審査合格!はてなブログでサイトの停止または利用不可問題の解決方法!」を読んでみてください!

 

Pagespeed Insightsの画面で

以前から気になっていた点があります。

それは

f:id:sorokatu:20211006140939p:plain

レンダリングを妨げるリソースの除外。

ボルダリングか?

ちがいます.......(#-∀-)

レンダリング!

一言でいうと

情報を集めてサイト画面を表示すること!ですね。

 

僕の場合は

この画面を表示するのに必要な情報を

集めるのを邪魔をしてるヤツがいるよ!

という診断結果になっています。

 

前から気になってはいたんですけど

「使用していないJavaScript」

と一緒で、はてなブログの仕様だから

どうしようもないよ、これは.....

(>_<)

と思っていました。

 

ところがどっこい邪魔者をドかすことに

成功しました!

レンダリングを妨げるリソースの除外方法

まずは邪魔者を特定します。

f:id:sorokatu:20211006141016p:plain

僕の場合は2つのリソースが該当。

それぞれクリックして入ります。

内容はどうやらCSSですね......

詳しくはチンプンカンプン!です!

ただし

URLをコピペして保管しておきます。

 

ここである仮説が2つ成り立ちます。

2つの仮説
  • 邪魔してるヤツをレンダリングの前に読み込めば邪魔できない
  • 邪魔してるヤツをレンダリングの後に読み込めば邪魔できない

これはきっと間違いない!

でも先に読み込むべきか?

後に読み込むべきか?

僕にはまったく分かりません!

そもそもトップページの表示に

2つのリソースが必要なものだったら?

読込を遅くなんかしたら

もっと遅くなるんじゃない?

どうしたらいいの?

レンダリングのリソースを把握する

答えは以下です!

解決方法
  • Google Chromeのデベロッパーツールでレンダリングのリソースを把握する
  • そのリソースがサイトトップのレンダリングにどの程度使われてるか?を知る
  • 使用率に応じて、先読みか?後読みか?判断する

超めんどくさ~い

簡単です!

一緒にやりましょう!

 

まずはあなたのサイトトップを

Google Chromeで表示してください。

f:id:sorokatu:20211006141110p:plain

右上の設定ボタン(・が3つ縦並び)

をクリック。

f:id:sorokatu:20211006141138p:plain

「その他のツール」から

f:id:sorokatu:20211006141206p:plain

「デベロッパーツール」をクリック。

f:id:sorokatu:20211006141231p:plain

右にウィンドウが開きます。

小さくて見にくいので

f:id:sorokatu:20211006130332p:plain

窓を拡げて見やすくします。

一番下の窓上の「カバレッジ」をクリック。

f:id:sorokatu:20211006130441p:plain

表示されるリロードマーク ↻ をクリック!

f:id:sorokatu:20211006130515p:plain

トップページのレンダリングに使用した

JavaScriptやCSSのURLが複数出てきます!

 

この中から、Pagespeed Insightsで

特定された邪魔者のURLを探してください。

(コピペして保管してもらったURL)

f:id:sorokatu:20211006130624p:plain

僕の場合は①と②の2つ。

すぐ見つかりますよ!

 

ここで必ず確認してください!

必ず確認!
  • 「使用してないバイト」のパーセント数
  • 「使用状況の可視化」の色(赤または緑)

このパーセント数と色で

このリソースを

先読みするのか?

後読みするのか?

を判断することになりますから。

 

僕の場合で説明すると

僕の場合
  • ①のCSS(はてなデフォルト?)
    ・使用してないバイト数94.9%
    ・赤色
    =ほぼ使用してないので後読み
  • ②のCSS(テーマminimalism)
    ・使用してないバイト数74.2%
    ・赤色
    =やや使用してるので先読み

という判断ができました!

 

※先読みなのか?後読みなのか?は、どちらも試した上で確定されることをおすすめします。

2つのリソースを先読みと後読みにする

では実際にレンダリングを妨げていた2つのリソースを後読み、先読みする設定をしましょう!

記述の仕方は

【後読み】

です。

【先読み】

ですね!

貼り付ける箇所は

「設定」⇒「詳細設定」⇒「<head>要素にメタデータを追加」です。

 

※追記2021/10/02

先読みのlink rel="preload"~だけフッターの最後に貼ったところ目に見えて安定し45点以上がでてます!しかしレンダリングを妨げ~のメッセージは必ず出るように...
試行錯誤ですね!

 

結果は?

最初はとんでもない点数がでました!

f:id:sorokatu:20211006141307p:plain

おったまげました!

しかしそんなはずは無い、と

何度か繰り返していると

このぐらいが平均かな?

f:id:sorokatu:20211006141332p:plain

(今はもっと低い....なぜ?)

それに

ずっと出ていたアイツは?

f:id:sorokatu:20211006141404p:plain

消えていなくなりました!

やったね!

でも先読みも後読みも

何度も試行錯誤して

今の形に落ち着いてます。

 

どれを先読みするか?

どれを後読みするか?

何度も試行錯誤です!

実際の速度が速くなるかどうか?

は正直分かりませんし、僕の環境では

いまのところ不具合はありませんが。

 

ただ、後読みの場合は

画像の遅延読込と違って

JavaScriptやCSSを遅れて読むわけですから副作用がないとは言い切れません。

実際の表示速度結果を見ながら

トライ&エラーして行きます!

表示速度改善法②
画像を圧縮してプログレッシブJPEGで統一

f:id:sorokatu:20211001155238j:plain

画像の最適化は高速表示に必須です!

遅延読込したら関係なくない?

いいえ!

最初の表示には関係ありませんが

結局あとから読み込むのです。

通信データの量が少ない方が

良いに決まってます!

 

僕はこの方法を実行しました。

画像対策
  • 高品質なPNGも全て軽いJPEGへ変えた
  • プログレッシブJPEGで統一
  • 画像サイズは最大width330のマイルール

画像変換ツールは

Jpeg.ioを使ってます!

f:id:sorokatu:20211006130702p:plain

1枚ずつもよし!

まとめてもよし!

f:id:sorokatu:20211006130737p:plain

PNGをJPEGに変えると容量増える時ない?

あります!

それも含めて僕がこの方法で

画像処理をしている理由をまとめます。

画像対策の理由
  • JPEGが容量が軽いのでPNGの品質を捨てて高速化最優先!
  • プログレッシブJPEGに統一して表示最適化+作業効率化する!
    イラストや細かい文字はPNGが断然!でも作業効率を優先した!
  • 画像サイズはモバイルに特化。PCのことは無視!(PCで見ていただいてる方、すみません。さぞ見ヅライと思います.....)

PCで読んで下さってる方には

この場を借りてお詫びいたします

m(_ _ )m

表示速度改善法③
アフィリエイト広告img要素の遅延読込

アフィリエイト広告はそのまま使うと超重い!です。

バナー広告もテキスト広告も

遅延読込してますか?

 

アフィリエイト広告は

インプレッション数(見た人数)を

集計するために

画像(img要素)が1枚余計に

付いてるって知ってました?

(なぜか?上から目線....)

 

中にはJavaScriptを使用した広告もあり、超重いです....

重い…代表はコレ。

f:id:sorokatu:20211006141440p:plain

PCimage:もしもアフィリエイト

f:id:sorokatu:20211006141526p:plain

スマホimage:もしもアフィリエイト

もしもアフィリエイトのよく見る広告。

使ってる方も多いのでは?

この広告コードは?

長い.....しかもJavaScript(重量級)

3社分のリンクがありますからね.....

(・・;)

あの~

誤解のないように言っておきます。

もしもアフィリエイトさんが悪いって

言ってませんからね!

かんたんリンクは簡単な分

重くてサイト速度に影響するよ!

と言っているだけですから。

 

実際に僕はもしもアフィリエイトを

愛用しています!

ただし、かんたんリンクと

3社選択式(楽天、アマゾン、ヤフー)

は使いません!

なんで?

表示速度が落ちるから!

3社のショップモールにすぐに飛べる。

確かに魅力です!

でも僕は表示速度が優先だと思います。

どんなに良い販売ツールも

検索上位でない限り、誰も見てすらくれないのですから

(>_<)

 

僕は商品リンクの画像とテキストコードを使用しています!

そのまま使うと

f:id:sorokatu:20211006130935p:plain

PCimage:もしもアフィリエイト

f:id:sorokatu:20211006131023p:plain

スマホimage:もしもアフィリエイト

 

とこんな感じで少し味気ないですね。

広告コードは

Jsではありませんが画像要素が2つあり、少し重たいですよね。

特に2番目の画像要素はインプレッション数をカウントするための存在しない(目に見えない)画像要素なのでやっかいですね~

削除しちゃう人もいるようですが

(∵)ヘ?

長い目でみてデータの蓄積は大事。

ということで「画像」なんですから

遅延読込すれば解決です!

そっか!!!

2つのimg

遅延読込指示のloading="lazy"を足してあげます。

こんな感じで!

見た目はこんな感じにシンプルに!

f:id:sorokatu:20211006141622p:plain

スマホimage:もしもアフィリエイト

2つの画像要素を遅延して読み込むので

かなり軽量級になってます!

 

ところでこの
サイトスティックってなに?

えっ!知らないんですか?

iPhoneやiPadの充電口に差すだけで

テレビが見れるやつですけど.....何か?

超欲しいんだけど!!!

僕もってますけど

売れすぎて品薄らしいです.....

ネット環境がなくても見れるから

電車でも山奥でも使えていいですよ~

PC版もあるから家でも楽しめそうだし通信料もかからないしね!

どこで買える?

こちらで買えますけど?

サイトスティックを見る

表示速度改善法④
YouTubeなどiframe要素の遅延読込

ブログカードやYouTubeなども重いです!

結論からいうとこれも遅延読込にしちゃいます!

はてなブログが遅延読込できるのって画像だけじゃない?

そうなんです.......はてな公式によると対応したのはimgだけなんです....

 

JavaScriptを使って遅延読込させる方法もあるんですが、そもそもJS自体が重い!

ので相殺されてやる意味なし!

と思い込んでいましたが.......( ̄□ ̄;)!!

なんと!

iframeの遅延読込はすでにウェブ標準でした!

参考記事:iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に | 海外SEO情報ブログ

(知らなかったのは僕だけ?)

Safariが現在(2021年10月1日)どうなのか?は分かりません。

ですがChrome、Edge、Firefoxは標準で

ブラウザが実装してるのは間違いないので

すべての記事のiframe

loading="lazy"を足してあげましょう!

 

こんな感じでYoutube埋め込んでますよね?

f:id:sorokatu:20211006141701p:plain

引用記事:ボサノバとは?

この埋め込みリンクのコードに

こんな感じでloading="lazy"を書き足します。

続いてブログカードの場合の表示は

sorokatu.com

こんな感じ。コードは

loading="lazy"を書き入れるだけ!

仮に対応してないブラウザの場合は

通常に読み込まれるだけなので不具合の心配はありません!

表示速度改善法⑤
オフスクリーン画像の遅延読込

f:id:sorokatu:20211001155505j:plain

高速化に最も効果があるのは画像の遅延読込です!

はてな公式がせっかく標準装備してくれたんです!

すべての記事内の画像をloading="lazy"しましょう!

 

画像でなくてもimgではじまる要素は

すべて遅延読込にしちゃいましょう!

1枚ずつ貼りなおすしかないんだよね

はい!6月より前に書いた記事は!

(Markdown記法で記事作成してた人は記事更新するだけで自動で書き変わる)

めんどくさすぎ!

分かります.....

実際に貼りなおすだけでも本当に大変ですから。

 

でも以前は重くて長い遅延読込用のJavascriptを書き込んで

画像ごとにサイズを調べて書き込んで

loading="lazy"を書き込んで

って作業してたんですよね?

今は貼るだけで全自動で書き込んでくれるんですよね?

天国です!

そしてもう一度言います!

高速化に最も効果があるのは画像の遅延読込です!

表示速度改善法⑥
その他の高速化対策

f:id:sorokatu:20211001155344j:plain

サイト表示の高速化はSEOの要です!

お話した5つの高速化対策以外でも

たくさんの対処をしました。

効果があった!

と思われる代表的な対策をまとめて見たいと思います!

その他の対策
  • アドセンス広告遅延読込
    ⇒これはJavaScriptがいかに重いか!を思い知らされました!
    詳細はGoogleアドセンス広告を遅延読込する方法!をごらんください。
  • シェアボタンのカスタマイズ
    ⇒標準のものはJavaScriptやJqueryなどを使用していると思われ重いので、すべて非表示とした
  • フォローボタンのカスタマイズ
    ⇒シェアボタン同様重いので非表示。軽いものに変更
  • はてなスターの非表示(記事下は残す)
    ⇒カウント機能、スターをくれた人のアイコン画像(aboutページ含む)が重い。記事下のみ残す
  • サイドバーモジュールを最低限にする
    ⇒関連記事、月別アーカイブなど非表示
  • headに極力JavaScriptを貼らない
    ⇒やむを得ない場合のみdeferasyncで遅らせる

この他こまごまとした対策も

たくさん試しています。

効果があった!と実感できるものに限定してまとめて見ました!

サイトの高速化・表示速度改善法6選のまとめ

f:id:sorokatu:20211001155424j:plain

それではサイトの高速化・表示速度改善方法6選をまとめます。

サイト高速化対策6選
  • ①レンダリングを妨げるリソースを除外する
  • ②画像を圧縮してプログレッシブJPEGで統一する
  • ③アフィリエイト広告img要素の遅延読込をする
  • ④YouTubeなどiframe要素の遅延読込をする
  • ⑤オフスクリーン画像の遅延読込をする
  • ⑥その他の高速化対策をする

時間はかかりますが確実に実行されることをオススメします!

実際に表示速度の改善とともに

検索順位平均が上昇している人が

ここにいますから!

どうせすぐ落ちるよ.....

SEO対策の重要な要素であるサイトの高速化。

継続して取り組んでいきます!

 

最後まで読んでいただき

ありがとうございます!

(^-^)/

 

追記:この記事はメッチャ重いです!

Gistと画像貼りすぎ.....

(悪い例です.....(o^^o)

 

サイト高速化が関わるページインデックスの記事を書きました。ご参考に!

sorokatu.com