Luxeritasなら簡単にPage Speed Insightsで100点が取れた!

ルクセリタス高速化設定後のPageSpeed Insightsの結果

当サイトは、光速(高速)WordPressテーマLuxeritasを使用していますが、まだ眠った力を発揮すべく、高速化に挑戦してみました。

高速化といっても何から手をつけていいか分からないので、Luxeritas製作者 るなさんのサイトをみながら設定しました。
 

とりあえず、Page Speed Insights以外にもスピードを測るサイトがあるようなので、みなさんが測定しているものを参考にして、

  1. Page Speed Insights
  2. GTmetrix
  3. TestMySite

上記の3つのサイトで測ってみることにしました。

高速化を判断した3つのサイト

1. PageSpeed Insightsは、Googleが運営する「ウェブページのコンテンツを解析し、ページの読み込み時間を改善する方法を提案してくれる」サイトです。

2. GTmetrixは、Googleの提供する「PageSpeed Insightsと、Yahoo!の提供するYSlowを使って同時にサイト・ブログのパフォーマンスを解析し、改善する方法を提案してくれる」サイトです。

3. TestMySiteは、Googleが運営する「モバイルサイトの読み込み速度をテストして、回線速度や他サイトとの比較、改善する方法を提案してくれる」サイトです。

 

簡単に言ってしまうとGTmetrixがより細かいものまで確認できるサイト、TestMySiteはモバイルの速度テストってことになります。

ぶっちゃけページの表示速度って色々な要素があります。

これだけでサイトスピードやページ表示速度を判定するのは難しいのですが、改善すると確実に速くなっていくことは確かなので今回はこの方法でやります。

 

Luxeritasの初期状態だとスピードはいかに・・・??

本当は、初期状態のうちに測っておきたかったのですが・・・

サイト作成後いきなりデザインの変更を初めてしまったので、申し訳ないのですが、完全な初期状態などの点数はわかりません・・・。

 

PageSpeed Insightsだけ最初のほうに覚えて、測った記憶があるのですが、確かモバイルが80点位、PCが70点位だったと思います。

初めにサイトデザインのテストをしようと思い、11記事ほど画像(ファイルサイズは80kb~180kbくらいの物)をいれて作りました。
 

上記の点数は、Luxeritas本体の高速化設定や、画像の圧縮や最適化は全くしてない状態での点数です。

 

Luxeritasの高速化設定

それでは高速化するべく、Luxeritas製作者の、るなさんのサイトをみながらポチポチしていきます。

まずは、WordPressの左側メニューのLuxeritasをポチッ

  圧縮・最適化のタブ

ルクセリタス高速化設定 圧縮・最適化の項目

 

 

HTMLの圧縮率

  • 圧縮率・低 ←高でも良いと思います

CSSの最適化

  • 親と子のCSSを結合して圧縮する

Javascriptの圧縮

  • 必要ない(読み込まない) ←現状必要ないのでこうしてます

 
続いて CSSのタブ

ルクセリタス高速化設定 CSSの項目

 

外部CSSの直接入力

  • テーマの CSS を HTML に埋め込む ( 高速化 ? ) ←※2つをよく見ましょう

アイコンフォントのCSS

アイコンフォント ( Font Awesome ) の読み込み方法

  • 同期 (アイコンフォントが遅延しない) ←非同期のほうがレンダリングが高速みたいですが、自分はこの設定です。

アイコンフォントのCSS

  • Font Awesome オリジナルの CSS ←Font Awesomeを使わない人は、 Luxeritas で必要最小限の CSS のみで良いと思います。

ウィジェット用のCSS

  • いらない物のを外す 

 
続いて Javascriptのタブ

ルクセリタス高速化設定 Javascriptの項目

 

jQuery

  • WordPress内蔵~(高速/高安定)
  •  jQuery を非同期にする ( 高速化するが注意が必要 ) ←黄色のボーダーラインの通りです。

過去にこんなことがあったようなのでチェックを付けられるかたは、理解したうえで行ってください。

以下Luxeritas作者 るなさんのページからの引用です

Luxeritas の公式ページでも

知識がある人以外はチェックを付けない方が無難

と書いているのだが、検証を全く行わずにチェックを付けて Luxeritas 本体にまで及ぶ不具合を発生させちゃってる人を見かけた。

しかも厄介なことに

不具合が出ているにも関わらず不具合に気づいてないらしい

なので、最悪でも Luxeritas 本体には不具合が出ないようにした。
(全プラグインに対応させるのは無理)

