速い! 軽い! 神テーマLuxeritasの紹介と設定

この記事は約7分で読めます。

Luxeritas

本記事は、国産無料WordPressテーマ「Luxeritas」の紹介と設定について記します。
速い、多機能、更新速い。
おまけにBootstrapモードとそうでないモードを使い分けられると言うことなし。
まさに神テーマとしか言いようがありません。
皆様にも是非使っていただきたく、本記事を記します。

Luxeritas(ルクセリタス)とは?

公式ページはこちら。

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ

名前に聞き慣れないことがほとんどだと思います。
それもそのはず。
先月(H28年11月)生まれたばかりのほやほやテーマですから。

作者は「るな」様。
これまでにもWpTHKというテーマを作っていらっしゃいます。

例えて言うなら、

Stinger+Simplicity+Lightning

質問者の写真

なんだ、それ!
 

そんなツッコミが入るかもしれません。
でも、本当にそうなんですもの……。
本当にこれら3つのテーマのいいところをくっつけてまとめた感じです。

よくぞ、ここまでのテーマを作り、しかも無料で配布するなんて。
心底から呆れました(誉め言葉)。

私がテーマを乗りかえたきっかけ

元々はPageSpeed InsightsとGTmetrixのスコア改善を目指して調べ物をしていたときの話。

あちこちで当時私と同じテーマLightningを見かけました。
無料となると選択肢限られるから当然なのですが、なんか変えたくなってしまいまして。
新しいテーマ探しの旅に出ました。
その過程でたまたま出会ったのがLuxeritasです。

Luxeritasの長所

大きくわけて3つあります

1 多機能で定評あるSimplicityに匹敵する多機能

Luxeritasだけで様々なプラグインを不要にします。
SEO関連はまったく要りません。

Luxeritas SEO

Luxeritas SEO2

投稿ページの構成はStingerにならっているようです。
(コメントが一番下にある、SEOを意識した独特の構成)

Simplicityでできることは大体できます。
広告ウィジェットもアドセンスのダブルレクタングル置きに対応(モバイルだと一方を消してくれます)。
現時点で既にAMPにも対応しています(私は使っていませんが)。
内部URLのカード機能とかLINE会話機能はついてませんが、それは自分でコピペすればいいだけ。
ブログカードも実装されました。

難点は……多機能すぎて、どこに何があるかわからなくなることです^^;

2 Bootstrap採用によるデザインカスタマイズの柔軟性

そのままでも洗練してみえます。
ナビやサムネイルなどのホバーアニメーションもつけられています。

例えばこの画像。

ホバーすると、拡大されます。

LuxeritasにはSimplicityみたいなトップページのタイル表示がありませんが、Bootstrapベースのため私でも簡単にレイアウトを組めました。

何をやるにしろ、他のテーマみたいにCSS調整で苦しむことはほとんどありませんでした。

「Bootstrapなんていらない!」という方には、Bootstrapを読み込まないモードも用意されています。
どこまでも至れり尽くせりです。

3 高速化カスタマイズしやすい

Luxeritasは素のままでも高速です。
これは間違いなく言えるのですが、公正な条件でテストしづらいのと結果が安定しないのとで具体的結果は割愛します。

しかし元々高速なのに加えて、他のテーマにはない圧倒的特徴があります。
なんと、

テーマ自体に高速化カスタマイズ機能がついています。

JS・CSの結合、圧縮、インライン化、jQueryの非同期読み込み、etc……
WordPressの高速化・改善化の記事には絶対出てくるAutoptimize すら不要となります。
(手作業が必要になりますが、その分確実です)
実際に私の環境で入れている高速化プラグインは、KUSANAGI付属の「翻訳アクセラレーター」(※)のみです(※001 Prime Strategy Translate Accelerator と同じです)

1で述べた多機能性の延長ではありますが、初心者が最初に触るテーマとしては最高だと思います。

欠点

使っている人がいないため、情報がまったくありません。
だからこそLuxeritasユーザーの輪を広げたいのです^^;

高速化設定例

