【Web制作】スマホサイトの高速化！pagespeedで93点達成の攻略方法

スマホ用のテーマデザインでサイト作成した時の、表示速度の高速化に関するチップを紹介します。HTML・CSS・JavaScript・画像の軽量化・配置に気をつけるだけでも、かなり高速化できます。SEO対策にもなります。

ゆめぴょんです。こんちはっ(^^)/

スマートフォンの通信は、自宅のADSL・光回線やWiFiでの環境に比べると、読み込み速度が遅いです。それにページ読込み時も画面を見ながら待つことが多いため、耐えられる表示速度はPCより短めになります。

このことから、スマートフォン用のサイト・ブログデザインでは、軽量化・高速化が重要な課題です。最近はGoogleも表示速度を考慮すると名言してますので、将来的にはSEOにも影響を与えます。

新スマホデザイン公開時のGoogle判定

今月の初めに新スマホテーマのデザインを公開しました。もう見ていただけましたか(^^)？この時のGoogle PageSpeed Insightsでの判定は81点でした。

今回はこれが93点になるまでの高速化対策を順番に紹介していきます。

スマホ用テーマデザインで気をつけた点

まず最初に81点判定だったのですが、この時点までに全体的に制作で気をつけた点は次のとおりです。

1. 無駄なコードを書かない
2. HTML内のスタイルシート、JavaScriptは極力排除
3. 現在カテゴリー判定など重複するコードはまとめる
4. WordPressの場合、使うプラグインを少なくする

今回は最初から「シンプル」「軽量化」「高速化」を考えながら制作しました。細かい点はいろいろ配慮したのですが、一言でまとめると上の4点だけです。

特に1つめの「無駄なコード」を書かないことに尽きます。レスポンシブで作成した場合にサイドバーを「display:none」にしたり、記事下に配置したりするのも無駄なコードだと思っています。

スマホデザインにサイドバーは不要なので、最初から制作していません。

PCデザインでは必要でかつ面倒な「IE対策」ですが、スマホデザインでは無視しました。実際にスマホで古いIEからのアクセスってないですよね。これによってかなり無駄コードを排除できました。

「2」については後述します。「3」については以前も下記事で書いていますが、カテゴリーを表示するたびにPHPを記述するのは非効率です。「4」については別記事で書いていく予定です。

ファーストビューに関わるCSS・JavaScriptをインライン化

最近SEOがらみの話題で「Above the fold」や「ファーストビュー」を聞いたことはありませんか。これは、サイト・ブログを開いた時にスクロールさせずに一番最初に見えている画面のことです。

⇒「Above the foldのコンテンツは1秒以下で表示させること」、モバイルサイトの高速化をGoogleが推奨 | 海外SEO情報ブログ

Google Pagespeedでも、この部分の最適化を求めてきます。そこで対策してみたら、なんと一気に85点までスコアアップしました。

この時に行った対策は次のとおりです。1点づつ解説します。

1. スタイルシート(CSS)、JavaScriptを1つにまとめる
2. スタイルシート(CSS)、JavaScriptを圧縮(minify)
3. ファーストビューに関わるCSSのみ、インライン化
4. ファーストビューに関わらないCSS・JavaScriptは後方へ

スタイルシート(CSS)、JavaScriptを1つにまとめる

私はCSSリセットに「normalize.css」を使っています。厳密に言えばリセットではありません。これはいろんなブラウザ間のCSS初期値の差を排除してくれる公開コードです。

しかし「normalize.css」には私にとっては不要なコードも多いため、必要な部分のみを取り出して、自分の標準CSS「style.css」に取り込みました。

JavaScriptに関しても、先日紹介したautopagerや、jQueryのコードなどを全て1ファイルにまとめました。

スタイルシート(CSS)、JavaScriptを圧縮(minify)

1つにまとめたCSS、JavaScriptは外部ファイル化して読み込みます。その前に圧縮(minify)しました。

