相互リンク詳細へ

Luxeritasルクセリタスの高速化設定方法と.htaccessへの追記方法

2019-04-25使い方高速化

 

とにかくスピードが凄いルクセリタスですが、設定をしていなかったり、余計なプラグインを入れて重複していたりすると台無しです!

高速化に重要な項目

  • 画像遅延読み込み(LazyRoad)
  • ソースコード圧縮・最適化
  • キャッシュ利用

通常なら色々なプラグインが必要ですが、ルクセリタスには上記すべての機能があります。

 

そこで、高速化の為の設定方法を解説していきます。公式サイト推奨の画像圧縮プラグインもひとつ使います。

独自に何かをするのではなく、ルクセリタスの機能での推奨設定の方法になっていますので、とりあえず何もしていないのであれば、すべてこの通りにしておく事をお勧めします。

 

一般的な高速化については以下も参考にして下さい。

 

ルクセリタスのその他初期設定については以下をご覧ください。

 

必要なもの

 

  • FTPクライアント
  • EWWW Image Optimizerプラグイン

 

ルクセリタス機能

 

Lazy Load(画像の遅延読み込み)

ページの読み込みの際に、今表示している画面外の画像読み込みを遅延させる事で、表示速度を速めます。

つまり、一度にページ内すべての画像を読み込むと時間がかかる事がある為、見えている画面より下にある画像は、最初に読み込まず、スクロールしていく都度、画像が読み込まれるようにする機能です。

 

 外観→カスタマイズ→Lazy Load(画像の遅延読み込み)
  • サムネイル、投稿コンテンツ、サイドバー、フッター、GravatarのLazyLoad有効・無効
  • エフェクト効果(フェードインorエフェクトなし)

6626_04

上記、必要な項目にチェックを入れるだけでLazyRoadの設定は完了です。

 

高速化一括設定

「Luxeritas」→「高速化一括設定」

5892_14

 

 「推奨設定」を押して保存します。

5892_15

 

Ver3.7.0~「より高速」ボタンが追加されています。

以下、開発者るなさんのブログより引用

これ(より高速)に設定すると、ブロックライブラリと Font Awesome が非同期になる。

ただし、「推奨設定」と「より高速」では、どちらが速いかは設定の組み合わせや環境による

例えば、Font Awesome の CSS を「オリジナル」に設定した場合は、非同期の方が速いけど「Luxeritas 最小」に設定した場合は、同期の方が速い。

 

 

初期値と推奨設定の違い

以下を参考に、独自の設定も可能です。

また、「推奨設定」「初期設定」のボタンを押すことで、以下の通りに復元可能です。

 

初期設定 推奨設定
圧縮・最適化 HTML圧縮率 圧縮率・低 圧縮率・低
子テーマCSS圧縮 親子CSS結合 親子CSS結合
子テーマJavascript圧縮 圧縮しない 圧縮する
CSS テーマの CSS を HTML に埋め込む
WordPressのブロックライブラリ用 CSS CSSをHTMLに埋め込む CSSをHTMLに埋め込む
Javascript jQuery の読み込み方法 jQuery v3(おすすめ) jQuery v3(おすすめ)
 jQuery を非同期にする
Lazy Load 各種サムネイル画像
投稿コンテンツ
サイドバー
フッター
Gravatar
その他 バッファリングの逐次出力を有効にする
SNS カウントキャッシュ キャッシュする
キャッシュ再構築 10分 1時間

 

 

高速化用.htaccess

FTPでダウンロード

FTP操作がわからない、またはクライアントがない方は以下をご覧ください。

 

サーバーによっては、コントロールパネル等から「.htaccessファイル」を直接編集可能ですが、その際にもFTPでダウンロードしてバックアップを取っておく事をお勧めします。

レンタルサーバーでの.htaccess編集については以下にヘルプがあります。
エックスサーバー
さくらレンタルサーバー
ロリポップ

 

 FTPクライアントで、「.htaccess」をダウンロードします。

「.htaccess」ファイルは、ワードプレスがインストールされているディレクトリにあります。

エックスサーバーであれば「public_html」の直下、「wp-content」や「wp-includes」ディレクトリがある場所です。

6626_02

 

 ダウンロードしたファイルをコピーしバックアップを置いておきます。

 

 

.htaccessファイルに追記

「高速化一括設定」の「高速化用.htaccess」タブを開きます。

6626_01

 

 ここに記載されている以下を、「.htaccess」に追記します。

※現バージョン3.5.9でのものになります。念のため、以下からではなくご自身のルクセリタスの対応画面からコピーして下さい。

 

.htaccessファイルには既に何かしら記述があると思いますが、それを消さないようにご注意下さい。必ず、最後に追記!

 

Ver.3.6.9で「.htaccess のサンプルにJSON の圧縮・キャッシュの設定項目追加」があったので、新しいものと過去のもの、2種類掲載しておきます。

 