以下では私のしている設定例を紹介します。
アドセンスとGoogle Analyticsを設置しないならPageSpeed Insightsで100点も可能です。
(ただしサーバーが速いことが前提、ConoHaでKUSANAGIを使うのが私のお薦めです)

htmlの圧縮

そのものズバリの機能があります。
管理画面のサイドバーから「Luxeritas」→「カスタマイズ」→「圧縮・最適化」タブを開きます。

チェックを入れればPageSpeed Insightsの「htmlを縮小する」は合格になります。
圧縮率は「高」で問題ありません。

jQueryの非同期読み込み

javascriptタブを開きます。

両方にチェック。

ただしjQueryの非同期読み込みは、注意書きにある通りプラグインが動かなくなる場合があります。
その場合、どうしても必須でなければプラグインの方を外した方がいいです。
高速化のためにレンダリングブロック解消は必須ですので。

Bootstrapを使うか使わないか&Bootstrap.jsの非同期読み込み

CSSタブを開きます。
よっぽど自分で1からテーマをデザインしたいかデザインに全くこだわらない方以外はBootstrapモードでいいと思います。

javascriptタブを開きます。

ここまで設定があるとは……。
もちろん非同期。
async、deferのいずれでも「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の項目からBootstrap.jsが消えます(優先されるのはasync)。

CSS の内容を HTML に埋め込む

要注意の項目です。

チェックを入れないとLuxeritasのCSS(style.min.css)がレンダリングブロックしてしまいます。
しかしチェックを入れると「表示可能コンテンツの優先順位を決定する」に引っ掛かります。

これはインラインに埋め込む量が多すぎるため。
解消するためには子テーマのstyle.cssからファーストビュー以外に関係ないものを分離し、非同期で読み込みます。
cssを非同期で読み込む方法については次の記事に記しています。

ただ、お使いの環境がHTTP/2に対応しているか否かで、具体的な対処法は異なってきます。
(HTTP/2だと並列してHTTPリクエストを送受信するのでCSSやJSを結合する必要がない)

テーマ付属のCSSの分量を設定する(減らす)

Feedlyなどのアイコンフォントを使う場合は「同期」で。
そうでないと表示が遅れるどころか、表示されない場合があります。

アイコンフォント読み込みは「オリジナル」の方がいいと思います。
最近は皆様使うと思いますし。
(私は本サイトが最小限、ブログサイトがオリジナル)

ウィジェット用のCSSはお好みで。

その他のJavaScript設定

JavaScriptタブを開きます。

「jQueryとjQuery-migrate を結合する」は、お使いの環境にあわせて。
HTTP/2対応なら結合の必要はありません。
HTTP/1.1なら結合してエラーの出ない方で。

他は見ての通りです。

CSSの最適化・JavaScriptの最適化

Luxeritasのキモと呼んでいい機能。

cssは「親と子のcssを圧縮して結合する」、jsは「圧縮する」。
(HTTP/2の場合は、圧縮だけでもいいです)

これで「CSS を縮小する」、「JavaScript を縮小する」がクリアできます。

子テーマのjsを追加する場合は、「.js」を抜いたファイル名を記述すると結合してくれます。
例えばソースコードをハイライトしてくれる「highlight.js」ですと「highlight.min」と記述します。

ただしスクリプトは非同期で読み込む方法もあります。
非同期で読み込む方法は読み込む場所で「async」と書くだけです。
highlight.jsを例にとると、こんな感じです。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/highlight.min.js" async></script>

既に圧縮されている場合はこちらでも大丈夫です。

設定まとめ

以上で、かなりの高速化を図れます。
またPageSpeed Insightsにおけるhtml・js・cssの「ほとんどの」項目はクリアできます。
ほとんどというのは、Luxeritasの設定だけではプラグイン関係のjsとcssのレンダリングブロックがクリアできないからです。
ここがプラグインまで全て結合するAutoptimizeと違う点。
対処法は前掲のcssの非同期化を御参照ください。

まとめ

Luxeritasはまさに神テーマ。
作者のるな様には大感謝です。

皆様も是非お試しくださいませ。
カスタマイズしたい人にもそうでない人にも、きっと期待に応えられるテーマです。