URL(パーマリンク構造)を見直したためリンク切れの嵐です。ごめんなさい!

WordPressの軽量化・高速化を意識してサイトを作る方法

この記事は約6分で読めます。

 ホームページ製作者にとって、 「サイトの表示をさらに速くする」というのは結構重要な課題です。凝った内容にすればするほど、画像なども多くなり重くなってしまいます。さらに、ブログパーツやCGIプログラムなど、いろいろなオプションをつけていけばなおのことです。低価格、使い放題の高速通信が広がっても、モバイル端末等を意識した「軽い」サイト作りは大切です。

スポンサーリンク

PageSpeed Insights

 私のところに届くgoogle ニュースレターには、「サイトの読み込み速度はユーザーの満足度に影響するため、Google 検索結果のランキングを決定する重要な要素です。」とあります。まぁ、当然ですがやはり速い方がいいようです。

 そこで、Googleの、▶ ページ スピード オンライン というサイトを使ってみます。これは、URL を入れるだけでウェブページのコンテンツを解析し、高速化のヒントをご案内してもらうことができます。

高速化の提案

高い優先度

 これらの読み込み時間の短縮方法は、少ない開発努力で大きなパフォーマンスの効果を得る可能性があるものです。まずこれらの項目に対処してください→ブラウザのキャッシュを活用する、圧縮を有効にする。

中間の優先度

 これらの読み込み時間の短縮方法は、それほど大きな効果が得られないものか、実装の作業量が多いものです。これらの項目は高い優先度の短縮方法の後で対処してください→画像を最適化する、CSS スプライトに画像をまとめる、小さな JavaScript をインライン化する。

低い優先度

 これらの読み込み時間の短縮方法は、効果が最も小さいものです。より高い優先度の項目に対処してから、これらの項目を検討してください→変更後のサイズで画像を提供する、JavaScript の解析を遅延する、リダイレクトの回数を減らす、CSS を縮小する、キャッシュ バリデータを指定する、HTML を縮小する、JavaScript を縮小する、CSS をドキュメント ヘッドに含める、文字セットを指定する、Vary: Accept-Encoding ヘッダーを指定する。

・・・どれも細かくやっていけばいいのでしょうが、それもなかなか面倒ですね。

▶ スポンサードリンク

具体的な改善策

 サイトの高速化を目指して具体的に手を打っていきます。

サーバーやテーマを見直す

根本的なことですが、サーバーの応答時間を改善する

 そもそも論になってしまいますが、データ置いてあるサーバーには、通信速度の速いものから遅いものまで様々あります。当然、ここが遅ければそれだけハンデがあるわけです。トラックを軽量化してスピードアップするのとスポーツカーを軽量化するのでは訳が違いますよね。サーバー選びやテーマ選びは重要です。

https://elementor.misuzuya.com/wpx/https://elementor.misuzuya.com/theme/

画像を圧縮 WP Smush.it

 ホームページ用に画質を落として撮影したものや、事前に圧縮したものを使えばよいのですが、意外と面倒で忘れることもあります。WP Smush.itというプラグインを使えばワンタッチで全画像のファイルサイズを圧縮してくれます。私のサイトでもこのプラグインを使った結果、赤の注意マークから緑の良好マークに改善されました。


 圧縮できるものとそうでないものがあるようですが、かなりの改善ですね。試してみる価値があります。

Jetpackのパフォーマンス
Photonは便利…しかし、重大なデメリットが!

 「画像のパフォーマンスと速度を向上するには有効化してください。」これだけを見ると、断る理由なんかありませんよね。でも、次のようなデメリットがあることを紹介します。

 Jetpackの機能には簡単に画像を圧縮してくれる一見とても便利な機能があります。以前はPhotonと表記されていたのですが、今は「パフォーマンスの改善」と表示されています。この機能、なんと、自分のサイトの画像を圧縮して別サーバーに置いてくれるのです。よく分かる点としては、画像のURLがhttps://i2.wp.com/から始まるアドレスになっていることです。これ、すごく便利なように見えて、結構厄介です。

一度使った画像は永久に変更できない&削除されない。

 最大のデメリットはこれです。私がよく困ったのは、画像に変更を加えたとしても、画像が変わらないという問題が起こった時です。結局、画像に変更を加えたときはファイル名も変えるという作業が必要で、ファイルの数は増えるし、修正する手間も増えるということになります。これを知らずにサイトを更新していると、閲覧者に古い画像を表示し続けることになるので大きなリスクになります。

 しかも、画像の遅延読み込みを行う「Lazy Load」系や、「Lightbox」など画像処理系のプラグインが正常に機能しなくなることもあります。クリックひとつで点数の改善が図れる一方でこのようなデメリットがあることも頭に入れておくことが大切です。私はもうこの機能を使っていません。

.htaccessにキャッシュの設定を記述

 「ブラウザの有効期限を設定する」ためのソースを.htaccessに記述します。記述する内容は、ネット上の様々なところに例として掲載されていますので探してみてください。

 これは、簡単に言うと見てくれる方のパソコンに一時的に自分のサイトの情報を保存してもらうための設定です。再度アクセスしたときには情報を全て送受信する必要がないので、パッとWEBページを表示することができます。それによりサイトの高速化、サーバの負荷軽減ができます。ただ、有効期限を長くし過ぎると、古い情報が表示されてしまいますので更新頻度等を考慮して設定するようにします。

サーバーのサービスを活用する

wpXサーバーの場合

 wpXでは、管理画面上で2つの高速化設定ができます。ひとつは、WordPressのキャッシュ設定です。そして、もうひとつは、拡張モジュール「mod_pagespeed」

 これらの機能をONにするだけでWebサイトのコンテンツを最適化し、表示速度の向上および転送量の軽減を図ることができます。私のような素人にはとってもありがたい機能です。

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

さくらインターネットの場合

 さくらインターネットのコントロールパネルを開き、サイドバーのアプリケーション設定にある、PHP編集。そこに、次の1行を記述しました。たったこれだけです。

zlib.output_compression=1

 これだけで14項目あったご指摘が1項目まで削減。最高得点の76まで上げていただきました。

タイトルとURLをコピーしました