ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

スマホを使う女性

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

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

【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介

このブログはスマホ表示時には、便利なWordPressプラグイン「WPtouch…

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

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

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

新スマホテーマのPageSpeed計測結果

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

Google Pagespeedで93の高得点!

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

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

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

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

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

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

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

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

【WordPress】カテゴリー階層の構造化でSEO対策!取得コードもすっきり【WordPress】カテゴリー階層の構造化でSEO対策!取得コードもすっきり15 shares

ブログ記事が増えてきたのでSEO対策もかねてカテゴリーを階層化しました。カテゴリ…

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

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

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

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

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ファイルにまとめました。

jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法17 shares

jQueryプラグインautopagerを使うと、ツイッターなどでも導入されてい…

【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法

jQueryを使ってカテゴリーなどのナビゲーションメニューをふわっと出現させる方…

スタイルシート(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も薦めてきます。

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

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

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

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

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

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

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

EWWW Image OptimizerプラグインでWordPress画像圧縮!表示も高速化EWWW Image OptimizerプラグインでWordPress画像圧縮!表示も高速化20 shares

WordPressプラグイン「EWWW Image Optimizer」はブログ…

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

CSSスプライト(Spirte)でWebサイトの画像表示を高速化!HTTPリクエストを減らすCSSスプライト(Spirte)でWebサイトの画像表示を高速化!HTTPリクエストを減らす

CSSスプライトを利用すると表示速度を高速化できます。しかし複数画像を1つにまと…

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

【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法

jQueryを使ってカテゴリーなどのナビゲーションメニューをふわっと出現させる方…

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

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

【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ

記事の中に複数の同じソーシャルボタンを設置している場合、スクリプトをまとめること…

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

Google Pagespeedで88点!

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

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

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

Google Pagespeedで93の高得点!

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

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

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

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

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

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】スマホサイトの記事一覧を人気順にした理由と方法!SEO対策にもなる【WordPress】スマホサイト作成!テーマファイルの効率化:次記事»
ページ
↑先頭
ホーム