The post ブラウザキャッシュを有効にしてサイト表示速度を速める first appeared on Fukuro Press.
]]>
ページの表示速度の高速化はサイトを訪れた読者の離脱率を下げてユーザーエクスペリエンス(UX)を高めるために欠かせません。
またサイトの表示速度を速めることでサーバーの負担減になるので大量のアクセスがあった場合にサーバーの負担を減らしページが表示されないというトラブルも回避しやすくなります。
サイトを高速表示させる方法は色々考えられていますがその中の方法の１つが「ブラウザのキャッシュを活用すること」です。
ここではサイト内で使われているファイルをブラウザにキャッシュを利用して表示速度を速める方法について解説します。
ブラウザのキャッシュとは
キャッシュと言っていますが現金を表す「cash」ではなくブラウザの場合は隠し場所を表す「cache」を指しています。
このキャッシュ(cache)を一言でいうと特定のサイトで使用されているファイルや情報をブラウザ側で保存して次回アクセス時に高速表示させるための機能のことです。
ブラウザ側で保存されるキャッシュファイルには主に次の種類があります。
- png、jpeg、gifなどの画像ファイル
- css・js(javascript)ファイル
- その他色々...
これらのファイルがページのアクセス時にキャッシュされます。
このブラウザのキャッシュを利用しない場合、次のようにサイトのアクセス時に毎回ブラウザはサーバーまで必要なファイルを全て取りに行かなくてはならず時間がかかります。
一方ブラウザのキャッシュを利用した場合は次のように画像やCSS・JSファイルは既にキャッシュ済みでサーバーへのアクセスは最低限で済ませることができるのでサイト表示速度の高速化につながります。
これがブラウザのキャッシュの仕組みです。
画像やCSS・JSファイルは更新がなければ毎回サーバーにアクセスして取りに行くのは時間の無駄でしかありません。
ただしこのキャッシュファイルには有効期限があってその期限が過ぎると自動的に破棄されてまたサーバーからファイルを取りに行かなくてはならなくなります。
そこでそのキャッシュの有効期限を長くして最大限に活用しようというのが次に紹介するキャッシュの設定方法です。
キャッシュの設定方法
では次にブラウザで自分のサイトで使っているファイルのキャッシュの仕方を設定する方法について紹介します。
キャッシュの設定を行うのに必要なのはサーバー側にある「.htaccess」というファイルです。
このファイル内にキャッシュ設定の記述をすることでどの種類のファイルに対してキャッシュの有効期限をどのくらいにするかということを設定することができます。
ただしサイトを構成する重要なファイルなので編集する前に必ずバックアップをとっておき、慎重に作業してください。
ではバックアップが完了したらFTPソフトなどでサーバーにアクセスしてルートディレクトリにある「.htaccess」を開いてください。そこに追加する内容は次の通りです。
# ブラウザキャッシュの設定
<IfModule mod_expires.c>
ExpiresActive On
# 各ファイルごとのキャッシュを MIME Type から設定
ExpiresByType text/html "access plus 1 seconds"
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/svg+xml "access plus 1 months"
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-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>この内容を追加してファイルを保存してください。
またFTPソフトを起動しなくてもレンタルサーバーによってはコントロールパネル上から直接編集できるサービスもあります。
例えばさくらのレンタルサーバ
の場合は次のようにコントロールパネルからファイルマネージャーを使うと次のようにブラウザ上で直接編集可能です。
レンタルサーバーによってはこのようなサービスが利用できることがあるので使える場合はそれを使った方が楽かもしれません。
.htaccessでの記述の解説
上で紹介した.htaccessに追加した記述の中では次のような構文でキャッシュの有効期限を設定しています。
ExpiresByType [MIME Type] "access plus [有効期限]"
上の構文で[MIME Type]には「text/html」や「text/css」、「text/js」などのファイルの種類を表すためのMIME Typeと呼ばれる標準的な名前を指定します。
そして次に[有効期限]には「1 months」などの期間を記述します。期間には「months」の他に「years」「weeks」「days」「hours」「minutes」「seconds」などが使用可能です。
例えば.htaccess上の次の記述の場合、PNG形式の画像ファイルの有効期限を１ヵ月に設定するという命令になります。
ExpiresByType image/png "access plus 1 months"
ここではHTMLとフォント以外の有効期限を１か月にしていますが、画像やCSS・JSファイルの更新頻度が低いならそれ以上の有効期限を設定しても問題ありません。
キャッシュ設定の効果
ページの表示速度をスコア化してくれるサービスの「PageSpeed Insghts」と「GTMetrix」でキャッシュ設定前と後のスコアを比べると次のような結果が出ました。
PageSpeed Insghtsの結果
まず最初はGoogleの「PageSpeed Insights」でのスコアの変化を紹介します。
次の画像がこのサイトのあるページでのキャッシュ設定前のPCとモバイルでのそれぞれのスコアです。
パソコンではスコアは66、スマホなどのモバイルでは57とかなり致命的なスコアが出ていました。
そして次がキャッシュ設定後のPCとモバイルでのスコアです。
パソコンでは 66 ⇒ 78 で14ポイント、モバイルでは 57 ⇒ 62 で5ポイントもスコアが大幅に改善したという結果になりました。
GTMetrix
次は「GTMetrix」での表示速度のスコアの結果です。
まずこのサイトのあるページでのキャッシュ設定前のスコアは次の通りです。
「PageSpeed Score」はDランクで65%という評価が出ていました。
そしてキャッシュ設定後のスコアは次の画像の通りです。
「PageSpeed Score」がCランクで77%という評価に改善されています。
このようにPageSpeed InsightでもGTMetrixでもかなり大幅なスコア改善が見られたのでキャッシュ設定は表示速度の改善にかなり効果があるようです。
WordPress表示速度をさらに早くするには
ここまでで紹介したようにブラウザキャッシュの有効期限の設定はかなり効果があります。
しかしさらにWordPressの表示速度を速めるなら次の方法も効果ありです。
これらの詳しいやり方・設定手順については次の記事でまとめて紹介してあります。
設定も手順通りにやれば全く難しくなく簡単に誰でもできることばかりなので是非試してみてください。
まとめ
ここで紹介した.htaccessにキャッシュ設定をする方法はただキャッシュの有効期限を設定する記述を書けばいいだけなので導入もとても簡単です。
少しでもサイト表示速度は速い方がいいので.htaccessの編集ができるならまず初めに設定しておいた方がいいと思います。
以上ここではサイト内で使われているファイルをブラウザにキャッシュを利用して表示速度を高める方法について解説しました。時間もかからずすぐにできることなので是非試してみてください。
The post ブラウザキャッシュを有効にしてサイト表示速度を速める first appeared on Fukuro Press.
]]>The post WordPressでCSSが反映されないときに確認したい３つのこと first appeared on Fukuro Press.
]]>
WordPressではテーマが使えるから自分でデザインするということはほとんどありません。でも自分でCSSを書いてカスタマイズする方もいるはずです。
そういう時にCSS自体は間違っていないはずなのに正しく表示されない、ということが起こると原因を自力で見つけるのは大変ですよね
そこでWordPressでCSSが効かないときに確認したい３つのことと反映させるための解決策についてまとめました。
CSSが動かない原因と解決策
WordPressでCSSが文法的に間違っていないにもかかわらず効かない原因として考えられるのは次の３つです。
- 編集画面に直接CSSを書いてしまっている
- ブラウザのキャッシュが残っている
- セレクタの優先順位の問題
この３つの原因とスタイルを反映させるための解決策について順に解説します。
１．編集画面にCSSを書いてしまっている
WordPressでCSSが効かない原因として一番多いのがこれ
なぜ編集画面に直接書くと効かなくなってしまうかというと投稿ページのエディタの自動補完機能により余計なタグが入ってしまうからです。
例えば投稿ページの編集画面で「テキスト」タブを開き、次のようにテキストエディタ上でCSSを書いたとしましょう。
この時点でテキストエディタを開いたまま投稿を保存すれば正常にCSSは機能します。
問題なのは次のように「ビジュアル」タブをクリックしてビジュアルエディタを開いた場合
上画像のようにビジュアルエディタを開いた後、もう一度テキストエディタに戻ると自動補完によりstyleタグ内に余計なタグが入ってしまいます。
こういう風に編集画面で直接CSSを記述してしまうとタグ補完が働いてしまうのでスタイルが反映されなくなります。
なのでもし編集画面でCSSを書きたいなら次記事で紹介した「Script n Styles」プラグインを使うのがおススメです。
これを使うとエディタとは切り離してCSSやスクリプトが書けます。
また全てのページ共通でヘッダーなどにCSSを埋め込みたい場合は次記事で紹介した「Simple Custom CSS & JS」プラグインも使いやすいです。
もし編集画面からCSSを埋め込みむなら直接書かず、これらのプラグインを使って埋め込みましょう。
２．ブラウザのキャッシュが残っている
ブラウザでは一度表示したページを次回高速で表示するために次のようなデータがキャッシュとして保存されています。
- 画像ファイル
- 動画ファイル
- .jsや.cssなどの外部ファイル
キャッシュにはcssファイルも含まれているのでもしブラウザがページのキャッシュを保存しているとCSSを変更しても反映されない訳です。
なのでその対処法はブラウザのキャッシュをクリア(削除)すること
Chromeブラウザを使っている場合は次記事で紹介した「Clear Cache」を使うとワンクリックでキャッシュを削除できて便利です。
もしCSSが反映されない場合はまずブラウザのキャッシュを疑ってみましょう。
３．セレクタの優先順位の問題
CSSではセレクタを使ってそれに該当する要素にスタイルを指定できますが、このセレクタには次のような優先順位がありそれがCSSが効かない原因になることがあります。
id・クラスセレクタ > タイプセレクタ
まずセレクタは次のようにid・クラスセレクタとタイプセレクタの２つに分けられます。
- id・クラスセレクタ
idの場合は「#example」、クラスの場合は「.example」で表されるセレクタ
- タイプセレクタ
「h1」、「div」、「span」などの要素そのものを指定するセレクタ
この２つのセレクタの優先順位は「id・クラスセレクタ > タイプセレクタ」となっています。
なのでid・クラスセレクタがタイプセレクタの前にある場合、タイプセレクタに指定したスタイルが反映されないことがCSSの効かない原因になることがあります。
例えば次のようなdiv要素にスタイルを適用する場合を考えてみましょう。
<div class="example">
スタイルが適用される文章
</div>
そしてこのdiv要素に次のようなスタイルを適用します。
div.example{
color: purple;
}
div{
color: blue;
}
この例だとdiv要素のタイプセレクタが指定されて文字色が青色になると思ってしまいますが、実際は次のようにクラスセレクタで指定されたスタイルの紫色の方が優先されます。
idセレクタ > クラスセレクタ
さらにid・クラスセレクタ同士でも優先順位があり、「idセレクタ > クラスセレクタ」という関係になっています。
例えば次のようなidとクラスの両方を持つdiv要素を考えてみます。
<div id="example1" class="example2">
スタイルが適用される文章
</div>
そしてこのdiv要素に対して次のようなCSSを適用します。
#example1{
color: red;
}
.example2{
color: blue;
}
このときクラスセレクタの方が後にありますが、idセレクタの方が優先されるので文字色は次のように赤色になります。
セレクタの優先順位に注意
ここまでで紹介したようにセレクタには次のような優先順位があります。
これらの優先順位を知らないとなぜCSSが効かないのか数時間悩むことになります。
なので「idセレクタ > クラスセレクタ > タイプセレクタ」という優先順位を意識してCSSを書くようにしましょう。
まとめ
CSSが効かない場合に確認した方がいいことは次の３点
- 編集画面に直接CSSを書いてしまっている
- ブラウザのキャッシュが残っている
- セレクタの優先順位の問題
この中でも編集画面に直接CSSを記述してしまうのはWordPress初心者にありがちなミスなので個別ページごとにCSSを書きたいならプラグインを導入しましょう。
またブラウザのキャッシュが残っていてCSSが効かないということも頻繁に起こるのでこまめにブラウザのキャッシュは削除するようにするといいと思います。
以上WordPressでCSSが効かない原因と解決策についてでした。
The post WordPressでCSSが反映されないときに確認したい３つのこと first appeared on Fukuro Press.
]]>