パソコンやスマホに関することを気ままに書いていきます!

WordPress ブログ

【第1回】サイト高速化のために行った3つのこと

投稿日:

スポンサーリンク

はじめに

今回は僕が実践したWebサイトの高速化についてお話します。
専門家ではないので別のやり方などもっと良い方法があるかもしれませんが、参考になれば幸いです。

レンタルサーバーの設定変更

現在僕はネットオウル(Netowl)が提供するスターサーバーを契約しています。

こちらのレンタルサーバにはPHPプログラムを高速化する機能があります。

管理画面から確認してみたところ、無効になったままでした。
「ON」に切り替えます。
これで、運営会社いわく最大8倍高速になるようです。
本来であればサイトを作った時点でONにすべき項目でしたがすっかり見落としていました。
初期設定のまま変更していない人もいるのではないでしょうか。
他のレンタルサーバーでもほとんどの場合、同様の機能が実装されてので一度確認してみるといいです。

高速化プラグイン導入

まずはキャッシュ化プラグインを導入します。
表示速度が遅い場合、キャッシュ化することで改善する場合があります。
※予めバックアップをおすすめします

W3 Total Cache


今回導入したのはW3 Total Cacheというプラグインです。

設定

基本設定

インストールが終わったら管理メニューの「Performance(パフォーマンス)」から「General Setting(一般設定)」を開きます。
以下の項目にチェックを入れます。

Page Cache(ページキャッシュ)

Database Cache(データベースキャッシュ)

Browser Cache(ブラウザキャッシュ)
チェックを入れたら「Save all settings(すべての設定を保存)」をクリックして変更を保存します。

モバイル用設定

続いてモバイル端末用のキャッシュ設定を行います。
別々のキャッシュデータを作成することで「スマホで見ているのにPCのキャッシュが表示される」なんてことを防げます。

管理メニューの「Performance」から「User Agent Groups(ユーザーエージェントグループ)」を開きます。

Group name(グループ名)が「tablets」となっている項目を表示し、「Enabled(有効化済み)」にチェックを入れます。

続いてGroup name(グループ名)が「phones」となっている項目を表示し、「Enabled(有効化済み)」にチェックを入れます。
チェックを入れたら「すべての設定を保存」をクリックしましょう。
これでモバイル用設定は終わりです。

EWWW Image Optimizer

続いてEWWW Image Optimizerをインストールします。
こちらは画像に含まれる不要なメタデータ(カメラ情報や撮影時の設定など)を削除し、画像を圧縮・最適化するプラグインです。

設定

導入後は新規で画像をアップロード際に自動で最適化されます。
基本そのままの設定でも大丈夫ですが、念の為確認しておきます。

「ベーシック」の中にある「メタデータを削除」にチェックが入っているか確認してください。

アップロード済みファイルの最適化

それでは、既にアップロードしているファイルの最適化を行います。

「メディア」から「一括最適化」を開き、「最適化されていない画像をスキャンする」をクリックします。
スキャン後は「最適化」をクリックしてください。

確認

最適化されているかどうかはメディアライブラリから確認できます。

このようにどれくらい圧縮されたか表示されていますね。
前述の通りプラグイン導入後、アップロードしたファイルは自動的に最適化されます。

導入済みプラグインの見直し

ここでプラグインを見直します。
しばらくWordPressを使っていると便利そうだなと思って導入したプラグインでも実際は使っていないものがあるのではないかと思います。

不要プラグインの削除

使わないプラグインを停止、または削除しサーバーに掛かる負荷を減らしま。
バックアップなどたまに使うプラグインは「停止」で構いませんが、使うことがないと思うプラグインは思い切って削除しちゃいましょう。
念の為、削除前に一度停止してサイトの挙動に問題がないか確認しておくのが無難です。
また、プラグインを導入しなくても直接PHPファイルに書き込めるものは子テーマに書き込んで、プラグインを削除しました。

残骸ファイルの削除