引用:https://thk.kanzae.net/dev/wp-themes/luxeritas/t7534/
 

その他の Javascript設定

  •  子テーマの Javascript ( luxech.js ) を読み込まない
  •  WordPress の絵文字用スクリプトを読み込まないようにする
  •  WordPress の Embed 機能を OFF にする

 

お疲れさまでした、以上で本体設定は終わりです(*´▽`*)

 

高速化用 .htaccessに記述を追記

これは、 Gzip 圧縮とブラウザキャッシュを有効にし、ページの表示を高速化します。

.htaccess」 に # ETags(Configure entity tags) を無視する設定~から始まる記述を追記するだけで簡単なので端折りますが、もしファイルの場所が分からないという方がいればコメント下さい。

 

Luxeritas高速化設定後の結果!!

まずは、PageSpeed Insights

モバイル90点 パソコン78点

あれ?・・・速くはなったけど、これがLuxeritasの限界なのか (。´・ω・)?・・・・
何度も測定して、しばし考える・・・・・・・・・・・・・・・・・・

 

最適化についての提案
画像を最適化する
修正方法の提案

あ (;^ω^)・・・画像を最適化するの忘れてた

 

気を取り直して、画像の最適化後

ルクセリタス高速化設定後のPageSpeed Insightsの結果

キターーーーー!! PageSpeed Insights モバイルとPCで100点!Σ(゚Д゚)

100点なんて取ったのいつぶりだろう まさかこんなにあっさり100点が出るとは

 

続いて GTmetrix

ルクセリタス高速化設定後のGTmetrixの結果

GTmetrix PageSpeedとYSlowでAの判定!Σ(゚Д゚)
YSlowの92%に関しては、コンテンツ配信ネットワークに(CDN)を使ってみては?みたいな項目だけ下がってました。

 

続いて TestMySite

ルクセリタス高速化設定後のTest MySiteの結果

TestMySite  2秒 特に良好 (゚Д゚;)
うむ、よくわからんが速いんでしょう、他のサイトとの比較項目などもあります。

 

Luxeritas高速化まとめ

正直、こんなに簡単に高速化できるとは思っていませんでした。

しかもそれでいて、スピード判定は最高レベル。

 

他のWordPressテーマを使ったサイトなどをみると、高速化の為にPageSpeed Insightsで表示された提案箇所とにらめっこしているようです(;^ω^)

どこをいじればいいのか検索して情報を探したりしているようでした。

 

改善方法が分からず、かなり苦戦されてるサイトも見受けられましたが、Luxeritasならめちゃくちゃ簡単に高速化の設定ができました。

 

ちなみにGoogleアドセンス(広告)を導入すると、その部分のキャッシュの時間が短くPageSpeed InsightsやGTmetrixのキャッシュの項目で確実に点が下がります。

 

Googleアドセンスを入れている場合、PageSpeed Insightsでは最高でも99点までしか出ない様です。

色々な方法でどうにか回避して100点を取る方法もあるようですが、今回はそれについては触れません。

 

高速化についてやったことをまとめると

  1. Luxeritas本体の設定 (クリックするだけ)
  2. .htaccess」に作者 るなさんが書いた記述を張り付け
  3. 画像の最適化(圧縮)


 この3つだけです

Luxeritasなら、ほんとに誰でも簡単に高速化の設定ができます。
使えば使うほど、このWordPressテーマLuxeritasの素晴らしさが身に染みて分かってきました。

Luxeritasは、ほんとにすばらしいWordPress高速テーマだと思います。

 

重要な補足

  • キャッシュ系のプラグインを使っていると、設定を変更しても判定結果が変わらなかったりするので使ってる人は一時的にでも切りましょう。

 

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する

 jQuery を非同期にする ( 高速化するが注意が必要 ) ←こやつのチェックをいれると出なくなると思います、ですが説明に書いてある通り一部プラグインに影響がでる可能性があるので、十分に確認が必要です。

 

  • 最後に、画像の最適化についてですが、どうしたらいいか分からない場合
     
     
    PageSpeed Insightsで測定後 一番下の行に

このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます 
 
というのが出てきますので、そこをクリックすると最適化された物がダウンロード出来るようになっています。
 

とても親切ですよね、そのダウンロードした最適化済み画像とWordPressに入れた画像を交換、もしくは上書きすればOKです。

画像のサイズによっては、表示スピードにかなりの影響があるので、高速化したいなら画像の最適化は必須だと思います。

Luxeritas