WEBP導入などでページ読込速度を改善

ページの読込速度の改善を図るべく、システム更新を行いました。
ページ読込速度の重要性と、今回の改善点を説明します。

ページ読込速度は重要?

ページの読込速度は、Googleの検索順位を算出する際の要素の1つです。Googleが公式に認めています。
検索順位への良い影響が期待できます。

一方で、ホームページ訪問者への好印象も大きなメリットの1つです。
例えば、ライバルのホームページとサービス・商品等の内容比較がされた場合、読込速度の差が大きければ、速度が決定要因の1つに浮上する可能性があります。
サービス・商品に大きな相違がなければ、それが決定打になることもあるでしょう。

昨今、WordpressのプラグインやWeb Fontなど読込遅延要素を盛り込みすぎた、表示に30秒~1分かかるようなホームページが実際に散見されます。
何かを探しているときは、そのような遅いホームページをスルーする方も多いと思います。
読込速度は、閲覧機会を損なわないために必要な、最低条件の1つという見方もできます。

いずれにせよ、読込速度は速いに越したことはありません。

システム更新内容

今回の更新はすべて、まめわざの操作に影響はなく、設定等も不要です。
やや専門的な内容を含みます。

更新内容説明
WEBPの導入広く利用されている画像フォーマットのJPEG(JPG)よりも圧縮率の高い「WEBP」を導入しました。
画像の見た目はほとんど変化がないものの、ファイルサイズが小さくなって、読込速度改善が期待されます。
gzip導入CSSやJavascriptをgzip圧縮で提供する仕様に変更しました。
ファイルサイズが小さくなることで、読込速度改善が期待されます。
scriptタグに
defer属性
Javascriptの読み込みタイミングを遅らせます。
ページ表示時の処理が減ることで、読込速度改善が期待されます。
Web FontにswapアイコンのWeb Fontの読み込みを遅延させるswapを設定しました。
ページ表示時の処理が減ることで、読込速度改善が期待されます。

読込速度に最も影響があるのはページの分量

今回の更新により、読込速度の一定の改善が見込めます。
しかし、ページの分量(ボリューム)が読込速度に与える影響は、これを上回ります。
つまり、1ページ内に膨大な内容を設置したり、大量の写真を設置すれば、読込速度が遅くなることは避けられません。

スマホは通信速度がWiFiに比べて遅く、また画面サイズが小さいことから、ページ分量の影響がより顕著です。
パソコンよりもスマホでホームページを閲覧することが多い現状では、ページ分量は配慮すべき重要ポイントと言えます。

まめわざでは、ページ数による課金はありません(有料作成依頼時の初期作成を除く)。
ページ分量が大きくなる場合は、ページ分けをして分量を分散することを強くおすすめいたします。
閲覧者に優しい適切な分量にすることで管理もしやすくなり、また今回の施策も顕在化します。
ぜひ一度見直してみましょう。

ページ数を増やす方法

まめわざにログイン後、最初のページに表示されるページ一覧の、
各ページの間にある「+」か、「+下層に追加」(PCではマウスと当てた際、スマホでは「≡」を押した際に表示)を押すと、小窓が表示され、ページ名などを入力してページを追加できます。

1枚モードを解除

まめわざにログイン後、はじめから編集ページが表示される、1枚だけのホームページの場合(アドレスが〇〇.apage.jpの場合など)は、「1枚モード」の状態です。
右上の「≡」→「1枚モード」タブと進んで1枚モードを解除することで、複数ページ構成に切り替えることが可能です。

PageSpeed Insights

Googleでは、ホームページの読込速度改善を促す目的で、読込速度を測定し、改善策を提案するサービス「PageSpeed Insights」を提供しています。
https://developers.google.com/speed/pagespeed/insights/?hl=ja

100点をとっても、検索順位が順位が1位になるようなことはありません。まめわざの公式サイトのトップページで60点ほどです。
測定するたびにスコアが変わることがあったり、またまめわざ利用者の方では不可能な改善策が提案されるため、神経質にならず、指標の1つとして参考までにご利用ください。