プラグインの削除後、データーベースなどに残骸ファイルが残る場合があります。
次のプラグインを導入し、不要になったデータを削除しましょう。

WP-Optimizeの導入


まずはWP-Optimizeをインストールします。
※事前にデータベース並びにサイトのバックアップを行ってください。

必要な項目にチェックを入れ最適化します。
今回は全てにチェックを入れました。
通常は、
データベーステーブルの最適化
すべての投稿リビジョンをクリーン
Clean all auto-draft posts
Clean all trashed posts
Remove spam and trashed comments
のみチェックを入れれば大丈夫です。


最適化が終わったら隣の「テーブル」タブに移動します。
「インストールされていません」と表示されているファイルは不要なため「削除」ボタンを押します。
「[inactive]」と表示されているファイルは、無効化してあるプラグインのデータなので今後使う可能性がある場合は残しておきます。

どれくらい変わったのか

それでは、どれくらい改善されたのか見ていきましょう。
今回はPageSpeed InsightsとChrome管理者ツールの「Load」時間にて計測しました。

設定前

PageSpeed Insights

Chrome管理者ツール

 PCサイトモバイルサイト
1回目
1.612.27
2回目1.542.21
3回目1.592.13
4回目1.702.11
5回目1.982.29
平均(s)1.6842.202

設定後

PageSpeed Insights

Chrome管理者ツール

 PCサイトモバイルサイト
1回目
1.351.49
2回目1.011.64
3回目1.171.44
4回目0.981.49
5回目1.221.33
平均(s)1.1461.478

結果

GoogleのPageSpeed Insightsではあまりスコアは上がりませんでした。しかし、Chromeの管理者ツールで確認したLoad時間では約0.5秒の時間短縮に成功しています。
プラシーボ効果かもしれませんが、体感的に読み込み速度が速くなったように感じます。

まとめ

今回はこのような結果となりました。一番効果があったのはキャッシュの有効化です。キャッシュプラグインの導入によって大幅にロード時間が短縮されました。
不要なJavaScriptの削除や使用していないCSSを削除するなど、もう少し高度な作業をやればさらなる高速化が期待できるのではないかと思います。
少しずつ知識をつけていきたいですね。
また、もっと高速なサーバーに乗り換えるのも1つの方法です。
今契約しているスターサーバーはたまにサイトダウンすることがあります。もしこれが今後も続くようであれば乗り換えを検討してもよさそうです。

スポンサーリンク

-WordPress, ブログ


comment

メールアドレスが公開されることはありません。

関連記事

半年使ったMacを修理に出した話と修理に出す方法について

目次1 はじめに2 突然あらわれた不具合3 修理の準備4 修理の申込み4.1 持ち込みと配送4.1.1 持ち込み修理4.1.2 配送修理4.2 オンラインで予約する5 いざ、AppleStoreに持ち …

なぜAMDのCPUを選んだのか

先日、こちらの記事を書いたのですが、長くなってしまったので今回の記事で続きを書こうと思います。 目次1 AMDのCPUを選んだ理由2 intelとAMDの大きな違い3 オーバークロックについて4 なぜ …

人生初のCPUガチャやってきた

目次1 はじめに2 運命のガチャ2.1 1回目2.2 2回目2.3 3回目2.4 4回目2.5 5回目2.6 6回目2.7 7回目2.8 8回目2.9 9回目2.10 10回目3 まとめ はじめに 今 …

AMDの次世代CPU Zen2のスペックがリーク!?

目次1 ついにリーク!?2 スペックについて3 買うの? ついにリーク!? AMDの次世代CPUであるZen2シリーズのリークらしき情報が流れていました。 AMD Ryzen 3000シリーズのスペッ …

東京旅行に行ってきた【2019.12】

目次1 前置き2 なぜ東京に行ったの?2.1 Creator Campについて3 旅行を満喫3.1 都庁3.2 STARBUCKS RESERVE ROASTERY TOKYO3.3 東京タワー3.4 …