LION BLOG Ver2.0.0を公開!【子テーマのCSSで見出しを上書きしている方へ注意事項あり】

ページの高速表示を意識したテーマ設計

ページの高速表示を意識したテーマ設計

WordPressはキャッシュ系プラグインを活用しないと表示が遅いイメージがありますが、LION BLOGはそういったキャッシュ系プラグインを使用しなくとも、デフォルトの状態でかなり高速にページが表示されます。またカスタマイズ次第ではGoogle PageSpeed Insightsで、モバイル、パソコン共に100のスコアを出すことも可能です。

LION BLOGの高速化設計

Webページの高速表示を意識したLION BLOGの取り組みに関して以下に、その一部を紹介いたします。

NO JavaScript(JavaScriptを使っていません)

LION BLOGのテーマフォルダ内を見ていただければわかりますが、JavaScriptファイルを格納する「js」フォルダがありません。LION BLOGでは、処理が重くなるJavaScriptを利用せず、ビジュアルエフェクトはすべてCSSで対応しています。(下記で紹介するCSSの非同期読み込み機能を有効化すると一行インラインでJavaScriptが記述されます)

CSSの非同期読み込み・読み込み分岐


カスタマイズ画面でCSSの読み込み方法を、非同期読み込みに設定することが可能です。CSSを非同期に読み込むことでレンダリング速度が向上します(すべて非同期に読み込むと、一瞬デザインが崩れて見えます)。非同期読み込みを有効化するとfooterに一行インラインでJavaScriptが記述されます。

また、contents.cssに関しては、固定ページと投稿ページが表示されたときだけ読み込むように条件分岐しています。そのためアーカイブページなどで不要なリクエストの発生を防いでいます。

.htaccess によるブラウザキャッシュと Gzip 圧縮

LION BLOGは、テーマフォルダ内に.htaccessの記述サンプルを付属しています。.htaccessの記述サンプルは下記のような内容となっており、この記述を追記することで、ブラウザキャッシュとGzip圧縮が有効になり、ページの表示速度が大幅に向上します。※必ずバックアップを行ってから作業してください。

# -----------------------------------------------------------------------------
# .htaccessに以下の記述を追加すると高速化。※バックアップを行ってから作業してください。
# -----------------------------------------------------------------------------

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

	# キャッシュ初期化
	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>
# END ブラウザキャッシュ


# BEGIN 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>
# END Gzip圧縮

今より満足できるサイトを作りませんか?

CTA-IMAGE FITでは、誰もが良質なコンテンツをインターネット上に公開できるようにWordPress用無料テーマ「LION」を提供しています。 LIONテーマを使えば、SEO対策はもちろん、ユーザビリティに強化された美しいデザインのWEBサイトを作ることができます。

広告収益や売上に結びつけるためのマーケティング動線が強化されたLIONテーマを利用して、あなたのビジネスにお役立てください。