さくらインターネットが「PHP モジュール」「nginx」に対応したのが、2019年4月11日。
それから約一年半経過したが、
遅い。
WordPressの表示が遅い。
はやいよ、さくらちゃん
馬鹿にしとんのか！！
WordPressって、変更できる箇所って限られてるんだよな・・・
私の環境は次の通り。
- さくらインターネット：スタンダードプラン
- WordPress 5.6
- PHP7.4
何故か年末にサイトの改善がしたくなるのは、なぜだろう？
PageSpeed Insightsで速度測定
PageSpeed Insightsとは、Googleが公開しているページ読み込み時間のベンチマークツール。
サーバ応答速度から負荷の高いJavaScriptやサイズの大きい画像などを検出してページの軽量化についてアドバイスをしてくれる。
結果はページの表示速度を0~100点で表示する。
やってみた。
Lighthouse returned error: FAILED_DOCUMENT_REQUEST. リクエストしたページを Lighthouse で正確に読み込めませんでした。テスト対象の URL が正しいこと、サーバーがすべてのリクエストに適切に応答していることを確認してください。（詳細: net::ERR_TIMED_OUT）
結果、まさかのタイムアウト。
論外じゃねーか！！
プラグインで可能な対応
やれる事をネットで調べた。
- ファイルの最適化
- 画像の最適化
- キャッシュの有効化
- 人気ページのランキングの履歴縮小
- 記事のリビジョンの削除
たかが知れてる。
プラグイン探してインストールして、設定画面でポチポチするだけ。
Autoptimize（JavaScriptファイルなどを簡単に最適化）
これは以前からインストールしていたもの・・・・でも、これを使ってもPageSpeed Insightsのタイムアウトは変わらず。
HTML、CSS、JavaScriptの圧縮が簡単にできる。
EWWW Image Optimizer（画像サイズの最適化）
コンテンツに使用する画像を一枚ずつ、いちいち圧縮していると効率が悪い。
そこで、自動的に画像サイズを圧縮してくれるプラグインだ。
・・・
画像の最適化はプラグイン使わずとも、毎回手動でやってるよ。
重要だと思えないけど、とりあえずインストール。
・・・結果、PageSpeed Insightsのタイムアウトは変わらず。
WP-Optimize（データベースの自動クリーンアップ＆最適化）
WordPressのデータベースが肥大化していくことが原因らしい。
表示速度の低下は、不要なデータを削除しデータベースを最適化することで回復できるとの事。
更新回数は一つの日記で50回をゆうに超えるので、これで速くなるかも！
・・・結果、PageSpeed Insightsのタイムアウトは変わらず。
WordPress Popular Posts（ログ上限の変更）
WordPressで人気の記事をランキング付きで表示してくれるプラグイン。
【変更内容】
「ログの上限」のデータ保存期間を「30日」に変更
「データキャッシュ」を「キャッシュしない」から「キャッシュする」に変更
「データサンプリング」を有効に変更
「キャッシュを空にする」と「すべてのデータを削除」のボタンを押す
もしくは「Simple GA Ranking」というプラグインを使えばよいらしい。
Google Analyticsのデータをもとにランキングを表示させるため、軽くてデータも正確。
なにそれ、最強。
ただ、このサイトはGoogle Analytics有効化してないな・・・
前述の設定の速度確認のため、今回は割愛（・・・というか不要だったのだが）。
・・・結果、PageSpeed Insightsのタイムアウトは変わらず。
WP Fastest Cache（キャッシュシステム有効化）
キャッシュのメリットは、一度キャッシュしてしまえばコンマ数秒で表示できるところ。
最もシンプルで速いWPキャッシュシステム。
これは速くなるだろう。
さて、再チャレンジ！
まさかのスタートライン！！
マジかよ。
a3 Lazy Load（オフスクリーン画像の遅延読み込み）
このプラグインは、Lazy loadした画像をGoogleのBotが読んでくれないせいで、
画像検索に表示されない
というSEO問題の対策がすでにされているプラグイン。
これを入れると、スコアが「+1」となった。
プラグインに頼らない高速化
ネットに書かれている通りに行ったが期待する結果は得られなかった。
ここからは中級者向けとなる。
WordPressのテーマを変更する（Cocoon）
色々とカスタマイズし過ぎて、時間がかかるからやってなかった。
今まで使っているのは
Stinger 5
SEOに強いテーマとして有名。
今回、採用したのが
Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。
「シンプル」と言いつつ、機能が豊富で、かつAMPやブラウザキャッシュ、Lazy Loadなどの高速化機能まで保有していた。
完全に浦島太郎状態・・・・・・。
ただ、テーマが大きくてアップロードできなかった。
そこで上限サイズを変更する。
アップロードの上限サイズはWordpressの設定ではなく、PHPの設定（php.ini）を修正する。
さくらレンタルサーバーの場合には、サーバーコントロールパネルにログインし「PHP設定ファイルの編集」にて次のように修正。
|
1 2 |
post_max_size = 60M upload_max_filesize = 60M |
これで「60MB」までアップロード可能となった。
これでインストールしてテーマを選択。
親テーマと子テーマをインストールして、子テーマを利用するらしい。
適用すると、スコアは「+7」となった。
ImageMagickを利用して画像を読み込む
さくらインターネット・スタンダードプラン利用者は、ImageMagickをモジュールで読み込む設定により有効化すると高速になるらしい。
ImageMagickは、言わずとしれた画像を操作したり表示したりするためのソフトウェア。
PHP.iniに次のように追記する。
|
1 |
extension=imagick.so |
これも非常に効果がありスコアが「+6」上がった。
Cocoonがサポートしてたプラグインは削除
で、逆に不要なプラグインは削除しよう。
Cocoonはランキング機能を保有したテーマだったので「WordPress Popular Posts」が不要になった。
さらにCocoonは、プラグインを利用せずとも目次機能を利用できるので「Table of Contents Plus」が不要になった。
インストールしたばかりだが「EWWW Image Optimizer」も役に立ってないし削除。「Regenerate Thumbnails」入ってるしね。
独自にブログカードを作っていたけど、これも差し替えた。差し替えには、全ページの文字列置換はプラグイン「Search Regex」を利用する。
現在、有効化されているプラグインは次の通り。
| a3 Lazy Load | 画像の遅延表示のために今回インストール |
| Autoptimize | Cocoonの設定より強力だったから残した。ファイル最適化 |
| Category Order and Taxonomy Terms Order | カテゴリの順序変更 |
| Classic Editor | 旧式Wordpressエディタ。これじゃないと日記書けない |
| Crayon Syntax Highlighter | ソースコードの表示を綺麗にしてくれる |
| Google XML Sitemaps | Googleに更新を伝えるXMLファイル。必要なのか正直分かってない |
| Regenerate Thumbnails | サムネイル画像の最適化 |
| Search Regex | 文字列の一括置換 |
| WP Fastest Cache | キャッシュ利用のために今回インストール |
| WP QuickLaTeX | 数式を記載するためにLatexを利用 |
| WP-Optimize – Clean, Compress, Cache | キャッシュの削除用に今回インストール |
| WPアソシエイトポストR2 | 商品紹介用 |
存在しているプラグインの設定もネットで調べて最適化。
これでスコアが「+9」となった。
おーーー！スコアが良くなった。
広告も付けてるし、このスコアで満足だわ。
本当は「WP Fastest Cache」も「.htaccess」を書き直せば不要。
利用していないJavaScript読み込み停止
プラグイン等を多くインストールしていると、使用していないページでもJavaScriptを読み込んでいる可能性がある。
下記を見て「function.php」を書き換えて対応できるらしい。
今回は、もう満足したので割愛。
AMP（Accelerated Mobile Pages）対応
AMP（アンプ）は、
モバイルユーザーのユーザー体験向上を目的
として、GoogleやTwitterなどが共同で参加している仕組み、HTML規格。
AMP HTMLはモバイル端末で閲覧することが想定しており、JavaScriptやCSS、一部のHTMLタグを制限してる。
AMP対応したページはGoogleの検索結果画面でAMPアイコンが表示される。
AMPのためにプラグインを入れていたが、これもCocoonの機能で対応できた。凄いな。
AMP版で広告
ずっと実施してなかったが、CocoonだとAMP中に広告をつけるのも簡単だ。
ステップ 1: Adsenseのスクリプトをコピーして、amp-head-insert.phpを使って
タグの間に貼り付けるステップ 2: amp-body-top-insert.phpを使って
タグの間に AMP 広告コードをコピーして貼り付ける
これで解決・・・のはず。
まとめ
体感的にも少し早くなった気がする。
いや、凄いな・・・・
でもこれ以上は厳しい。
・・・・やっぱり、さくらインターネットは遅いよね。