CSS、JavaScriptの圧縮というのは、無駄なスペース・改行・セミコロン・コメントなどを除去することです。もちろん圧縮後も通常通り動作します。たまに動かない時もあるのでテストは怠りなく。

圧縮方法はローカルアプリ、開発環境、ウェブサービスなどいろいろあります。今回は私がよく使うウェブサービスを紹介します。Yahooのライブラリを使っている「YUI Compressor」です。使い方は簡単です。

⇒Online YUI Compressor

圧縮したらファイル名は別管理した方が、修正した場合にも混乱しないと思います。私は「style.min.css」のようにしています。あとはいつもと同じように読み込むだけです。

ファーストビューに関わるCSSのみ、インライン化

ファーストビューに関わるCSSは、上で圧縮する前に分離しておくか、上部に寄せておきましょう。そして圧縮したCSSのうち、ファーストビュー(Above the fold)に関する部分だけ抜き出しましょう。

そしてHTMLファイルの上部に次のようにコピペします。インラインCSSというやつです。少し前までは全く推奨されませんでしたが、最近はファーストビュー重視のおかげかGoogleも薦めてきます。

[html]
<style>*{box-sizing:border-box}html{…}body{…}…</style>
[/html]

私のスマホデザインのソースを覗いてくれても構いません。個人的にはまだ慣れなくて気持ち悪いので、効果が認められなければ元に戻そうとも思っています。

ファーストビューに関わらないCSS・JavaScriptは後方へ

上でファーストビュー部分を抜き出した後のCSS、JavaScriptのファイルは、後方のフッターの最後、</body>閉じタグの直前で読み込んでいます。jQuery本体もその直前で読み込んでいます。

[html]
<link rel="stylesheet" href="/css/style.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/smart.min.js"></script>
</body>
[/html]

画像の圧縮、カテゴリメニューの後方移動など

次に使用している画像を圧縮しました。画像圧縮の方法もいろいろあるので、自分の好みのものを使えばいいと思います。

私がよく使うのは、JPGなら「JPEGmini」、PNGなら無料Webサービス「TinyPNG」や無料アプリ「ImageAlpha(Mac)」。また「ImageOptim(Mac)」「PNGGauntlet(Windows)」も併用すると更に圧縮可能です。

WordPressの場合は、下のようなプラグインを利用すると過去に貼り付けた写真・画像をまとめて圧縮できるので楽ちんです。

CSSスプライトを適用すれば、さらなる高速化が可能です。今回私はまだですが、Retinaディスプレイに対応したいと思っています。アイコン画像だけはRetina用に倍サイズに指定済みです。

下の記事で紹介したカテゴリーメニューや検索部分も、通常は表示していないしjQueryを読み込まないと使えないため、最下段へ移動しました。

このように、問題のないコードはどんどん後方へ移動していくと、コンテンツ部分の表示速度は高速化されます。

その他に、ソーシャルボタンのJavaScriptコードを一箇所にまとめたりもしました。

この段階で、Google Pagespeedで測定した結果は下のとおり。最初の81点からは7ポイントも上昇した88点です。

ソーシャルボタンを全てはずしてみる

さてここまでやると、Pagespeedの修正方法では、外部スクリプトの問題ばかりが指摘されます。特にソーシャルボタンがらみの問題が多いです。

というわけで試しにソーシャルボタン（ツイッター、Facebookなど）を全てはずしてみました。すると、冒頭の93点になりました。

しかし現状はいくら高速化できても、ソーシャルボタンをはずすことはデメリットの方が多い気がするので、88点で満足することにします。ソーシャルボタンの付け方は下記事をご参考に。

まとめ：今日のゆめぴょんの知恵

まだいくらか改善できる余地はありそうなので、効果があればまた記事にしたいと思っています。

WordPressで作成したブログなら、プラグインやその他の方法を用いてさらに高速化できるかもしれませんよ。