お手軽サイトの高速化設定

Wordpress///
  1. ホーム
  2. Wordpress
  3. お手軽サイトの高速化設定

【2020年6月5日】
現在サーバー引っ越し&サイト最適化の為、1から構築し直しております。
その為、キャッシュプラグイン等は停止しております。

またサイト全体の「WebP対応」に伴い、「compress jpeg & png images」の記述について1点変更があります。
詳細は下記記事をご確認ください。


現在、本サイトではWordpress + Nishiki Pro を利用してポートフォリオサイトを作成しているのですが、現在「高速化&最適化」の為に以下のプラグインを利用しています。

  1. WP SuperCache ( 再構築中の為、停止中)
  2. Autoptimize
  3. Lazy Loading Feature Plugin
  4. Compress JPEG & PNG images

キャッシュプラグインについては、サイトの規模や借りているサーバーにもよりますが、最終的に「サイトが完成した段階」での導入が望ましいと思います。

まずは他のプラグイン群やサイトの構成を見直して高速化を図るとよろしいかと思います。

WP SuperCache

簡単な説明

WordPressを使っている方でしたら一度は聞いたことがある名前だと思います。

WordPressの開発元である「Automattic」が提供しているので、親和性と使いやすさは一番だと思います。
シンプルかつ簡単に使うのであればこれでいいのではないでしょうか

簡単に説明すると、Wordpress は アクセスするたびに 内部のデータベースにアクセスしたりPHPを実行したり色々ごにょごにょしてウェブサイトとして表示させてくれているのですが、1回1回それをやっていると、サーバーにも負担がかかりますし、何より表示が遅くなるんですね。
キャッシュプラグインはその名の通り、一定時間サイトの情報を保存して、上述の処理を行わずにウェブサイトとして表示させることで、「サーバーの負担軽減」と「サイトの表示高速化」を実現しています。

もちろん、WordpressのThemeやサーバー、他プラグイン等との相性がありますし、頻繁に画面更新が行われる様なサイト(ECサイト等)とは相性が悪いという面もあります。

本サイトでの設定

現在サイトを構築中の為、本プラグインは未導入です。

Autoptimize

簡単な説明

このプラグインは、HTMLやCSS、JS等のファイルに対して「ファイル内の改行やスペースを削除」し、かつ「複数あるファイルを一纏めにして圧縮」することによりサイト表示の高速化を行ってくれるプラグインとなります。

上述のキャッシュプラグインは「サイトの情報そのものを保存」するのに対し、こちらはサイトを構成するコードを「最適化」することによって、高速化及びサーバーの負担軽減を実現しています。

本サイトでの設定

基本この3つをチェックしています。エラーが出る場合は下から外してみます。

基本はこの3つのチェックで問題は無いと思います。

こちらは「最適化」のみのチェックで問題は無いかと思います。

エラーやレイアウト崩れ等が発生する場合は、上二つを外してください。

その他の設定は基本デフォルトでよろしいかと思います。
また画像遅延処理設定もあるのですが、後述の「Native Lazyload」を利用しています。

Lazy Loading Feature Plugin

簡単な説明

画像遅延読み込みプラグインです。
原則画像という物は比較的容量が大きく、サイトの表示速度に影響を及ぼします。

またウェブサイトの仕様上、HTMLは画像もコードに書かれているとおり素直に読み込みをさせようとします。
そうなると、サイト表示の遅延につながってしまうため、画像遅延系のJSを使うことにより、「予め読み込む」のでは無く、「その時になったら読み込む」という「必要な時に必要な物を読み込む」処理をさせることにより、結果としてサイトの高速化になります。

上述の「Autoptimize」でも設定は出来るのですが、「Nishiki Pro」の制作者様から「次期Wordpressで標準採用される画像遅延の仕組みは本プラグインの予定」と伺ったので、こちらを入れてみました。

本サイトでの設定

特に設定はありません。プラグインを導入して有効化するだけです。

Compress JPEG & PNG images

簡単な説明

アップロードした、JPEGやPNG画像を綺麗に「圧縮&最適化」してくれるプラグインです。
画像を圧縮してくれる有名なウェブサービス「TinyPNG」が提供しているプラグインです。

画像によっては容量を半分以上圧縮してくれるので、「大丈夫なの?」と思いますが、ウェブ上の通常画像として見る限りは、言われても分からないレベルに綺麗に圧縮&最適化してくれます。

基本無料ですが、圧縮&最適化枚数が「500枚/月」を超えると、有料課金になります。
後述の「Image sizes」にチェックを入れた数が増えると1回当たりの処理枚数カウントが回りますので注意してください。(本サイトでは1アップロード毎に2カウントです)

導入まで

まず、下記登録ページにアクセスし、APIキーを取得する必要があります。

名前をメールアドレスを入力し、「Get your API key」をクリックします。
その後、入力したアドレス宛にメールが届きます。

「Visit Your dashboard」 をクリックします。
その後、マイページに遷移しますので、「APIキー」をコピーします。

最後にプラグインを導入し、有効時に取得したAPIキーを入力します。

本サイトでの設定

WebP対応をする場合、「New Image uploads」の設定を変更する必要があります。
詳細はこちらの記事をご確認ください。


以上になります。
少しでも参考になると幸いです。