たった1分で劇的に改善!ページスピード高速化の方法

たった1分で劇的に改善!ページスピード高速化の方法

小犬がぐんぐんスピードアップして飼い主を引っ張っている画像

 

「ぐんぐん加速します・・」

 

 

コピーして貼り付けるだけでページスピードが格段にアップする方法をご紹介します。作業だけなら1分もあれば完了します。なぜそうするのか理解したい方、あるいは理屈がわからないと怖いと思われる方(それが普通だと思いますが)は、続く記事も読んでみてください。

 

 

 

簡単!ページスピードアップの方法

 

 

具体的作業内容

 

 

 

結論から言いますと・・

 

あなたのサイトの「.htaccess」に、
下のプログラムをコピーして、そのまま
貼り付けてください。

 

 

※注) お使いのサーバーがApache mod_expires を使えることが前提です。

 

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
</ifModule>

 

 

私が使っているソフト「SIRIUS」の
「.htaccess」に貼り付けをした画像
です↓↓

 

 

siriusの.htaccessにプログラムを貼り付けした画像

 

 

※貼り付けをした際の問題点が
 あります。後で記載してますので
 ご確認ください

 

 

 

プログラム貼り付けの結果

 

 

 

貼り付けをして、アップロードしたところ
ページスピードグレードが、72%→88%に
改善しました。

 

 

※スコアリングはこちらのサイトで確認しましたGTmetrix
ページスピードのスコアを表示した画面
矢印
ページスピードのスコアを表示した画面

 

 

スコアアップもさることながら、
感覚的にも「あっ!速くなってる」
って思えますよ

 

ページスピードアップは検索順位
改善(SEO)にも良い影響があります
ので、ぜひお試しください。

 

 

 

作業内容の理解をする

 

 

 

このページスピードアップの方法は
「google analytics」の「速度の提案」
に記載のある方法です。

 

 

siriusの.htaccessにプログラムを貼り付けした画像

 

 

速度の提案の中に「ブラウザのキャッシュ
を活用する」方法が記載されていて、
それを具体的に示したものが、最初に
ご紹介したプログラムと作業です。

 

 

googledevelopersでブラウザのキャッシュを活用することを指摘されている画面

 

 

改善の提案についての原文です

 

  →ブラウザのキャッシュを活用する

 

 

原文は、正直初心者には難解で
何をしたら良いのか理解しづらい
ものです。

 

要約すると・・

 

 

○ブラウザのキャッシュを活用するとページの表示速度を改善できる。

 

○キャッシュできるファイルの種類は、JS ファイル、CSS ファイル、
 画像ファイルなどです。

 

○一般にHTMLはキャッシュ可能と見なさないようにする

 

○静的なリソースのキャッシュの有効期間は1週間以上にする。

 

○広告やウィジェットの様なサードパーティ リソースは、キャッシュの
 有効期間を1日以上にする

 

○「Cache-Control: max-age」よりも「Expires」の使用を薦める

 

○更新されるファイルを、新たに表示させるには「URL フィンガープリント」
 を使用する

 

 

というようなことが書いてあります。
・・ちょっとよく分からないですよね。

 

ひとつひとつ説明してみます。

 

 

 

「ブラウザのキャッシュを活用する」とは?

 

 

 

<ブラウザのキャッシュとは・・>

 

一度アクセスして表示したサイトのデータを一時的に保管(キャッシュ)しておき、再度同じページにアクセスしたときにキャッシュしたデータを活用して、新たにファイルのダウンロードをしないことで、サイトの表示速度が速くできる仕組みです。

 

 

画像のキャッシュのイメージ図

 

 

通常、ページにアクセスされる
たびにファイルのダウンロードが
発生しますが、

 

サイト運営者が、ファイルの有効
期限を設定することで、キャッシュ
を利用してもらうことができます。

 

設定には、最初に示したプログラムを
「.htaccess」に入力するわけですが、

 

これにはApache モジュール mod_expires
というプログラムを使います。

 

 

1 <ifModule mod_expires.c>
2 ExpiresActive On
3 ExpiresByType image/jpg "access plus 1 weeks"
4 ExpiresByType image/jpeg "access plus 1 weeks"
5 ExpiresByType image/gif "access plus 1 weeks"
6 ExpiresByType image/png "access plus 1 weeks"
7 ExpiresByType image/x-icon "access plus 1 weeks"
8 ExpiresByType text/css "access plus 1 weeks"
9 ExpiresByType text/javascript "access plus 1 weeks"
10ExpiresByType application/x-javascript "access plus 1 weeks"
11ExpiresByType application/javascript "access plus 1 weeks"
12ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
13</ifModule>

 

 

プログラムを分解して説明します

 

 

<1行目と13行目>

<ifModule mod_expires.c>
   
</ifModule>

 

〜の部分に「mod_expires」のプログラムが入りますよという命令です

 

 

<2行目>

ExpiresActive On

 

ExpiresActive On|Off の使い分けができますが、これから命令文を打つので「on」を入力すると覚えておけばいいと思います

 

 

<3行目から12行目>

