WordPressテーマ「Luxeritas」の読み込み速度が遅い場合の解決方法

スポンサーリンク

以前はこのサイトも使っていたテーマ「Luxeritas」は、他の運営サイトで今も利用しています。

快適に使っていたのですが、「なんか遅いな」と思ってある日サーチコンソールを開いてびっくりしました。

ページ読み込み時間が2000msecを超えている!

原因はわかりませんが思い当たることとしては、2月1日AMP対応ページを設定したが3月21日に戻した。

この対応以降ページ読み込み速度が悪化していることがわかります。

偶然このサイトだけが遅くなったのではなく、もう一つ別のLuxeritasのサイトも同じようにAMP設定を戻した日以降読み込みが遅くなっています。

ただ因果関係を見つけたところで私にはAMPをどうすることもできませんので、他の原因を探して対処することにしました。

 

解決方法はCSSやjavescriptの読み込み設定を見直し

Luxeritasは、高機能だけど初心者に親切ではありません。最初は高速化設定を全てオフにしてあります。

多分プラグインのバッティングを恐れて不具合がでないようにオフにしてあると思います。

Luxeritas高速化設定(私の場合)

親子のCSSは結合して子テーマのjavascriptは読み込まないようにしました。

Font Awesomeを選択して、使わないウィジェットのCSSはオフにしました。

jQueryの非同期は注意が必要です。別にやってもやらなくてもそれほど変わらないというのが私の実感です。

javascriptの結合はHTTP/2だと効果がないですが、わからないという人は設定しておいたほうが確実です。

 

上記の設定をしてもLuxeritasの読み込みが遅かった

設定は必ず行ったほうがいいのですが、肝心な読み込み速度は解決しませんでした。

再度GoogleSpeed InsightでチェックしてみるとJavascriptのレンダリングを解決していないと警告がでます。

Luxeritasはjavascriptのレンダリングをブロックする部分を解決する機能がありませんでした。

レンダリングブロックは読み込みを遅くする原因になります。クリックしてから表示されるまでの時間が長く感じるのはこのせいです。

 

javascriptを非同期読み込みで解消する

非同期の呪文があってjavascript読み込みのコードに「ansync」という文字を付け加えればOKです。

<scriptsrc="/javascript.js"async></script>

赤字のように文字を付け加えるだけです。

しかし、コード一つずつ設定するのは面倒という人に最適なプラグインがあります。

Async JS and CSS

インストールして有効かするだけでOKです。

3年前の古いプラグインですが、WordPress 4.7.3で正常に動作しています。

このプラグインを入れてgoogle pagespeed insightを実行するとレンダリングの問題が解消されてました。

 

最後に

ページの読み込みが遅いとリピーターが減ってしまいます。さらにgoogleの評価も下がるのでアクセスも下がってしまいます。

一度落ちたアクセスは戻すのが大変ですので常にサーチコンソールやanalyticsでエラーがないかを監視しておきましょう。

スポンサーリンク