サイトスピード改善

「静的なアセットと効率的なキャッシュポリシーの配信」を改善する方法

静的なアセットと効率的なキャッシュポリシーの配信を改善する方法

この記事では、エックスサーバーでWordPressサイトを運営している方向けに、.htaccessファイルを編集してページスピードを高速化するための方法をご紹介いたします。

静的なアセットと効率的なキャッシュポリシーの配信

ページスピードインサイトで「静的なアセットと効率的なキャッシュポリシーの配信」の左端に黄色い四角がありませんか?
その場合は、キャッシュの設定に改善の余地があります。

ページスピードインサイトの結果で、「キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できます。」と記載がある通り、再訪問ユーザーに対してのページスピード高速化対策となります。

新規ユーザーに対する対策も大切ですが、Webサイトのページビュー数を着実に伸ばし続けていくためには、再訪問率・再訪問ユーザーの増加数や訪問頻度、平均ページ閲覧数などが重要になるため、再訪問ユーザーに対するページスピード高速化も大変意義があります。

エックスサーバーのサーバーパネルにログインする

まずは、エックスサーバーの「サーバーパネル」にログインし、「ホームページ」の「.htaccess編集」をクリックします。

エックスサーバー サーバーパネル画面

.htaccess設定で記述内容を編集する

「使用前のご注意」タブが表示されますので、内容をよくご確認ください。

「.htaccess編集」タブをクリックし、以下の記述を.htaccessファイルの末尾に追記します。

.htaccess編集の前に、WordPressサイトデータ一式のバックアップをお取りいただき、ご自身の責任においてご編集いただけますようお願いいたします。
# BEGIN ブラウザキャッシュ
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On

# キャッシュ初期化
ExpiresDefault "access plus 1 seconds"

# MIME Typeごとの設定
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/js "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/webp "access plus 1 months"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
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 bMSIEs(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圧縮

(キャッシュに関する設定だけでなく、同じく高速化に有効な、圧縮に関する記述も含まれています。)

念のため、.htaccess編集前の内容も別途テキストエディタやメモ帳に保存しておきましょう。

万一.htaccessファイルの記述がうまく行かないと、Webサイトが表示されないなど重大な影響がありますので、その場合はすぐに編集前の状態に戻せるようご留意いただけましたら幸いです。

.htaccessファイル編集の注意
.htaccess編集で設定を変更する

【補足】エックスサーバーの高速化オプションを設定する

エックスサーバーには独自の高速化オプションがあります。

「静的なアセットと効率的なキャッシュポリシーの配信」とは無関係ですが、エックスサーバーのサーバーパネルにログインしたついでに設定しておきます。

エックスサーバーのサーバーパネル 高速化
Xアクセラレータ
サーバーキャッシュ設定

まとめ

以上で.htaccessファイルの編集、高速化設定は完了です。

Webサイトの表示や動作が問題ないか、必ず確認してください。

キャッシュで問題なく表示されているように見えたものの、時間が経ちキャッシュが無効になると実は不具合が生じていた、ということもまれにあるのでご注意ください。

ページスピードインサイトでスコアの変化を確認してみましょう。

以下はお客様のWebサイトのページスピードインサイトスコア改善事例です。

「次世代フォーマットでの画像の配信」「レンダリングを妨げるリソースの除外」「オフスクリーン画像の遅延読み込み」「静的なアセットと効率的なキャッシュポリシーの配信」「効率的な画像フォーマット」などを一通り改善したところ、90点台に改善できました。

某サーバーでスマホスコア40点→エックスサーバーへ移行しただけで70点に改善→さらに上記の項目を対応し94点に改善、という流れでした。

ページスピードインサイト スマホスコア94点
ページスピードインサイト PCスコア100点

トップページ表示完了までの時間も、1.04s(秒)になりました。
下層ページについては、ソーシャルボタンがある分もう少し遅く1.9秒前後になっていましたが、修正前に比べてよく改善されました。
ページ表示完了までの時間

その他のページスピード改善方法については、以下の記事をご参照ください。

ページスピード高速化に関する記事一覧

フリーランスエージェントおすすめ2選

ITプロパートナーズ … 「週2~3日」「リモート」など魅力的な案件多数。単価も高いので少ない稼働日数でも十分な固定収入を確保。
安心して自分のビジネス収入の柱づくりにも注力できる。セミリタイア生活におすすめのエージェントNo.1!

Midworks(ミッドワークス) … 「フリーランス」と「正社員」の良いとこ取りをした働き方を実現!保障・保険・費用補助・福利厚生が充実。
他のエージェントに類を見ない、安心して独立できる保障の手厚さが特長。週3~5日の常駐案件メイン。

  • この記事を書いた人
ナノ経営研究会

ナノ経営研究会

働く時間を減らしながら豊かになる一人経営マガジン『ナノ経営®』

創業10年。Webコンサルタント。
一人社長セミリタイアコンサルタント®。
ナノインスパイア株式会社 代表取締役。

ビジネス収入や資産収入の柱を構築しながら自由と余裕を手に入れ、自分の人生を100%楽しむ一人経営の知識・情報・考え方などを発信します。

お金・時間・心の余裕に溢れ、いつもワクワク生き生きと輝くセミリタイア一人社長を増やします。

一人でも多くの人とともにより良くなっていけるよう、お互いに成長していけるよう、微力ながら執筆していきます。

24歳 Web制作・コンサル起業 ▶︎ 25歳 株式会社設立 ▶︎ 29歳 5年連続年商アップ、最高年商なのに判断を誤り初の大赤字、しかも多忙すぎて挫折 ▶︎ 事業再生専門・公認会計士の先生の門下生となる ▶︎ 経営・戦略・ビジネスモデル・会計・マーケティング・問題解決などを原理・原則から学び修業 ▶︎ 31歳(2019年) 独自の経営改善により、働く時間は半分以下に↓↓、手元に残るキャッシュは大幅アップ↑↑

-サイトスピード改善