webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
ページ高速化SEO施策(1)「画像を最適化・ブラウザのキャッシュを活用」・JQuery CDN利用でキャッシュ活用 eyecatch画像

ページ高速化SEO施策(1)「画像を最適化・ブラウザのキャッシュを活用」・JQuery CDN利用でキャッシュ活用

rss

ページスピードアップ・高速化【SEO内部施策】

※WEBコーディングの備忘録です。

WEBサイトの読み込みページスピードを上げてみようと試み中です。
ちなみに、ページスピードを上げるのは、
直接的な「SEO施策効果が高い」というよりも、ユーザーのサイト離脱につなげない、「Webサイトパフォーマンス」を上げる「SEO内部対策」目的です。

Webcode-labでは、
「ページスピードUP施策のSEO効果」と「手間・工費」のバランス上、そこまで手間をかけて完璧に対策することを目的とせず、
ある程度の工数で可能であり効果的な基本施策を行っています。



 

ページスピード判定

ページスピードを計るには、
Googleが提供するWEBサイトの読み込みスピード判定ツール、PageSpeed Insightsがとても便利で、URLを貼り付けるだけで判定できます。
当サイトトップページを「PageSpeed Insights」で判定したところ、

「修正を考慮」に項目が出てきました。
下記の項目はたいていどのサイトを制作していても出てきます。

判定結果


修正を考慮

1.画像を最適化する
2.ブラウザのキャッシュを活用する

3.CSS/HTML/JavaScriptを縮小する
4.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

まず今回は、上記1と2の項目を見ていきます。
 


 



【項目1】画像を最適化する

画像のロスレス圧縮をして軽くしましょう、ってことですね。
なんと便利なことに、PageSpeed Insightsでスピード判定すると、
自動的にそのページの対象の画像ファイルを圧縮してくれ、ダウンロード出来ます。
(ページ下部からダウンロード可、CSS・JSも圧縮ダウンロード可能)

もちろんgulpなんかでサーバー側で自動的に圧縮してしまえばいいのですが、
導入していない場合は個別にロスレス圧縮が必要です。
「PageSpeed Insights」はページ毎にまとめて一度に圧縮してくれるので便利です。

※動的に画像をアップロードさせるようなCMSサイトでは、全画像をロスレス圧縮することは実質できないため、
この項目はスルーします。

 


【項目2】ブラウザのキャッシュを活用する

何のためにブラウザキャッシュを活用するの?を簡単に言うと、
「サイトを訪れる閲覧ユーザーさんのブラウザに画像やファイル等をキャッシュしてもらって、
次回来訪時は、一度読み込んだものは読み直さず、自分のブラウザのキャッシュから見つけてね」
ということです。
リピート閲覧ユーザーにとっては、読み込みスピードがアップするメリットがあります。

ってことは新規ユーザーには関係ない、、、?
関係あります!

JQueryライブラリ等、広く汎用的に使われているCDNファイルは、
新規ユーザーでも別サイトでキャッシュしている可能性が高いので、やはり「ブラウザのキャッシュ活用」は有用です。

JQueryライブラリのCDN利用でブラウザキャッシュ活用

前述のとおり、JQuery本体は自サーバーに置いて読み込ませるのではなく、
GoogleやMicrosoftなどでホストされているCDNを利用すること。
(閲覧ユーザーのブラウザに、既にキャッシュされている可能性を視野に)
つまり、

  <script src="/js/jquery-2.1.4.min.js"></script>
   自サイト内(自サーバー)に置いたファイル

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     例:広く使われている「google」のCDN


ちなみに、Jquery本体をCDN利用する際、当サイトでは下記の対応をします。

  • IE9以下を考慮し2バージョンのJQueryで対応
  • CDN提供サイトがサーバーダウンした際や、オフラインでの閲覧等を考慮し、念のためローカルサーバーにもJQuery本体を置き、CDN接続できない場合の回避策付き
<!-- JQuery2.1.4 CDN START -->
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.11.3.min.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-2.1.4.min.js"><\/script>')</script>
<!--<![endif]-->
<!-- Jquery END -->



.htaccessのmod_expiresでブラウザキャッシュ活用

※サーバーの仕様によりmod_expiresが使用できない場合があります。

この施策はリピート閲覧ユーザー向けですが、
画像・CSS・JS等のファイルをユーザーブラウザにキャッシュさせ、高速化を計るSEO対策です。
「.htaccess」の「mod_expires」で、キャッシュさせるファイルの拡張子と期間を指定していきます。

ただし、WEBサイト制作中に、
先に「CSSファイル」等のブラウザキャッシュ設定をしてしまうと、変更が反映されずキャッシュクリアしないといけなくなるので、タイミングを考えて設定します。

※下記の例はエックスサーバー(php7利用)での.htaccess設定例です。

 
.htaccessで「ブラウザキャッシュ」設定

#ブラウザキャッシュ利用設定
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType text/css "access plus 15 days"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</ifModule>



備考

Googleページスピード判定ツール、「PageSpeed Insights」の判定結果で、
「ブラウザのキャッシュを活用する」の修正が必要と指摘される対象ファイルに、
外部読み込みJSのgoogleの「analyticsコード」だったり「Tag manager」だったりがあることがあります。

 こういうファイル

http://www.googletagmanager.com/gtm.js?id=000-0000 (15 分)
http://www.google-analytics.com/analytics.js (2 時間)

これらは外部ファイルのため、圧縮しようにもどうしようもありません。
っていうか、Googleさん提供の「analyticsコード」なのに修正を考慮せよって。。。?
この関係の指摘は無視しましょう。



ページ高速化SEO施策 (2) 「CSS/HTML/JavaScriptを縮小する」へ →

ページ高速化SEO施策 (3) 「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除」 へ →
 
ページの先頭へ

rss
1件目 (1件中)