Luxeritas初心者用高速化手順【ボタンポチポチするだけバージョン】
どうも。
「サイトの高速化」というのは色んなサイトで度々取り上げられる話題ですが、サイト構築に関しての知識が初心者レベルであればあるほど「訳がわからないよ…」とギブアップしてしまう可能性も跳ね上がっていきます。というか以前は僕自身もそうでしたｗ
そんな状況下でありながら、当ブログでも使用しているテーマ「Luxeritas」では、高速化に関する手順もボタンポチポチしてるだけで「ある程度何とかなる」感が溢れてきます。すごくありがたい話です。
…ですが実際のところは、そんな秀逸なテーマであってもLuxeritasを使用している方のサイトを見てみると、ほとんどデフォルト状態で使っているという方が非常に多いです。なぜだ？ｗ
例えるならばせっかくスマホ持ってるのにEmailと電話にしか使ってない、ってぐらいもったいないこと。「それ以外の使い道はめちゃくちゃありますよ～。」ってなことを言いたいわけですね。声を大にして。
まぁ「高速化なんかいらんわ」って人な場合も無きにしもあらずですが。スピードアップデートが控えている以上対策するに越したことはありません。ブログ収益化を目指すのであれば検索順位上位を目指すことは必須ですので、まずテーマをLuxeritasに変更して頑張ってポチポチしながら高速化してみましょう。
Luxeritas初心者用高速化手順
基本的には管理メニューにある「Luxeritas」項目で全て終わります。
以降、項目毎に現在僕が設定しているおすすめの形を。
まずはカスタマイズ項目から。
管理画面サイドメニューからLuxeritas＞カスタマイズを選択してください。
以下の見出しはタブ毎に切り替えていきますので、タブ名称と記事内容を照らし合わせながら参照ください。
基本的に今回の記事では高速化に関する基本的な設定のみ解説していきます。
圧縮・最適化タブ
HTMLの圧縮
これは「高」でも全然問題無いです。
基本は「圧・即・高！」（圧縮系は即、高で良いの意）
下の項目に移動していきます。
CSSの最適化
開発者の方はこの項目についてはいかなる場合においても必須、とされてます。
一応、仕組みとしては「Luxeritasが構成しているサイトの見た目」と「あなたがカスタマイズした子テーマへの記述」を同じファイルにすることでリクエスト回数を減らしてます。
コンテンツを50回持ってこないとうまく表示されないサイトに対し、コンテンツを20回持ってくるだけで表示出来るサイトを比較すると、当然後者の方が表示速度が早くなることはわかりますよね？
最近のアップデートでデフォルト設定になったらしいので、特別変更することはありませんかね。たぶん。
Javascriptの最適化
子テーマ内にある「luxech.js」に何か記述がある場合は圧縮しておきます。
僕の場合グローバルナビ内の親メニューを無効化するjQueryを記述してますのでここは圧縮を選択しています。
項目下にファイルを入力する欄が3つあるかと思います。
これは、表示速度計測ツール「ページスピードインサイト」で「何かのJSファイルがレンダリングをブロックしてるよ」と言われてるならば、ここでファイル名を指定し圧縮してしまうことも出来る、というものです。条件として子テーマと同じ階層である必要があるようですが。
なのでプラグインのJSファイルを子テーマ直下に移動させて…ってことも出来るんですかね？（知らんけどもｗ）
僕は何も結合させてませんので空白でも問題ありません。
そもそも「luxech.js」に何も記述がない、ということなら「読み込まない」という設定でも問題無しです。
CSSタブ
隣のタブに移動します。
モード選択
「Bootstrap？何それ、おいしいの？」ってな場合はコレでいいですｗ
僕もLuxeritasモードを使っています。
Bootstrapとはフレームワークの名称で、「サイトを作る方法」というニュアンスで大丈夫かと思います。
特別知識がある場合で無ければ、機能を活かすこと無く重くなるだけですのでLuxeritasモードのまま、というのが無難な気がします。
外部CSSの直接出力・他
これはホントにページスピードインサイトでのスコアがめちゃくちゃ上がります。…ので是が非でも。
インライン（※直接テキストとして入力すること）で埋め込んでいるのでキャッシュされなくはなりますが、記述が少ない状態であれば問題ありません。毎回読み込まれるってことになりますからね。
ここにチェックを入れなければ（キャッシュが有効であれば）1ページ読み込まれた後は、ページを移動した際にCSSが再度読み込まれることはなくなります。ちょっとした容量の節約にはなります。
この状態が有効なのは、ユーザーのページ遷移が多いことが前提です。
例えば記事を複数ページに分けている（ページ遷移しないと内容が閲覧出来ない状態）とか小説系の連載もの（続きが読みたくなるようなサイト）なんかを取り扱ってる場合はチェックを入れないほうが良いかも程度。ただページスピードインサイト等のスコアは下がります。
逆にひとつのお悩みに対し解決策を提示するとか、直帰率（そのページだけ見られてユーザーが離脱する割合）が高いページだとインラインに埋め込んでた方がメリットが高くなります。
注意点として、インラインに埋め込んでいる場合、ページ読み込みにおけるコンテンツの直前でこれらが読み込まれることになるので記述が多くなると（1000行とか）、ページスピードインサイトにおいて確実に「レンダリングをブロックしてる～」という警告が復活します。
これについての対処法は「スクロールせずに見えるような重要なCSS」と「コンテンツの中盤から必要になるCSS」に分けて、「スクロールせずに見えるような重要なCSS」はインラインで埋め込み、「コンテンツの中盤から必要になるCSS」のみを非同期（読み込み時間に影響を与えないようにする。アドセンス広告とかと同じ処理）にさせることで対応出来ますが今回は「ボタンポチるだけ」を記事のテーマとしているので置いときます。
またお時間のある時に詳細を書いてみますが、とりあえずはこの記事にそれっぽいことは書いてます。興味ある人は。
https://ksukelife.com/blog/1346/画像下の項目について
親テーマと子テーマを結合している状態で下の「子テーマを読み込む」というチェックを外すと表示がすごいことになります。この項目は触っちゃダメですｗ
アイコンフォントのCSS
アイコンフォントはこんな感じ。
「記事内とかにはアイコン使わない」「そもそも自分でアイコン付ける方法も知らん」という場合でも読み込んでたほうが良いです。基本的には必須。投稿日とか関連記事の見出しとか…元々Luxeritasで付けられているアイコンも表示されなくなります。
一般的にはFont Awesome5は以前の4と比べるとスピードに難がある、とされてますが5でもそこまで不快に感じるほどの遅さでは無いです。
もし今までバージョン4をご使用されてる場合ならこちらの記事で移行手順を書いておりますので参考に。将来的には5に移行しておいた方が良いかも。
ウィジェット用のCSS
あとは使っていないウィジェットのCSSを読み込ませないようにします。使ってるウィジェットのみチェックを入れていきます。（チェックを残す、といった表現の方が適切かもしれないですね、最初は全部チェック入ってた記憶が。）
僕の場合はウィジェットはそこまで使わずに、グローバルナビの中にほとんどの要素を詰め込んでるのでこんな感じに。
ただ、これらのCSSそのものはそこまで記述が長いわけじゃありませんので、無理して削る必要性は全くありませんのでご安心ください。
チリも積もればって感じですね。
開発者の方もウィジェットは多く使っていらっしゃいますが全然爆速ですよね？ｗ
僕がただ単にウィジェット置いてないだけです。（好み）
もし、使用しているのに「高速化の為に～…」と無理にチェックを外してしまうと表示崩れを引き起こしてしまいます。例えば検索フォームウィジェットなんかが、崩れているのに気付きづらいですねｗ
一例を出してみます。
これが上の状態（カレンダーにチェックを入れてない状態）でカレンダーウィジェットを使用した場合。ユーザーからすれば「なんだこれ？ｗ」ってなりますね。
さきほどの画面に戻って有効化すると、
このような美しいカレンダー表示に変わります。
なので本当に使用してないウィジェットだけチェックを外す、使ってるか使っていないか、イマイチよくわからなかったら別に触らなくても良いです。
表示崩れの方が印象は最悪ですからね。
Javascriptタブ
隣に移動。基本的にはこれが最後です。
JQuery関連
めちゃくちゃ古いブラウザで閲覧される可能性が無いなら、上記設定で良いかと思います。
jQueryを非同期にする項目については初見だと手を出し辛いかも知れませんが、少なくとも現在まで表示不具合等出たことは無いのでご安心ください。
ページ遷移のアニメーションをjQueryを使ったプラグイン等で入れてる場合は不具合起きそうと予測出来ますが…ｗ
とりあえずはスクロール無しで目に入る位置なりタイミングなりで作動させたいjQueryがある場合じゃなければ非同期で良いです。
Bootstrap＆その他
あとは使わないものは読み込ませないだけです。
「Bootstrap？Embed？なにそｒ（ｒｙ」という場合は読み込まない。
絵文字とか子テーマ「luxech.js」も必要なければ読み込まなくてもおｋ。
Embedとは、お調べしましたがWordPress内蔵のブログカード的なものですね。←使ったこと無いｗ
ブログカード機能はLuxeritasにも付いているのでそっち使えば良いじゃない、という場合は読み込まなくても良いです。
その他タブ
コレに関して、体感速度が上がる、となっていますが実際に上がるのはキャッシュ系プラグイン等を使っていない場合のみです。
プラグインのキャッシュ機能やサーバーのキャッシュ機能を有効にしている場合は外しておいた方が良いです。
正常にキャッシュされなくなりますので逆効果ですね。
何もそういったキャッシュ機能を使っていない場合のみ、チェックを付けておいた方がいい感じですね。
仕上げに高速化.htaccess
最後に管理機能項目からこちらに移動して…。
これを「.htaccess」というファイルに追記して完了となります。
長いですけどこれを全文コピーして、FTPツール等で「.htaccess」ファイルに貼り付けます。
ロリポップなら管理画面＞サーバーの管理・設定項目＞ロリポップ！FTPから編集できます。
うちのサーバーはそんなもん無いよ、という場合はこちらのサイトさんがかなり丁寧に解説されています。非常に参考になるかと思います。
https://martto.net/luxeritas-theme/customize/15014/※上記全く関係無い（自分が読ませて頂いてた記事）ページのURLになってました。申し訳ありませんｗ
.htaccessファイルの場所は、「WP-admin」「WP-content」「WP-includes」というディレクトリ（フォルダっぽいやつ）が上から順に並んでいるかと思いますが、そのすぐ下にあるファイルが「.htaccess」となります。まぁすぐわかります。
全文コピーしたものを一番下にペーストすると良いだけですね。
僕自身は一番上に記述してたんですが、さっきのサイトさんで「下に記述する」ってのが書いてありましたので参考にさせていただき計測すると、ちょっとスコアが上がりましたｗパチンコブログも同様に。何か理由があるのかしら…？←無知
編集前に書いてある記述を消してしまうとサイトにアクセス出来なくなったりする可能性がありますので、慎重に行い、保存前の確認も必ず行なってください。
一応ファイルイジる前にバックアップはとっておいたほうが無難です。
長くなりましたが、実際に作業しようとすると20分も要らないかと思います。ある程度FTPツール等に慣れていれば10分掛かりませんｗ
これだけのことですが、表示速度は格段に上がりますので「まだ怖いから触っていない」という場合にはぜひとも。