Ad Code

ピックアップ

6/recent/ticker-posts

Bloggerが重い?モバイルサイトの速度をテストしましょう。

Bloggerが重い?モバイルサイトの速度テスト(読み込み最適化)

モバイルサイトの表示高速化は、今後さらに注目されるSEO対策の内の一つです。現在では、読み込みが遅いブログでも、検索上位なサイトはいっぱいあります。やはり、一番重要なSEO対策はユーザーを満足させるコンテンツ(内容)の提供だからです。これは、不変の真実です。

では、なぜGoogle先生はモバイルでの表示速度を気にするのか?それは、Googleのモバイルによる利用率の圧倒的なシェアが要因でしょう。

2018年2月時点で、主要40カ国・地域のうち、Googleがシェアにおいてトップでないのは中国(PC、モバイルともBaiduが6割前後)とロシア(PCでYANDEXが約6割。モバイルでも4割超)のみ。特にモバイルでは36の国・地域でGoogle のシェアが9割を超えている

(出典:Web担当 Forumより)

また、Google先生によると、ウェブサイトの読み込みが遅いと離脱率も高まるとされています。「ユーザーの利便性」を追及しているGoogleにとって、ページの読み込みは必須なのです。

そんなGoogleが提供するツールで『モバイルサイトの読み込み速度とパフォーマンスをテストする』というものがあります。上の写真のように、真ん中の検索ボックスにウェブサイトのURLを入れると、読み込み時間やパフォーマンスを4段階に分けて診断してくれます。

読み込み速度「同じ業種内の比較」

評価は、「特に良好」、「良好」、「普通」、そして「要改善」です。

出来れば、「良好~特に良好」までの範囲に入りたいものですよね。ただし、1回テストをして悪い評価だったとしても、次に同じURLの記事やトップページをテストすると評価が変わっていたりします。何回かテストをして、

匿名画像

平均が、大体これくらいかぁ

と思うくらいがちょうど良いかもしれません。でないと、私みたいにスピード改善オタクになってしまいかねません。

他にも、『PageSpeed Insights』というウェブサイトで、PC・モバイル両方での表示高速化に向けた改善できる項目や診断内容を教えてくれます。以前までは項目が少なく、結構なサイトが高得点を取っていたのですが、新しく仕様が変わってから、どのサイトも点数が落ちてしまっている傾向があります。

おそらく、この読み込み速度のスコアに関する記事も今後増えて来ると思うので、また色々と最新情報が分かり次第、こちらでも記事内容の更新をして行きたいと思います。

とりあえず、現段階で出来るモバイルサイトの速度を改善する方法です。ちょっとコードをいじる部分もあるので、不具合が起きるか不安な方は、止めておいた方が良いかもです。全ては、自己責任でお願いします。

Bloggerによる画像の圧縮

モバイルで最も重くなる原因は、画像サイズです。Bloggerの画像サイズには、「小・中・大・特大・元のサイズ」とあります。

それぞれのサイズは、小(width="200")・中(width="320")・大(width="400")・特大(width="640")となってます。この設定により、画像サイズを圧縮できるので、わざわざ違う画像圧縮ツールを使う必要がないのです。

私は以前まで、トップ画像を「元のサイズ」で表示していた為、かなり大きなサイズの画像を表示していました。さらに、容量の大きいPNG画像を多用していた為、これらを改善してみました。

画像サイズを特大、または画像自体を小さくしてみたり、PNG画像をJPG画像に変更してみたりすると、『モバイルサイトの読み込み速度とパフォーマンスをテストする』や『PageSpeed Insights』のスコアが改善されました。

スコアが低くなる原因は、画像による影響が大きいので、なるべくサイズの大きな画像を使用するのを控えたり、PNG画像でなくJPG画像にする事をおすすめします。

プログラミングコードの圧縮