Ver.3.6.9~

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
	Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
	Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
	AddType text/cache-manifest .appcache
	AddType image/x-icon .ico
	AddType image/svg+xml .svg
	AddType application/x-font-ttf .ttf
	AddType application/x-font-woff .woff
	AddType application/x-font-woff2 .woff2
	AddType application/x-font-opentype .otf
	AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定 (画像とフォントをキャッシュ)
<IfModule mod_headers.c>
	<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
		Header set Cache-Control "max-age=604800, public"
	</FilesMatch>
	# プロキシサーバーが間違ったコンテンツを配布しないようにする
	Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
	ExpiresActive On

	# キャッシュ初期化 (1秒に設定)
	ExpiresDefault "access plus 1 seconds"

	# MIME Type ごとの設定
	ExpiresByType text/css "access plus 1 weeks"
	ExpiresByType text/js "access plus 1 weeks"
	ExpiresByType text/javascript "access plus 1 weeks"
	ExpiresByType image/gif "access plus 1 weeks"
	ExpiresByType image/jpeg "access plus 1 weeks"
	ExpiresByType image/png "access plus 1 weeks"
	ExpiresByType image/svg+xml "access plus 1 year"
	ExpiresByType application/pdf "access plus 1 weeks"
	ExpiresByType application/json "access plus 1 weeks"
	ExpiresByType application/javascript "access plus 1 weeks"
	ExpiresByType application/x-javascript "access plus 1 weeks"
	ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType application/x-font-woff2 "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
	SetOutputFilter DEFLATE

	# 古いブラウザでは無効
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

	# 画像など圧縮済みのコンテンツは再圧縮しない
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/js
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/json
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/atom_xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-httpd-php
	AddOutputFilterByType DEFLATE application/x-font-ttf
	#AddOutputFilterByType DEFLATE application/x-font-woff
	#AddOutputFilterByType DEFLATE application/x-font-woff2
	AddOutputFilterByType DEFLATE application/x-font-opentype
	#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

 

差異部分は「# MIME Type ごとの設定」に1行追加されている事のみです。

追加されたのは以下の1行。

	ExpiresByType application/json "access plus 1 weeks"

 

一応古いものも掲載。以下は Ver.3.6.8までの内容



# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
AddType text/cache-manifest .appcache
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定 (画像とフォントをキャッシュ)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# プロキシサーバーが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On

# キャッシュ初期化 (1秒に設定)
ExpiresDefault "access plus 1 seconds"

# MIME Type ごとの設定
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

# 古いブラウザでは無効
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

# 画像など圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
#AddOutputFilterByType DEFLATE application/x-font-woff
#AddOutputFilterByType DEFLATE application/x-font-woff2
AddOutputFilterByType DEFLATE application/x-font-opentype
#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

 

FTPでアップロード

 

 追記したファイルを保存し、サーバーへアップロード上書きします。

 

以上で完了です。

 

万が一、何かしらの不具合があった場合は、コピーしておいた「.htaccess」ファイルのバックアップを再度FTPで上書きアップロードすれば元に戻せます。

 

 

画像圧縮

 

前提

大きな画像のまま使っても見た目には縮小されているので気にならないかもしれませんが、読み込みに何倍も通信量がかかり、ユーザビリティはもちろん、SEO的にもマイナスですので、スマホ撮影画像などは縮小してからアップロードする事も重要です。

以下も参考にして下さい。

アップロード前にサイズダウン

 

画像圧縮プラグイン

画像の圧縮には、以下のプラグインを利用します。

EWWW Image Optimizer

 

メディアファイルをアップロードする際に、自動で圧縮してくれるプラグインで、既存のメディアファイルの一括圧縮も可能です。

 

 プラグインの新規追加から検索し、インストール・有効化します。

 

wp_image_optimizer_01

 

設定

設定は1か所にチェックを入れるだけですので、簡単に説明します。画面付きで見たい方は以下をご覧ください。

 

Basic(基本設定) なにも変更しません。
デフォルトで「Remove Metadata(メタデータを削除)」にチェックが入っています。
もし入っていなければ入れて下さい。

Convert(変換設定) 1か所チェックします。
「コンバージョンリンクを非表示」 にチェックを入れます。
(画像の拡張子変更を許可しない=画質低下を防ぐ為)

 

 

既存画像をまとめて圧縮

 「メディア」メニューに「一括最適化」が追加されていますのでそれをクリックします。

 

 

 「最適化されていない画像をスキャンする」をクリックします。

 

スキャンが完了すると準備完了画面が出るので
 「最適化を開始」をクリックします。

 

【参考】 通常、数秒程度で完了するかと思いますが、約3万個のメディアファイルがあるサイトでは1時間かかりました。

 

メディア一覧で、詳細表示にすると圧縮されたサイズなども表示されています。

6626_03

 

以上で完了。今後は画像アップロードするたびに自動で圧縮されます。

 

 

ルクセリタスのその他の設定については、以下も参考にして下さい。