ルクセリタス高速化してスマホの表示速度改善したよ

困っている人

ページスピードインサイトのモバイルスコアの上げ方を教えてほしい

そんなお悩みを解決します。

それでは、本題に入ります。

スマホの表示速度を改善した手順

本記事は、モバイルスコアを『５６』→『１００』へアップさせた手順をご紹介します。

丸３日調べながら作業しました・・・。
本記事では、丸３日分を凝縮して『１時間』で高速化できるようにまとめています。

困っている人

表示速度が遅い・・・

と悩んでいる方、必見ですよ。

本記事では、参考にさせていただいたサイトが多くあります。
外部リンク多めですｗ。

下記の１１項目がモバイルスコアをアップさせた手順です。

モバイルスコアの上昇が高かった順に並べています。
※私の環境ですので、皆さんには当てはまらない可能性あります。

ばらもん。

やることは多いですよぉ

簡潔に説明していきます。

不要なプラグインの削除

可能な限りプラグインを削除しました。
削除した中でも有名なプラグインは、『WordPress Popular Posts』でしょうか。

『WordPress Popular Posts』は、人気記事を表示してくれるプラグインです。
私は人気記事の表示は必要ないと判断しました。

ばらもん。

そもそも、人気記事のランキングって本当に必要ですか？

『筆者のおすすめ記事ランキング』を任意で貼るほうがメリットが大きいと考えています。

人気の記事って検索流入で読まれていますからね。
本当に読んで欲しい記事は、人気記事ではないはずです。

プラグインを無効化してみて、影響がなさそうなら削除する感じで良いです。
プラグインをガシガシ削除すると、ワードプレスは軽くなります。

もうひとつ。

開発者のるなさんも、下記のようにおっしゃっています。

Luxeritas は SEO 最適化してるため、全く不要。

むしろ、プラグインを入れることによって、canonical や description のタグが重複して SEO がマイナスになる。

出典元：お勧めのプラグインとお勧めしないプラグイン（https://thk.kanzae.net/wp/settings/t1270/）

ContactForm７の制限

ContactForm７は、全ページでリードされています。
実は、ContactForm７って重たいんです。

functions.phpに追記して、ContactForm７がお問い合わせフォーム以外では動作しないようにします。
あらかじめ、functions.phpのバックアップを取ってから作業しましょう。

『【WordPress】Contact Form 7 を重くさせない方法！』を参考にさせていただきました。

headタグ記述の見直し

headタグに記述していた『Google自動広告』と『FontAwesome』のスクリプト文を削除しました。
ルクセリタスの子テーマをアップデートするときに、小奴らが悪さをしているのを発見しました。

参考記事は→【Luxeritasルクセリタス】アップデート手順！１５分で完了したよ

２つのスクリプト文を削除するだけで、モバイルスコアが１０近くアップしました。

画像最適化（webpへ変換）

画像をwebpに変換しました。
高速化でググると『画像最適化』がヒットします。

次世代フォーマットでの画像の配信が改善可能ってやつです。

使用するプラグインは『EWWW Image Optimizer』。

webp変換時に注意する点は、『.htaccess』の記述場所です。
BEGIN WordPressよりも上に記述してくださいね。

『【画像で解説】EWWW Image OptimizerでWebPを設定する方法』を参考にさせていただきました。

私は『１１,３０２点』の画像をwebpに変換しました。

ルクセリタス高速化設定

ルクセリタスは個人に合った高速化設定が簡単にできることが魅力です。
『.htaccess』への高速化記述もありますが、エックスサーバーの高速化設定と競合しそうなのでヤメました。

エックスサーバー高速化設定

エックスサーバー様様です。
下記の設定をすることで、『最初のサーバー応答時間を早くしてくだしあ』が改善できました。

step
1XアクセラレータVer.2へ変更

step
2ブラウザキャッシュON

step
3サーバーキャッシュON

エックスサーバーであれば、プラグイン『UpdraftPlus』は必要ありません。
そもそも、『UpdraftPlus』は容量を食いまくるのでオススメできません。

エックスサーバーに興味を持たれた方は→『【知らなきゃ損！】a8セルフバックでエックスサーバーお得に契約』

ルクセリタス親子テーマアップデート

モバイルスコアに影響はないかもしれませんが、ルクセリタステーマをアップデートしました。
もちろん、親テーマ＆子テーマの両方をアップデートです。

ばらもん。

１年以上もアップデートしていなかったからね（爆）

先述しましたが、子テーマを初期化したときに悪さをしていたスクリプト文を発見することができました。

完全な棚ぼたです。

Luxeritasアップデート方法は『【Luxeritasルクセリタス】アップデート手順！１５分で完了したよ』

phpバージョンアップデート

phpをむやみにバージョンアップすると『致命的なエラー』が発生する危険性があります。
本作業は要注意です。

ワードプレスのダッシュボードを確認すると、phpバージョンが古いことが判明しました。
たまにはサイトヘルス画面を見ることをオススメします。

エックスサーバー側での作業になります。
エックスサーバーのサーバーパネルからphpバージョンを『PHP7.4.13（推奨）』に変更。

phpバージョンを上げると速度アップが期待できます。

何も考えずに、兄弟ブログのブログ汁（アフィンガー５）も『PHP7.4.13（推奨）』に変更しておきました。

やってしまいましたｗ（致命的なエラー）

アフィンガー５のブログ画面が崩れました。
モバイルページは通常通り表示されますが、パソコンページは見事にぐちゃぐちゃですｗ。
（ページ下部にはデバッグモードと致命的なエラーが発生していますの文字が・・・）

しかし、エックスサーバーなら心配ご無用！
１０分もあれば復元完了します。

先にphpバージョンをもとに戻すことがポイントです。
phpバージョンがもとに戻ったことが確認できたら、エックスサーバー機能で復元します。

step
1期間を指定して自動バックアップデータから復元

step
2準備中

step
3正常完了

アドセンスの貼り付け位置変更

ヘッダー下ウィジェットのGoogle AdSense広告をを消しました。
ヘッダー周りは、軽くしておくことがスピードアップに繋がると考えたからです。

ついでに、ヘッダー画像も消しておきました。

ツイッター埋め込み削除（記事）

投稿記事の表示スピードは特にひどかったです。
モバイルスコア『２２』！！！

ツイッター埋め込みがモバイルスコアを下げていることは明らかでした。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記のスクリプト文は、複数ツイート埋め込みをしている場合はひとつで良いです。
しかし、１つでもツイート埋め込みがあればカナリ重くなります。

ツイート埋め込みは極力ヤメておくことをオススメします。
ツイッター埋め込みの削除×本記事でご紹介している作業をすることで・・・。

モバイルスコア『２２』だった記事は、『９８』へアップしました。

ルクセリタスアニメーション無効化

ルクセリタスのアニメーションを無効化しました。
この設定で重くなっている方は多数いるのでは？と推測。

体感的には、イチバン効果があったと感じています。
アニメーションの設定をされている方は多いのではないでしょうか。

まとめ

ページ表示速度は早いに越したことはありません。

高速化処理をするにあたりエックスサーバーで良かったと心底感じました。
サーバー選びに悩まれている方は『エックスサーバー』をオススメします。

エックスサーバーに興味を持たれた方は『エックスサーバー8つのメリット＆WordPressを移行した３つの理由』の記事をご覧ください。