プログラミングコードを圧縮するとは、改行とかなしでなるべく隙間を空けずにコードを埋めることを言います。改行して間を空けると、デザインや大きさ、カラーを変更したい時に分かり易いのですが、そういったコード間の隙間がモバイルやPCの読み込みを遅くしている可能性があります。

それでは、手打ちで隙間を埋めるのか?

いや、そんな事したらめちゃくちゃしんどいです。なので、ツールを使いましょう。私は、『JavaScript Compression』というコード圧縮ツールを使用しています。

JavaScriptと書いていますが、CSSコードの圧縮も可能です。

JavaScript Compressionでコードを圧縮

このように、上にJavaScript、あるいはCSSコードを入れましょう。そして、左下の「Compress(圧縮する)」を押します。すると、圧縮されたコードが下(赤枠で囲った部分)に表示されるので、そのコードをコピペで置き換えれば完了です。

圧縮率や圧縮されたバイト数も表示されるので、結構便利です。ただし、JavaScriptに関して注意が一点あります。<script type='text/javascript'>~</script>から圧縮せずに、 //<![CDATA[~//]]>と囲まれているコードの中身だけを圧縮して下さい。

<script>からコードを圧縮すると、「テーマを保存」しようとした時にエラーが発生します。なので、注意深くコードを見ながら圧縮して下さい。

JavaScriptを</body>近くに移動

JavaScriptを付け足すような機能(例えば、目次機能など)は、</head>の前に挿入するよう指示があるのですが、そういったJavaScriptは</body>の前に置く方が読み込み速度の面では良かったりします。

しかし、たまに</body>近くに持っていった後に、ツールが機能しないなんて事もあるので、注意が必要です。JavaScriptの他にも、最近増えて来ている「FontAwesome」を実装する為のコードなんかも、</head>内ではなく</body>内に入れた方が読み込みは早くなります。

まぁ、コードから意味が分かるかと思いますが、「head」内だと、頭からの読み込みになるので、最初にどうしても時間が掛かってしまうのです。

実際に、いくつかのコードを</body>内に移動すると、読み込みスピードは速くなり、スコアも改善されました。特に、「FontAwesome」を移動させた直後は、結構変わりました。

不必要な機能はなるべく削除

これが最も簡単かつ、解決の早い手段かもしれません。Bloggerの中に、無駄な機能を入れてませんか?本当に必要なものだけに絞ってみましょう。例えば、Twitterのタイムライン埋め込みなんかは、外部機能なので読み込みを遅くさせる要因にもなっていましたよ!

人によって、ブログ内にいれる機能の必要不必要は違って来ると思うので、

ひもくみ画像

これは削除すべきだ!

なんて言えませんが、読み込みを早くさせたいと少しでも思うのであれば、いくつかの機能を検討してみても良いでしょう。

広告を記事上でなく記事中に

これは驚きました。アドセンス広告ですら、読み込みの邪魔になっていたとは!

これは、実際に記事上と記事中で実験してみました。すると、記事中に入れた方がモバイルの読み込みスピードが上がったのです。もし、アドセンス広告を記事中下に表示させたい場合は、

こちらの記事を参考にしてみて下さい。


このモバイルサイトの速度テストとPageSpeed Insightsは、日に日に項目や基準が増え、厳しくなって来ている感じがあります。前までであれば、余裕で高得点を取れたのが、今では赤点を取ってしまっているような気分です。

モバイルサイトの読み込み速度テストで、毎回「要改善」が出てしまっている人は、今回の改善方法をいくつか実践してみて欲しいです。そうすれば、少しはスコアも改善されるでしょう。

しかし、読み込み速度でパーフェクトを狙い過ぎる必要はないと思います。読み込み速度が遅いウェブサイトでも、検索結果でトップを取っているウェブサイトはいくらでもあります。

やはり、一番重要なのはコンテンツの中身です。コンテンツが無い状態で、速度テストをしていても意味がありません。なので、記事を増やす事を優先的に考えましょう。それでは、素敵なBloggerライフを!

Reactions

コメントを投稿

0 コメント

Ad Code