ジプシージャズ入門

ジプシージャズやドイツでの育児・雑学について

今スグできる、はてなブログの高速化

グーグル砲

皆さんも被害受けましたか?

グーグルが2019年3月に行ったアレです。

私はグーグルのアルゴリズムのアップデート以降、アクセス数が半減しちゃいました・・・。

結果的には、自分のブログを見直すいい機会だったと受け止めて、毎日もがいています。

アクセスが減った要因はいろいろあるでしょうが、結局は記事の質を上げて、ユーザーフレンドリーだったらアクセスは戻ると思っています。

そこで今取り組んでいるのは、ブログのリライトとサイトの表示速度を上げる事です。

特にブログの表示を遅くしていたのは、記事に使っている画像のせいでした。

 

目次

PageSpeed Insights

これはグーグルが提供しているサービスで、ブログの表示速度や改善点を教えてくれるサービスです。

使い方はいたって簡単で、速度を調べたいページのURLをコピペして、分析ボタンを押すだけです。

まずは自分のトップページ、他の全てのページの解析をしましょう。

PageSpeed Insights

分析結果 

PageSpeed Insightsの結果
PageSpeed Insightsの結果

これはとある私のページなのですが、分析するとスコアが表示されるのですが、0が最低で100が最高です。

私の場合は、モバイル47、パソコン84・・・。 モバイルは壊滅的に遅いですね。

ちなみに、3か月ほど前までモバイルは80以上を出していたのですが、何が変わったかは分かりませんが、急にスコアがこんなに落ちていました・・・。

スクロールダウンしていくと、問題点や改善点を教えてくれるので、チェックしていきます。 

PageSpeed Insightsが提案する改善点

一番最初の項目の<オフスクリーン画像の遅延読み込み>というところをクリックすると、画像と画像のバイト数を表示しているので、ここでブログで使っている画像の大きさをチェックしました。

表示速度を早くするために、画像のサイズをチェック
ブログを早く表示するために画像サイズをチェック

上記のスクショは画像を小さくした後の情報なんで結構小さいですが、以前は300KBなど普通にありました。

マックのスクショはPNG画像で重いので全部JPEGに変換

ちなみに私のブログは、画像を結構使っているので遅いのかと思いますが、他にも一つ気付いたことがあります。

「マックのスクリーンショットはPNGなので重い!」です。

知らなかったです、そんな事・・・。

という事で、PNG画像はすべてJPEGに変更です!

リライトもしながらっだったので、1ヵ月近くかかりましたが、結果には満足しています。

画像を軽くする方法

1・PNGをJPEGに

 iloveimgというオンラインでPNG画像をJPGに変換するものも使いましたが、Pixabayなどで応用できる画像をダウンロードして、写真自体も差し替えました。

2・画像を圧縮

compressjpegという無料のサイトを使って圧縮しています。これはJPG・PNG・PDFを圧縮できます。

https://compressjpeg.com/ja/

使い方は簡単で、<アップロードをクリック>して、写真をアップし、圧縮が終わったら<ダウンロードをクリック>するだけです。

もし圧縮率が物足りないなら、サムネイルにカーソルを合わせると<設定>と出てくるので、それをクリックして自分でクオリティーを変更します。

画像圧縮サイトの使い方
画像圧縮サイトの使い方

3・はてなフォトライフにアップ

はてなフォトライフで画像を軽くする設定

はてなフォトライフは使っていると思いますが、フォトライフの右上に<設定>という項目があるので、そこをクリックして<画像サイズ><画質>は小さめに設定しておきましょう。

というのも、大きい写真は重いので邪魔になるだけなんで。私は400ピクセルあれば問題ない大きさだと思います。

設定が終われば、最後にはてなフォトライフに画像をアップします。

ここからが結構きつい所なんですが、1ページ1ページ、全ての画像を差し替えていきます・・・。

きついですよね、コレ・・・。ただ、終わった後の達成感も大きいですよね。

他にもやったこと

私は画像のサイズが大きな問題だったんですが、他にも色々やっているので、簡単に紹介します。

場所・はてなブログ管理画面→デザイン

●はてなスター・はてなブックマークやファイスブックなどのSNSアイコンを全て削除

●関連記事を非表示(アドセンスの関連コンテンツで関連記事が出るから、はてなの関連記事を非表示にしています。関連コンテンツがない方は、表示していた方がいいと思います)

●コピペでカスタマイズしている人は、Jqueryが複数ある場合があるので、有った場合は削除。(タイトル下、記事上、記事下、フッタ、デザインCSSをチェック)

こういったやつ↡

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

場所・はてなブログ管理画面→設定→詳細設定

●TOPページの記事数 11記事

●トップページの表示形式→一覧

●キーワードリンクを付与しない、広告を非表示、ヘッダとフッタを表示しない、の全てにチェックを入れる

ちなみに今後やることも、ご紹介します。

1 Jqueryが2重に読み込まれているので、一つにする

2 Lazy load

1を簡単に説明しますと、はてなブログはすでにJqueryが組み込まれているのですが、スクリプトによっては、はてなのJqueryで動かないので、2つ使っている事があります。

自分で書き加えたJqueryの取得先をはてなと統一することによって、サーバーへの要求回数とデータ量を削減できます。

私の場合は、取得先を統一しても、なぜだかスピードが全然変わらないんです。なので、今は保留しています。

2は画像の読み込みを遅らせることによって、サイトの表示速度を上げる方法ですが、はてなブログで使えるLazy loadは画像がインデックスされないようなので、画像検索からブログに読者が来るサイトにはあまりお勧めじゃないんです。

こちらは、今も試行錯誤中ですので、出来たらご紹介します。

Sponsored Link
 

矛盾している事を発見

スピードにはまだまだ納得がいってないのですが、今のところは、高速化はこのくらいです。

他のサイトはどうなのかな~と気になって、有名なブロガーのサイトや、調べ物をしたときの上位サイトをチェックしているんですが、驚愕の事実を発見しました。

というのは、他のサイトめちゃくちゃ評価悪い!!ってことです。本当に。

みなさんも1位のサイトをチェックしてみて下さい。評価悪いものがかなり多いですよ。

ちなみに、私のブログで一番アクセスが多い記事のスピードをチェックしてみたのですが、モバイル33とパソコン80でした。このページの平均検索ランクは1.2で、一日に200~300のビューがあります。

ですので、Page speed insightsの結果が全てではないと思います。

 ただ、以前もGoogleはモバイルファーストインデックを推奨!レスポンシブデザインを使おう!で紹介したように、モバイルの速度は重要なので、改善するに越したことはないですね。

まとめ

写真を差し替える

多くの場合は、画像を軽くする・リサイズするで、かなり改善されますが、画像を一枚一枚差し替えていく作業は、記事数が多いと本当に時間と根気が掛かるので、大変な作業です。

ただ、やった分だけ報われるので、ぜひ頑張ってください。

ちなみに、内部リンクを張る時は、「埋め込み」じゃなく「タイトル」を選びましょう。

埋め込みのカード型は大きいし、クリック率も上がるかもしれませんが、重いです・・・