Luxeritasの設定とプラグインでサイトを高速化!PageSpeed Insightsのスコアアップ!

自分はLolipopのレンタルサーバでこのサイトを運営しているのですが、お金がないのでライトプランで運営しています。

すると、Google PageSpeed Insightsでは毎回のようにサイトの応答速度の警告が来る。

スタンダートプランにしてモジュール版PHPにすると解決するのかも、と思いながらも試すことができません。

なので今回は、そんな中でもできるだけPageSpeed Insightsのスコアをあげられるような設定やプラグインを紹介しようと思います。

WordPressのテーマはLuxeritasを使っています。アイキャッチが光速なのはLuxeritasの名前の由来が

名前はラテン語の Lux(光)と Celeritas(速)のガッチャンコ形。引用:thk.kanzae.net/wp/

だからです。

Luxeritasの設定

サイトのダッシュボードを開き、左のメニューバーから”Luxeritas”を選んで、さらにその中の”カスタマイズ”を選択してください。

その中のタブごとに高速化に関する項目を説明していきます。
また、筆者おすすめの設定も紹介します。

“圧縮・最適化”タブ

HTMLの圧縮
圧縮率・高

CSS の最適化
親と子の CSS を結合して圧縮する

この設定にすると一度画面が真っ白になったのですがそのあとなぜか直りました。

Javascript の最適化
圧縮する(追加ファイルも結合して圧縮できます)

自分はPrism.jsを使っているので”追加して圧縮・結合する Javascript ファイル名”にprismと追記

“CSS”タブ

モード選択
Luxeritas Mode

Bootstrapを使う方はBootstrap 3 Mode

外部 CSS の直接出力
テーマの CSS を HTML に埋め込む ( 高速化 ? )

実際に高速化されているかはわかりませんがPageSpeed Insightsではこちらのほうがスコアが上がります。

子テーマの CSS
使用している場合は、読み込む

アイコンフォントの CSS
アイコンフォント ( Font Awesome ) の読み込み方法:
同期(アイコンフォントが遅延しない)

これはCSSをテーマに埋め込んでいるため非同期にしてもスコアは変わりません。

アイコンフォントの CSS:
Luxeritas で必要最小限の CSS のみ

自分はテーマをカスタマイズしているのでオリジナルを使っています。

ウィジェット用の CSS
それぞれの使っているものに合わせて設定してください。

“Javascript”タブ

jQuery
jQuery の読み込み方法:
WordPress 内蔵 jQuery – jQuery と Luxeritas 関連スクリプトを全て結合する ( 高速 / 高安定 )

jQuery-Migrate を読み込む:
チェックなし

jQuery を非同期にする ( 高速化するが注意が必要 ):
自分はチェックをつけました。
もし表示がおかしくなるようであればチェックを外しましょう。

Bootstrap プラグイン
必要ない(読み込まない)

その他の Javascript 設定
“WordPress の絵文字用スクリプトを読み込まないようにする”だけにチェックをつけました。

ここもそれぞれの環境に合わせて設定してください。

“高速化用 htaccess”タブ

これを追記することで圧縮やブラウザキャッシュを有効にしてくれます。
間違えても元の設定を消さないように。

間違って消してしまった人のために自分の設定を載せておきます。(動かない可能性もあります。)

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

その他の対策

JetPackのCSSの無効化

jetpackの機能を使っている場合はやらないほうがいいかもです。
自分はアプリからの投稿と統計しか使わないので。

これをfunctions.phpに追記します。

add_filter( 'jetpack_implode_frontend_css', '__return_false' );

写真の圧縮

EWWW Image Optimizerというプラグインを使います。

プラグインをインストールし、設定->EWWW Image Optimizerの順に進み、設定をします。
注意点として”PNG から JPG への変換を有効にする”にチェックを入れると拡張子まで変更されてしまい、リンクが正しく働きませんでした。

設定が終わったら、メディア->一括最適化に進み、これまでアップロードした写真の変換をします。
これまでに一度も写真をアップロードしていない場合はスキップしていいです。

いらないデータの削除

WP-Optimizeというプラグインを使います。

投稿のリビジョンやごみ箱の中のデータの削除をしてくれます。

必要のないプラグインの停止

これ入れたけど使ってないなーみたいなのは停止したほうが読み込みが早くなる可能性ありです。

まとめ

Luxeritasにたくさんの高速化のための設定があり、これによる効果が一番大きいのではないかと思います。

サイトの読み込みに時間がかかると検索エンジンからの評価が下がる恐れがあるだけではなく、サイトの閲覧者が離脱してしまう恐れもあるのでサイトの読み込み速度には気を配りましょう