• ウェブサイトの最適化で表示速度を高速化!「Page Speed」と「YSlow」の設定方法

    

    ウェブサイトの最適化で表示速度を高速化!「Page Speed」と「YSlow」の設定方法

    ウェブサイトの品質を向上させるには良質なコンテンツが必要不可欠ですが、それに加えてウェブサイトの表示速度はなるべく速いほうが良いと言われています。

    事実、ウェブサイトの表示に3秒以上かかるとユーザーのおよそ半分が表示を諦めるという研究結果が報告されており、また、表示速度の増減によってPV数が変化するとの報告もあります。

    この研究結果からも分かるように、ウェブサイトの表示速度の重要性はかなり大きいです。

    表示が遅すぎてユーザーが表示が諦めるということは、本来得られたはずの利益を逃してしまうことを意味しています。

    そのユーザーが数人であればまだ問題は薄いのかもしれませんが、それが数百数千という数になればそのダメージは馬鹿には出来ません。

    ユーザーの快適度と利益を少しでも多く得るためにも、常にサイトスピードは良いものにしておくべきです。

    今回はサイト速度測定サービス「GTmetrix」を元にして、「Page Speed」及び「Yslow」の全項目を一つ一つ説明していきます。



    目次

    最初に


    GTmetrix | Website Speed and Performance Optimization
    http://gtmetrix.com/
    2015-02-14-1

    GTMetrixはカナダ、ブリティッシュコロンビア州に拠点を置くWeb技術会社Gossamer Threadsが開発したサイト表示速度測定サービスです。

    測定はURLを入れるだけという簡単な方法に加えて、測定結果を視覚的に分かりやすく表示してくれるため、全世界で使われている人気ツールの一つとなっています。

    試しに当サイトを調べてみました(最適化済み)が、2015/2/15現在では以下のようになりました。
    スコアはダブルAで、読み込み時間は1.43秒
    2015-02-15-2

    測定URL: http://media-pickup.com/
    Page Speed Grade: 99%(A)
    YSlow Grade: 95%(A)
    Page load time: 1.43s
    Total page size: 179KB
    Total number of requests: 26

    次に昨年当サイトで人気が高い記事だった「米国内で最も年間給与が高い「プログラミング言語 」トップ12」を調べてみます。

    こちらもスコアがダブルAで読み込み時間は1.99秒
    2015-02-15-3


    測定URL: http://media-pickup.com/society/20141123/most-highest-paying-programming-languages/
    Page Speed Grade: 99%(A)
    YSlow Grade: 94%(A)
    Page load time: 1.99s
    Total page size: 213KB
    Total number of requests: 29

    どちらのページも3秒以内に表示することが出来ています。

    当然ですが、Page SpeedとYslowのスコアが高いほど読み込みスピードが高い傾向になっています。

    しかし最も重要なのはスコアではなく、Page load time(ページの読み込み時間)です。

    ただ、スコアが高ければ必然的に読み込み時間も短縮されます。


    ちなみにGTMetrixでは検査後、Page Speed及びYslowに関してのBreakdown(分析)が表示されています。

    Page Speed
    2015-02-15-4

    Yslow
    2015-02-15-5

    Priority(優先度)が高い項目を改善することで、これらスコアは大きく上昇します。

    項目の英語での説明はGTmetrix内の「Recommendations」に記載されています。

    なお、GTMetrix以外のサイト速度測定にはPingdomウェブサイトの表示速度を一瞬で解析してくれるブックマークレットWebPageTestなどがあります。

    この記事ではGTMetrixの全項目を紹介していきます。



    Page Speed


    Page Speedとは、Googleが提供しているPageSpeed Insightsのことを表します。

    こちらでチェックすると、Googleが選択したウェブサイトのPC及びモバイルで閲覧した際のスコアを表示してくれます。

    各項目はhttps://developers.google.com/speed/docs/insights/rulesに記載されています。

    以下でGTMetrixで表示された項目を「Server」「Content」「JS」「CSS」「Image」の順に説明します。


    Server


    Leverage browser caching(ブラウザのキャッシュを活用する)


    サイトを初めて閲覧した際、ブラウザにはそのサイトの一時ファイル(キャッシュ)が蓄えられます。

    このキャッシュを有効活用(時間設定)することで、何度もサイトから同じファイルをダウンロードせずに済むことになるため、結果サイトの高速表示が可能になります。

    サーバーにも負担を与えなくなるので、アクセスの多いサイトならば不可欠でしょう。

    キャッシュの保持設定は「mod_expires」を使用した「Expires」と「mod_headers」を使用した「Cache-Control:max-age」をサーバーの.htaccessに記述することで使用出来ます(レンタルサーバーの一部はmod_expires使用不可)。

    なお、「Expires」はHTTP1.0から対応していますが「Cache-Control:max-age」はHTTP:1.1から対応なので、通常は両方とも使用します。

    ちなみに、どちらも対応している場合は「Cache-Control:max-age」が優先されます。

    以下例。


    <IfModule mod_expires.c>
    # Expires使用例
    ExpiresActive on
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/rss+xml "access plus 2 days"
    ExpiresByType text/html "modification plus 2 hours"
    </IfModule>

    <IfModule mod_headers.c>
    # Cache-Control max-age使用例 1 month
    <Files ~ ".(jpg|jpeg|png|gif|ico)$">
    Header set Cache-Control "max-age=2592000, public">
    </Files>

    # max-age 1 days
    <Files ~ ".(css|js|html|gz)$">
    Header set Cache-Control "max-age=86400, public"
    </Files>
    </IfModule>


    Expiresは時間表記であるのに対し、Cache-Control:max-ageは秒単位で設定されています。

    Expiresの時間表記は「years」「month」「weeks」「days」「hours」「minutes」「seconds」が使用できます。

    ここで注意して欲しいのがキャッシュするファイルで、更新頻度の高いファイル(CSSやphp、html)などのキャッシュはあまりお勧めできません

    キャッシュが切れない限り新しいファイルを取得してくれないため、余りに長い時間キャッシュさせると編集の際に反映がすぐに適用されないので不便になります。

    適宜、自身のサイトで対応するファイルを変えて下さい。


    Enable gzip compression(gzip圧縮を有効化する)


    サイトに多量のコードが含まれていてサイズが膨大な場合、閲覧相手が訪問した際にどうしても送信に時間がかかってしまいます。

    そこで登場するのがgzipという、ウェブサイトの表示を高速化する便利な手段があります。

    gzipはHTTPを圧縮するフォーマットの一つで、圧縮することでウェブサイト閲覧の際に小さくなったファイルを相手に送信出来るため、結果として高速化を図れます。

    以下例。


    # gzip圧縮
    <IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
    SetEnvIfNoCase Request_URI \.(?:gif|jpg|jpeg|png|ico)$ no-gzip dont-vary
    </IfModule>


    圧縮したファイルはブラウザがgzipに対応していると自動で解凍してくれます。

    なお、設定後サイトにgzip圧縮が機能しているかどうかはhttp://www.gidnetwork.com/tools/gzip-test.phpにて確認出来ます。

    ただ「mod_deflate」は一部レンタルサーバーによっては使用できない場合があります。

    その場合、別の方法として「php.ini」で「zlib.output_compression」をONにすることでもgzip圧縮が行われます。

    Wordpressを使用しているならば「WP HTTP Compression」を使用してもOKです。

    また、手動でgzip対応させるには「Lhaplus」などのgzip圧縮出来るツールを利用してgzファイルを自作、サーバーにアップロードして「mod_rewrite」を使います。

    gz化させたファイルをサーバーにアップロード後は「.htaccess」に以下の記述を加えます。


    # gzip
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME}¥.gz -s
    RewriteRule .+ %{REQUEST_URI}.gz
    </IfModule>


    これでgzipに対応したブラウザにはgzファイルを提供し、そうでない場合には元のファイルを渡すようになります。


    Specify a Vary: Accept-Encoding header(レスポンスヘッダーにVary: Accept-Encodingを指定)


    前述したようにgzipは高速化に非常に便利な機能の一つです。

    gzipを使用することでウェブサイト閲覧の際に送信されるファイルを軽量化出来ますが、古いブラウザ等ではgzipに対応していない可能性があり、対応していない状態でgzipを受信した場合は描画が著しく乱れるおそれがあります。

    これを防ぐのが「Vary: Accept-Encoding」で、「.htaccess」に記述を加えると圧縮されたファイル及び未圧縮のファイル両方がキャッシュに保存されます。

    以下例。


    # Vary: Accept-Encoding header
    <IfModule mod_deflate.c>
    Header append Vary Accept-Encoding env=!dont-vary
    </IfModule>


    これで未然に誤送信を防ぐことが出来ます。

    ただしこちらもレンタルサーバーが「mod_deflate」に対応していないと使用できません。


    Specify a cache validator(キャッシュバリデータを指定)


    公開プロキシサーバーは過去にサーバーから取得したキャッシュを一定期間保持しています。

    これを利用することで、サイトを訪問したことのないユーザーにもキャッシュから提供出来ます。

    そのため、サーバーへの余計なアクセスが発生しないため負荷の軽減にも繋がります。

    以下例。方法はLeverage browser caching(ブラウザのキャッシュを活用する)に既に記入しているため、以下の内容は同じです。


    <IfModule mod_headers.c>
    # Cache-Control max-age使用例 1 month
    <Files ~ ".(jpg|jpeg|png|gif|ico)$">
    Header set Cache-Control "max-age=2592000, public">
    </Files>

    # max-age 1 days
    <Files ~ ".(css|js|html|gz)$">
    Header set Cache-Control "max-age=86400, public"
    </Files>
    </IfModule>


    Cache-Control max-ageに「public」要素を付与することで公開プロキシサーバーにもキャッシュされます。

    逆に「private」にするとキャッシュされません。


    Avoid landing page redirects(ランディングページのリダイレクトを避ける)


    指定したウェブページから自動的に他のウェブページに転送するというリダイレクトは基本的に避ける必要があります。

    この項目はリダイレクトしたURLに加えて、リダイレクト後のページでもリダイレクトが起きるということを表します。

    例:「example.com(本来のURL) -> m.example.com(本来のURLからリダイレクトされる) -> m.example.com/home(更にリダイレクト)」

    example.comにアクセスしたはずが、2回もリダイレクトされています。

    リダイレクトは避ける必要があるにも関わらず、複数回リダイレクトが行われることは当然よろしくありません。

    どう見てもページ移動に時間がかかっているのは明らかです。

    リダイレクトさせずに常に正しいURLを設定しておきましょう。


    Enable-Keep-Alive(キープアライブを有効)


    Keep Aliveとはネットワーク上で接続が有効であることを確認するために定期的に行われる通信です。

    条件が満たされるまで接続を維持することで、複数のファイルの送受信を有効化出来ますが、トラフィックが多すぎる場合などはOFFにすると帯域に余裕を持たせることが出来ます。

    なお、Keep Aliveは大抵のレンタルサーバーで有効になっています。

    ただ、自サーバーなどで無効だった場合はApacheの「httpd.conf」に「KeepAlive On」を加えます(通常はデフォルトでONになっています)。

    後はApacheを再起動することでKeep Aliveが有効化されます。



    Content


    Minimize redirects(リダイレクトを最小限に抑える)


    リダイレクトは指定したページから自動的に別のページへと移動するという便利な機能ですが、移動後のページに最初から行けば全く問題ないことから、余計な手間が間に入っていることになります。

    Avoid landing page redirects(ランディングページのリダイレクトを避ける)でも記述しましたが、リダイレクトが発生しないよう常に適切なURLを記述しておく必要があります。


    Remove query strings from static resources(静的リソースからクエリ文字列を削除する)


    ファイルのバージョンなどを表記する際に使用している「?」という文字がURLに付いている場合、一部のブラウザではキャッシュされない不具合があるため、それを削除する必要があります。

    以下は間違った例。jqueryにバージョンと?が記述されています。


    <script type="text/javascript" src="example.com/js/jquery/jquery.js?ver=1.7.1"></script>


    使用しているバージョンが誰にでも分かってしまうので。セキュリティ的にもよくありません。
    これを以下に変更します。


    <script type="text/javascript" src="example.com/js/jquery/jquery.js"></script>


    Wordpressを使用しているなら自動的にバージョンが付与されてしまいますので、以下の記述を「function.php」に加えます。


    // CSSとJavaScriptのバージョン表記を削除
    function remove_cssjs_ver( $src ) {
    if( strpos( $src, '?ver=' ) )
    $src = remove_query_arg( 'ver', $src );
    return $src;
    }
    add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
    add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );


    これでバージョン表示が無くなります。


    Minify HTML(HTMLの縮小化)


    スペースやコメントアウトなどは作業を行う人にとっては便利ですが、ブラウザの読み込みには関係はありません。

    そのため、これら要素を削除するとパフォーマンスが向上します。

    Wordpressを使用しているなら「Autoptimize」というプラグインを使うことでCSS、JavaScript、HTMLを縮小化可能。

    ただし、CSSとJavaScriptを縮小化すると不具合が発生するおそれがあるので注意。


    Avoid bad requests(間違ったリクエストを回避する)


    サイト内でリンク切れとなっているページや画像、CSSにJSは処理を失敗させているだけでなく、ユーザーにも悪い印象を与えます。

    出来る限りリンク切れはゼロにすることをお勧めします。

    Wordpressならば「Broken Link Checker」を使うとリンク切れを自動で発見してくれます。


    Avoid a character set in the meta tag(メタタグ内に文字セットを使用しない)


    ブラウザは描画の際にページの文字情報が設定されていない場合、正確に描画出来ません。

    何もなくても描画は行われますが、外部要素とデフォルトの文字コードが異なる場合は不具合(文字化け等)の原因にもなります。

    そのため、html上には文字セットをヘッダー上に設定しておく必要があります。

    ただし、meta要素のみで文字セットを使うとIE8のバグでサイトの先行読み込みが無効になります。

    http-equiv要素を使うことで、meta要素でもHTTPヘッダとして送信できます。

    以下例。


    <meta http-equiv="content-type" content="text/html; charset=UTF-8">


    これによって適切に文字セットが設定されます。


    Minimize request size(要求サイズを最小化)


    Cookie(クッキー)やhttpリクエストのサイズを可能な限り少なくし(1500byte以内)て下さい。

    画像やJavaScriptはクッキーの必要が無いため、別ドメインに隔離することをおすすめします。




    Serve resources from a consistent URL(一貫性のあるURLからリソースを受け取る)


    リソースを取得する時、検索エンジンは異なるURLで同じリソースを取得出来ます。

    以下はその例。

    「http://example.com/example」

    「http://www.example.com/example」

    どちらも同じリソースですが、wwwの有無の違いだけで検索エンジンは別のページと認識してしまいます。

    これはURLを正規化することで解決します。

    以下例。


    <head>
    <link rel="canonical" href="http://example.com/" />


    head内に「canonical」要素を加えることにより、それぞれのURLが同一であることを認識させます。



    Specify a character set early(早めに文字セットを指定)


    Avoid a character set in the meta tag(メタタグ内に文字セットを使用しない)とやることは一緒ですが、この項目ではより上に文字セットを指定しなければ、それよりも上の要素に文字化けが起こる場合があります。

    以下は間違った例。


    <head>
    <title>これは例です</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">


    この場合、「これは例です」が文字セットよりも上に記述されているため、ブラウザはデフォルトの文字セットを使用することになり、文字化けの原因となります。

    そのため、headの一番上で文字セットを指定しなければなりません。


    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>これは例です</title>


    上記の記述で問題は発生しないようになります。



    CSS


    Minify CSS(CSSの縮小化)


    CSS内に含まれるスペースやコメントアウトを削除することで、CSSのサイズを小さくすることが可能です。

    縮小にはYUI Compressorを使用すると楽に縮小出来ます。

    wordpressの場合は「Autoptimize」を使用してもOK。

    ただし、縮小後の動作に異変が生じる(描画が乱れる)等があるため、必ずバックアップを取って下さい。


    Inline small CSS(小さいCSSをインライン化)


    CSSのような外部ファイルは、読み込みの際に複数の読み込みが発生します。

    もし数行程度の記述が少ないCSSならば、外部ファイルとして読み込むよりもhead内にインライン要素として記述する、あるいは別のCSSと結合させる方が読み込み速度が早くなります。

    以下はインライン時の記述。


    <head>
    <style>
    .example{
    color: red;
    font-size: 12px;
    }

    .example2{
    width: 64px;
    height: 128px;
    }
    </style>


    CSSをインライン化する場合はhead内に入れて下さい。


    Put CSS in the document head(head内にCSSを入れる)


    head内にCSSを入れていないと描画に遅延が発生し、体感速度が低下します。

    以下例。


    <head>
    <link rel="stylesheet" type="text/css" href="css/a.css" />
    <link rel="stylesheet" type="text/css" href="css/b.css" />
    <link rel="stylesheet" type="text/css" href="css/c.css" />


    head内以外にはCSSは入れないようにしておきましょう。


    Avoid CSS @import([email protected])


    [email protected]出来ます。

    [email protected]一部ブラウザでは並行読み込みが中断されるため、読み込み速度が遅延する原因にもなります。

    [email protected]す。



    JavaScript


    Defer parsing of JavaScript(JavaScriptの解析を遅延させる)


    JavaScriptは一度読み込みが開始されると、他要素の読み込みを一旦中断してしまいます。

    ヘッダーにJavaScriptが置かれていた場合、それよりも下にある要素は読み込みが終わるまで一切読み込んでくれない(画面の描画が行われない)ため、体感的にも遅く感じる原因にもなります。

    その対策でJavaScriptをフッターに置くという方法がよく紹介されていますが、これは描画が中断されないことによって体感的に早く感じるだけで実際のページ読み込み時間は早くなっていません(行う価値が無い訳ではない)。

    読み込み時間を上昇させるには、JavaScriptを非同期か遅延読み込みなど、他の読み込みを妨げないようにする必要があります。

    以下例。


    <script async src="//example.com/js/a.js"></script>


    async」を付けることでその要素は非同期となります。

    ただし、Jqueryなどは非同期にすると正しく動作しないことが多く、その他にも動作しないJavaScriptはあります。

    速度優先or必要ではないと感じたならば削除した方が楽です。

    似た要素に「Defer」というものがありますが、これはページの読み込み完了後に読み込みを開始させるというものです。

    なお、この項目はGoogleAdsenseなどのスクリプトを多用する広告を使用している場合、よくマイナス評価となっています。


    Minify JavaScript(JavaScriptの縮小化)


    方法はMinify CSS(CSSの縮小化)と同じ。

    YUI Compressorを使うことで縮小化出来ます。

    Wordpressであれば「Autoptimize」でも縮小可能。

    ただし、不具合が起きる場合があります。


    Inline small JavaScript(小さいJavaScriptをインライン化)


    方法はInline small CSS(小さいCSSをインライン化)と同じ。

    JavaScriptは他要素の読み込み妨害を行うため、body要素の最後に置く、あるいはDefer parsing of JavaScript(JavaScriptの解析を遅延させる)の項目のように「async」を付けて非同期にする必要があります。

    以下はbodyの最後にインライン化したJavaScript。


    <script type="text/javascript">
    <!--
    document.write("Hello World!");
    //-->
    </script>
    </body>


    ただし、インライン化する時にそのJavaScriptに依存しているものがあった場合、順が入れ替わると不具合が生じる場合があるので注意です。


    Prefer asynchronous resources(非同期リソースを使う)


    行う作業はDefer parsing of JavaScript(JavaScriptの解析を遅延させる)と同じです。

    Javascriptを非同期(async)させることで、描画の遅延を防止します。


    Optimize the order of styles and scripts(スタイルシートとスクリプトの順序を最適化)


    Defer parsing of JavaScript(Javascriptの解析を遅延させる)でも説明したように、JavaScriptは他の要素の読み込みを中断させます。

    そしてCSSは複数読み込み可能ですが、間にJavaScriptが入った場合、個別にまた読み込みをしなければなりません。

    そのため、CSSは一番上にまとめ、JavaScriptはそれよりも下となるようにしておきましょう。

    以下例。


    <link rel="stylesheet" type="text/css" href="css/a.css" />
    <link rel="stylesheet" type="text/css" href="css/b.css" />
    <link rel="stylesheet" type="text/css" href="css/c.css" />
    <script src="d.js"></script>
    <script src="e.js"></script>


    Inline small JavaScript(小さいJavaScriptをインライン化)でも言ったように、ここで注意して欲しいのがJavaScriptの読み込み順で、使用しているJavaScript同士が依存している場合、順序を変えることで不具合が発生することがあります。



    Image


    Specify image dimensions(画像のサイズを指定)


    画像に高さや幅が指定されていない場合、ブラウザが自動的に画像の高さと幅を計算して描画を行います。

    最初からすべての画像の幅と高さを指定することで、ブラウザが余計な作業を行わずに済むので描画スピードが向上します。

    以下例。


    <img src="http://example.com/a.png" width="100" height="100">


    要素にwidthとheightのサイズを加えるだけで完了です。


    Optimize images(画像の最適化)


    画像はウェブサイトに彩りを加えますが、あればあるほどページ読み込み時間に負荷がかかります(特に回線が貧弱なモバイル)。

    この時、少しでもサイズを抑えることで負荷は軽減します。

    しかし、圧縮した場合は当然画質が落ちてしまいます。

    画質は落としたくない人のためにGoogleはロスレス圧縮勧めており、jpg用にjpegoptim、png用にoptipngなどの使用を推奨しています。

    これらを使うことで画像を劣化させずに容量を削る事が可能です。

    Wordpressを使用しているなら「EWWW Image Optimizer」がロスレス圧縮に対応しているので便利です(レンタルサーバーによっては使用不可)。


    Combine images using CSS sprites(CSSスプライトを使用して画像を結合)


    画像一つ読み込むにも複数のレスポンスが発生します。

    メニューのアイコンのように、更新頻度が少なくてファイルサイズが小さいファイルならば、結合して一つのファイルにまとめ(CSSスプライト)た方がレスポンスの回数も少なくて済みます。

    当サイトでも小さいアイコンは結合しています。

    icon
    これを作成しなければならないのですが、自作するには厄介です。

    ここで登場するのがCSS Sprite Generatorです。

    ここでzipファイルにまとめたアイコン等をアップロードすることで、自動的に一つのファイルとしてまとめてくれます(表示用のCSSも表示してくれる)。

    結合することでレスポンスを最適化出来ますが、結合していることから変更作業に手間がかかるので注意が必要です。


    Serve scaled images(正しくスケーリングされた画像を使用)


    必要以上に大きいサイズの画像は通常ファイルサイズが大きく、ダウンロードに時間がかかってしまいます。

    そのため、大きい画像はCSS等で縮小化せずに初めから適切なサイズの画像を使うべきです。




    Yslow


    Yslowとは、Yahooが提供しているExceptional Performance(優れたパフォーマンス)ルールのことです。

    YslowのチェックはFirefoxアドオンのFirebugを入れることで使うことが出来ます。

    以下でPage Speedと同じく「Server」「Content」「CSS」「JavaScript」「Image」そして「Cookie」の順に説明します。


    Server


    Add Expires headers(Expiresヘッダーを追加)


    「mod_expires」を使用したキャッシュ方法を用いてブラウザにキャッシュさせます。

    Page SpeedのLeverage browser caching(ブラウザのキャッシュを活用する)とやり方は同じです。

    「mod_expires」が使用できないレンタルサーバーは残念ながらこのキャッシュ方法が使えません。


    <IfModule mod_expires.c>
    # Expires使用例
    ExpiresActive on
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/rss+xml "access plus 2 days"
    ExpiresByType text/html "modification plus 2 hours"
    </IfModule>


    これでそれぞれのファイルがキャッシュされます。

    基本はLeverage browser caching(ブラウザのキャッシュを活用する)の方法を使ったほうが得です。


    Compress components with gzip(コンポーネントをgzipで圧縮)


    Enable gzip compression(gzip圧縮を有効化する)と同じです。

    ただし、こちらはPage Speedよりもより厳しい設定らしく、圧縮出来ていないファイルが数個でもあると結構なマイナスポイントになっています。

    ソーシャルボタンや広告のように自サイト外のファイルを多用していると、一気に低いスコアになってしまいます。


    Use a Content Delivery Network(コンテンツデリバリネットワークを使用)


    この項目は特に重要です。

    コンテンツデリバリネットワークとは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことを言います。

    CDNは対象となるサイトの一部コンテンツ(画像やCSS、JavaScript等)を最適化(キャッシュ等)し、訪問者はCDNサーバー経由でそのデータを取得します。

    それにより、アクセスが大量に来てもサイズの大きいファイルは自サイトからではなく、CDNサーバー経由で送信されるので負荷の分散が可能となります。

    CDNを提供しているサービス会社は多いですが、特にCloudFlare知名度が非常に高いです(規模が大きいCDNであればAkamaiやAmazonのCloud Frontなど)。

    ちなみに、CloudFlareは今年の10月から全ユーザーにSSL接続(通信暗号化)を提供し始めており、CloudFlareを使うと誰でも簡単に最新の暗号化技術を実装可能(ただし完全なSSLではない)です。

    それに加えて、CloudFlareはGoogleが提唱したサイト表示高速化のための通信プロトコルの「SPDY」にも対応しています。

    大抵のCDNサービスはファイルをgzip化やキャッシュ化していることをはじめ、様々な軽量化を施しているため、自サイトにCDNを使うだけで大きなスコア改善にも繋がります。

    しかしデメリットがあり、CDNのサーバーがダウンした場合は自サイトを閲覧出来ない状態になる場合があります。

    と言っても頻繁にサーバーダウンすることはないため、大量のアクセスを捌くには非常に有用な手段の一つです。

    CDNの導入を考えているならば、以下の記事も合わせてお読み下さい。

    サイトの読み込みを超高速化! SSLも無料で使える効果絶大のCDN「CloudFlare(クラウドフレア)」
    https://media-pickup.com/tool/20141217/free-upgrade-website-performance-cdn-cloud-flare/
    2014-12-17-33


    Configure entity tags (ETags)(エンティティタグを設定)


    Entity Tagsとは、ブラウザがファイルの同一性を認識するためのタグです。

    スマートフォンとPCでサイト表示を分けている場合は「.htaccess」に「mod_headers」を使用して「FileETag MTime Size」を追加します。


    #ETag
    <IfModule mod_headers.c>
    FileETag MTime Size
    </IfModule>


    これでMTime(修正時刻)とSize(サイズ)で認識することが可能となります。

    特にスマートフォンとPCでサイトを分けていないのならば、同じく「.htaccess」に「mod_headers」を使用して「FileETag None」を追加します。


    #ETag
    <IfModule mod_headers.c>
    FileETag None
    </IfModule>


    これで全てのファイルを同一として認識します。

    より詳細に分類するのならば、以下の方法を用います。


    <IfModule mod_headers.c>
    <Files ~ "\.(css|js|html)$">
    FileETag MTime Size
    </Files>

    <Files ~ "\.(gif|jpg|jpeg|png)$">
    FileETag None
    </Files>
    </IfModule>


    CSS、JavaScript、htmlはそれぞれ分類されますが、画像は変化の必要が無いため同一化されています。



    Content


    Make fewer HTTP requests(HTTPリクエストを抑える)


    CSSやJavaScriptなど、外部ファイルへのアクセスを出来るだけ少なくしましょう。

    HTTPリクエストが多いということは、それだけ問い合わせに時間がかかっていることなので、複数のファイルを一つにまとめるなどをすると改善します。


    Reduce DNS lookups(DNSルックアップを減らす)


    ホスト名とIPアドレスを関連付けるためにDomain Name System(DNS)lookup(名前解決)という作業が行われます。

    DNS lookupを行っている間はそのホスト名からはダウンロードが始まりません。

    「dns-prefetch(DNSの事前読み込み)」を使用するとDNS lookupの手間が省けるため、それぞれをhead内に追加すると速度の改善に繋がります(HTTPSページはprefetch不可)。

    以下例。


    <head>

    <link rel="dns-prefetch" href="//www.google.com/" />
    <link rel="dns-prefetch" href="//pagead2.googlesyndication.com/" />
    <link rel="dns-prefetch" href="//www.google-analytics.com/" />
    <link rel="dns-prefetch" href="//apis.google.com/" />
    <link rel="dns-prefetch" href="//www.gstatic.com/" />
    <link rel="dns-prefetch" href="//googleads.g.doubleclick.net/" />
    <link rel="dns-prefetch" href="//accounts.google.com/" />
    <link rel="dns-prefetch" href="//oauth.googleusercontent.com/" />
    <link rel="dns-prefetch" href="//ssl.gstatic.com/" />


    hrefに関しては「//」ではなくて「http://」でもOKです。

    これで以上に関してはPrefetchが完了します。

    ソーシャルツールや広告の使用が多いと追加が大変ですが、その分速度の改善に繋がります。

    ブラウザのGoogleChromeはこのDNS-Prefetchの最適化を行っています

    なお、mozillaでも同様の方法を説明しています。

    ただし、これらは設定してもGTMetrix内では反映されない場合があります。


    Avoid URL redirects(URLリダイレクトを避ける)


    Minimize redirects(リダイレクトを最小限に抑える)と同じです。

    リダイレクトは余分な通信を挟むため、なるべく使用すべきではありません。


    Reduce the number of DOM elements(DOM要素の数を減らす)


    DOM(Document Object Model)とは、各タグ(imgやli、pやdivなど)の要素を表します。

    タグが多い=DOM要素が多すぎると、ブラウザのメモリ増大やJavaScriptのアクセスを遅くさせてしまうため、余りにも多い数は控えておくべきです。

    大体700個程度ならばスコアはAくらいに抑えることが可能です。


    Avoid empty src or href(空のSRCやHREFを避ける)


    srcやhrefの中身が空だったとしても、一部ブラウザではリクエストが発生します。

    つまり、無駄な問い合わせが行われてしまうため、中身が空のsrcやhrefは残さないようにしましょう。


    Avoid HTTP 404 (Not Found) error(HTTP 404 エラーを避ける)


    Avoid bad requests(間違ったリクエストを回避する)と同じ。

    404ページはユーザーに良い印象を残しません。



    CSS


    Avoid AlphaImageLoader filter(AlphaImageLoaderフィルタの使用を避ける)


    IE8の独自フィルターに「AlphaImageLoader Filter」というものがあります。

    これはオブジェクトの内容と背景の間に画像を配置することが出来るフィルターなのですが、フィルターを使って画像をダウンロードしている間は描画がその間停止してしまいます。

    なるべくそのフィルターを使うことは避けましょう。


    Put CSS at the top(CSSを上部に入れる)


    Put CSS in the document head(head内にCSSを入れる)と同じ。

    head内にCSSを入れていないと描画に遅延が発生します。


    Avoid CSS expressions(CSS expressionsの使用を避ける)


    IEの独自機能として「CSS expressions」というものがあります。

    これはCSS内でJavaScriptを動かす拡張機能なのですが、動作が不安定なために同じ動作が数万回も行われてしまう場合があり、それによってパフォーマンスに悪影響を及ぼします。

    使用はおすすめしません。



    JavaScript


    Make AJAX cacheable(AJAXをキャッシュ可能にする)


    Ajaxはウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称で、jQuery等にAjaxフレームワークが使用されています。

    大抵はキャッシュされているので問題ありません。

    逆にキャッシュさせない場合は「ajaxを呼び出す前」に以下を記述しておきます。


    $.ajaxSetup({
    cache: false,
    });



    Put JavaScript at bottom(JavaScriptを最後に置く)


    Defer parsing of JavaScript(JavaScriptの解析を遅延させる)とほぼ同じ。

    この項目では同期状態のJavaScriptは遅延の原因となるため、フッターに置くことを推奨しています。

    しかし、フッターに置かなくても非同期(async)か遅延読み込み(defer)を使うことで遅延の原因は解消します。

    ただ、JavaScriptによってはフッターに置いたり非同期、遅延読み込みを使うと動作に不具合が出る場合があります。


    Use GET for AJAX requests(AjaxリクエストにGETを使う)


    ヘッダおよびデータを照合する場合、POSTを使わずにGETを使用します。

    POSTリクエストよりもGETリクエストの方が単純なため、エラーは起きにくいです。


    Minify JavaScript and CSS(JavaScriptとCSSの縮小化)


    Minify CSS(CSSの縮小化)Minify JavaScript(JavaScriptの縮小化)と同じ。

    縮小にはYUI Compressorを使用すると楽に縮小出来ます。

    wordpressの場合は「Autoptimize」を使用してもOK。

    ただし、縮小後の動作に異変が生じる(描画が乱れる)等があるため、必ずバックアップを取って下さい。


    Remove duplicate JavaScript and CSS(重複したJavaScriptとCSSを削除)


    CSSの重複による不要なHTTPリクエストと、JavaScriptの重複による無駄なJavaScriptの実行は、パフォーマンスを低下させます。

    同じものが使用されないようにしましょう。


    Make JavaScript and CSS external(JavaScriptとCSSは外部ファイルにする)


    ブラウザにキャッシュさせるためにもJavaScriptとCSSはインラインではなく外部ファイルとして読み込みましょう。

    ただし、数行程度しか無いならばインラインで記述したほうがパフォーマンスは向上します(Inline small JavaScript(小さいJavaScriptをインライン化)Inline small CSS(小さいCSSをインライン化))。



    Image


    Do not scale images in HTML(HTMLで画像を拡大縮小しない)


    Serve scaled images(正しくスケーリングされた画像を使用)と同じ。

    大きいサイズの画像をCSSで用いて縮小するのではなく、元々小さい画像を使ったほうが読み込み速度は早くなります。


    Make favicon small and cacheable(ファビコンは小さく+キャッシュ可能に)


    ブラウザはアクセスする度にファビコン(ウェブサイトの小さいアイコン)をダウンロードを試みます。

    最小サイズのファビコン(16x16 or 32x32)を作成して最低限のサイズにしておき、更にそれをキャッシュさせると無駄な通信が発生しなくなります。

    ファビコンのキャッシュについてはLeverage browser caching(ブラウザのキャッシュを活用する)に記述されています(icoがファビコンの拡張子)。



    Cookie



    ブラウザが静的コンテンツ(画像等)をリクエストする時、一緒にCookie情報が送信されます。

    しかし画像はCookieの必要がないので、無駄な通信が加わっていることになります。

    対処には自サイトのURLを「www」付きにして次に「サブドメインを作成」。

    そのサブドメインに静的コンテンツを配置しCookieを使用しない設定にします。

    www無しが本来のURLだと、サブドメインにもクッキーが付与されてしまいます。

    以下Apatch及びWordpressでの方法。

    ※URL変更すると検索エンジンは別のURLとして認識します(ページランクは引き継ぎされない)。

    ・Apatch

    「httpd.conf」内のサブドメイン項目に以下を追加。


    # クッキー機能をON
    CookieTracking on

    # クッキーの有効期限
    CookieExpires "1 months"


    もし「httpd.conf」に以下の項目が入っている場合はコメントアウトして下さい。


    # LoadModule usertrack_module modules/mod_usertrack.so
    # AddModule mod_usertrack.c



    ・Wordpress

    管理画面から「設定」→「一般」でURLの変更を行います。

    http://example.com → http://www.example.com(こちらを自サイトのURLにする)

    サブドメインを追加します(以下は例)。

    http://static.example.com(このサブドメインに静的コンテンツを配置する+Cookieを使わない設定にする)

    そして次に以下を「wp-config.php」に記入します。


    # cookieを使わない
    define('WP_CONTENT_URL', 'http://static.example.com/wp-content');

    # こっちはcookieを使う
    define('COOKIE_DOMAIN', 'www.example.com');


    これでOKですが、www有りと無し両方が検索エンジンに認識される可能性があるため、以下のどちらかを「.htaccess」に入力します。


    # www有りを本来のURLに
    RewriteEngine on
    RewriteCond %{HTTP_HOST} ^example\.com
    RewriteRule (.*) http://www.example.com/$1 [R=301,L]

    あるいは

    # www無しを本来のURLに
    RewriteEngine on
    RewriteCond %{HTTP_HOST} ^www\.example\.com
    RewriteRule (.*) http://example.com/$1 [R=301,L]


    しかしこれは大量のアクセスを集めているメガサイトでもない限り、改善しても大した効果はありませんので、無視しても全く問題ありません

    事実、GTMetrixの基本スコアも低いです。




    Minimize request size(要求サイズを最小化)と同じです。

    大抵のサイトでは問題ありません。


    最後に


    PageSpeed及びYslowのすべての項目を紹介したため、非常に記事が長くなってしまいましたが、これら項目を適切に処理することでサイトの速度は間違いなく向上するでしょう。

    設定が何もかも面倒くさいという人は、CDNの設定だけでもしておくことをおすすめします。

    サイトの読み込みを超高速化! SSLも無料で使える効果絶大のCDN「CloudFlare(クラウドフレア)」
    https://media-pickup.com/tool/20141217/free-upgrade-website-performance-cdn-cloud-flare/
    2014-12-17-33

    今後も当サイトは常にパフォーマンスの強化を行い、サイトの速度を維持、改善に努めていきたいと思います。

    eyecatch by damo1977

    SHARE!

    各アイコンをクリックするとポップアップします(Feedlyは別窓)。

    ・この記事を「


    | |


    【おすすめ記事】IBMが「人間と同じような構造」のチップを開発

    ←前の記事
    大麻の使用は「双極性障害を悪化させる」可能性があることを発見
    次の記事→
    気さくなおば様と大盛りで有名な喫茶店「喫茶Y」でY定食を食べてきました
    

    この記事を見た人はこんな記事も見ています

    オートミール(オーツ麦)は本当にダイエットに効果があるのか

    オートミール(オーツ麦)は本当にダイエットに効果があるのか

    あなたは大丈夫? NHKの「受信料問題」と「受信契約の解除方法」

    あなたは大丈夫? NHKの「受信料問題」と「受信契約の解除方法」

    びっくりするほどゴッソリ取れる!洗濯槽を「酵素系洗剤」で洗ってみた

    びっくりするほどゴッソリ取れる!洗濯槽を「酵素系洗剤」で洗ってみた

    超簡単!3つ折りにした用紙を楽々封筒に入れられる2つの方法

    超簡単!3つ折りにした用紙を楽々封筒に入れられる2つの方法

    寒さ対策に。部屋から熱を奪わないための「保温効果を発揮する10の方法」

    寒さ対策に。部屋から熱を奪わないための「保温効果を発揮する10の方法」

    2015年度、日本と海外の「エイプリルフール」ネタ一覧

    2015年度、日本と海外の「エイプリルフール」ネタ一覧

    2014年度、MediaPickupで「最も人気があった記事 TOP5」

    2014年度、MediaPickupで「最も人気があった記事 TOP5」

    これからの夏にピッタリ! ペットボトルの炭酸飲料で美味しいシャーベットを作る方法

    これからの夏にピッタリ! ペットボトルの炭酸飲料で美味しいシャーベットを作る方法

    エアコンは使いたくない! 機械に頼らずに夏を快適に過ごす方法

    エアコンは使いたくない! 機械に頼らずに夏を快適に過ごす方法

    気持ち良く寝るために…快眠するためのエアコンの使い方

    気持ち良く寝るために…快眠するためのエアコンの使い方


    コラム」カテゴリーに関連する最新記事

    2015年度、日本と海外の「エイプリルフール」ネタ一覧

    2015年度、日本と海外の「エイプリルフール」ネタ一覧

    2014年度、MediaPickupで「最も人気があった記事 TOP5」

    2014年度、MediaPickupで「最も人気があった記事 TOP5」

    寒さ対策に。部屋から熱を奪わないための「保温効果を発揮する10の方法」

    寒さ対策に。部屋から熱を奪わないための「保温効果を発揮する10の方法」

    あなたは大丈夫? NHKの「受信料問題」と「受信契約の解除方法」

    あなたは大丈夫? NHKの「受信料問題」と「受信契約の解除方法」

    オートミール(オーツ麦)は本当にダイエットに効果があるのか

    オートミール(オーツ麦)は本当にダイエットに効果があるのか

    まるで貧困ビジネス? 奨学金という「蟻地獄」とその「闇」

    まるで貧困ビジネス? 奨学金という「蟻地獄」とその「闇」

    びっくりするほどゴッソリ取れる!洗濯槽を「酵素系洗剤」で洗ってみた

    びっくりするほどゴッソリ取れる!洗濯槽を「酵素系洗剤」で洗ってみた

    これからの夏にピッタリ! ペットボトルの炭酸飲料で美味しいシャーベットを作る方法

    これからの夏にピッタリ! ペットボトルの炭酸飲料で美味しいシャーベットを作る方法

    超簡単!3つ折りにした用紙を楽々封筒に入れられる2つの方法

    超簡単!3つ折りにした用紙を楽々封筒に入れられる2つの方法

    エアコンは使いたくない! 機械に頼らずに夏を快適に過ごす方法

    エアコンは使いたくない! 機械に頼らずに夏を快適に過ごす方法


    新着記事 - 10件

    FF7を「ファミコンで再現」する企画が完了、あらゆる要素がFC仕様に

    FF7を「ファミコンで再現」する企画が完了、あらゆる要素がFC仕様に

    脳を電極で刺激すると「創造性」をより生み出せるという実験結果

    脳を電極で刺激すると「創造性」をより生み出せるという実験結果

    「メープルシロップ」は抗生物質の能力を向上させる事が判明

    「メープルシロップ」は抗生物質の能力を向上させる事が判明

    アド街司会者でお馴染みの「愛川欽也」氏が死去、原因は肺ガン

    アド街司会者でお馴染みの「愛川欽也」氏が死去、原因は肺ガン

    地球上の生物の90%以上が死滅した「ペルム紀大絶滅」が再び発生する可能性

    地球上の生物の90%以上が死滅した「ペルム紀大絶滅」が再び発生する可能性

    スウェーデンの兄弟が世界初「ドーナツを宇宙に飛ばす」挑戦を行う

    スウェーデンの兄弟が世界初「ドーナツを宇宙に飛ばす」挑戦を行う

    宇宙飛行士の父親に向けて娘が「世界最大の自動車文字」でメッセージを贈る

    宇宙飛行士の父親に向けて娘が「世界最大の自動車文字」でメッセージを贈る

    「多用途四輪車(ホンダパイオニア700)でのウィリー走行」での世界記録

    「多用途四輪車(ホンダパイオニア700)でのウィリー走行」での世界記録

    イタリアの外科医がロシア人男性に「初の人間頭部移植(HEAVEN)」を計画

    イタリアの外科医がロシア人男性に「初の人間頭部移植(HEAVEN)」を計画

    TwitterがNTTやDataSiftを含む「全てのデータリセラーとの契約を解除」か

    TwitterがNTTやDataSiftを含む「全てのデータリセラーとの契約を解除」か


    ←前の記事
    大麻の使用は「双極性障害を悪化させる」可能性があることを発見
    次の記事→
    気さくなおば様と大盛りで有名な喫茶店「喫茶Y」でY定食を食べてきました