ExpiresByType image/jpg "access plus 1 weeks"

 

ExpiresByTypeの部分は、2タイプの命令文を入力できます。ここではExpiresByType(ファイルタイプ別に指定)する方式を説明します。

 

ちなみにExpiresDefaultという命令では、ファイル形式の指定はなく、全てのファイルに適用する命令文になります。

 

imageの部分にはファイルの種類(imageなら「画像ファイル」)が入ります。
「image」の他、「text」「application」などが入力できます。

 

jpgの部分には、拡張子の種類を記載します。

 

accessの部分には、「now」「modification」を入れることができます。
 ・「access」・・アクセスしてからの時間を指定する
 ・「now」・・「access」とほぼ同じ
 ・「modification」・・ファイルの更新日時から時間を指定する

 

plusは省略可能です。

 

を入力した部分には整数値を入力します

 

weeksの部分には、期間を表す次のものが入力可能です
・years
・months
・weeks
・days
・hours
・minutes
・seconds

 

<例>
・アクセスしてからpngファイルを3ヶ月キャッシュする場合
ExpiresByType image/png "access 3 months"

 

 

 

キャッシュの期間について

 

 

 

○静的なリソースのキャッシュの有効期間は1週間以上にする。

 

○広告やウィジェットの様なサードパーティ リソースは、キャッシュの
 有効期間を1日以上にする

 

 

これは、ひとつの期間の目安ですが・・

 

キャッシュを使用する際の問題点として
更新が反映されないことがあげられます

 

あまり長い期間を設定するとファイルの
更新をした際にも、ユーザーはキャッシュ
されたファイルを見ることになりますので、
更新されてもキャッシュ期限到来まで、
古いものしか見ることができません。

 

ですので、あまり長い期間設定は問題
が多いです。

 

 

 

URLフィンガープリントの利用

 

 

 

ひとまずページスピードの高速化は
キャッシュの期限を設定することで
できている状態ですが・・

 

ファイルの更新時に、キャッシュが更新
されないという問題を解決するために、
「URLフィンガープリント」の利用が
googleより提案されています。

 

フィンガープリントは和訳すると「指紋」
のことです。複雑なコードが指紋と同じ
ように、違いを見分ける働きをします。

 

ハッシュ値と呼ばれる16進数のコードを
ファイルの前に更新のたびに入れ込む
ことで、別のファイルとしてキャッシュして
もらうという方法です。

 

URLフィンガープリントを使うためには
どうすればよいのかいろいろ調べましたが

 

ようやくたどり着いたのが、
「Ruby on Rails の『Asset Pipeline』
でした。

 

 

 

Ruby on Rails Asset Pipeline

 

 

 

Asset PipelineはRuby on Railsの
機能の一つで本当にいろいろなことが
できます。

 

ただ、いろいろできすぎるので解説は
別のサイトを紹介しますので参考に
していただければと思います。

 

Asset Pipelineだけでも詳しい記事が
たくさんありました。

 

  →アセットパイプライン(Asset Pipeline)in Ruby on Rails
  →5分でわかる!? アセットパイプライン(Assets Pipeline)
  →アセットパイプライン

 

システムに携われている方々が書かれている
内容なので、中身はかなり難解です。

 

 

Asset Pipelineでは主に次のことが
できるようです。

 

○複数の JavaScript と CSS の連結
○JavaScript と CSS の圧縮
○アセットファイル名にハッシュ値(MD5)を付加 ・・など

 

 

コマンドプロンプトの画像

 

コマンドプロンプト↑で動かすソフトです。

 

 

windowsで導入することができるか心配
しましたが、とても丁寧に導入の解説を
してあるサイトがありましたので、全面的に
その通りダウンロードとインストールができました。

 

Ruby on Rails with OIAX

 

 

命令を入れると機嫌よく動いてくれています
ので、うまくインストールできたと思います。

 

app/assetsにフォルダを設置しました

 

 

ファイルの配置

 

 

あと一息だけど、この先がどうしてもわからない・・

 

 

もし教えていただけるなら、どなたか
お知恵を貸してください。
お願い致します。

 

  ※お問い合わせフォームからお願いします
     →お問いあわせ

 

 

 

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

 

よく読まれる関連ページ

絶対に間違いのないSEO最新マニュアルへのリンク画像

絶対に間違いのないSEO最新マニュアル

3秒でチェック!!形式的SEO対策をあなたにこっそり教えますへのリンク画像

3秒でチェック!!形式的SEO対策をあなたにこっそり教えます

全13工程でサイト改善!「検索エンジン最適化スターターガイド」へのリンク画像

全13工程でサイト改善!「検索エンジン最適化スターターガイド」

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)うへのリンク画像

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う

 

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



たった1分で劇的に改善!ページスピード高速化の方法関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
Googleが伝える、適切な「alt属性の入力」のススメ
あなたは外部Javascriptを利用する目的を知っていますか?
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
パンくずリストをリッチスニペットで表現してみた!
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
SEOに効果あり!404エラーページのカスタマイズ
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
3行入力するだけ!誰でもできる圧縮によるサイト高速化
もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