Googleがモバイル環境の高速化を目的に始めた「Accelerated Mobile Pages Project」通称AMP。
今現在(2016/04/07)では検索結果への大きな影響は無いとしていますが、メディア系のサイトを中心にAMP対応のサイトは今後増えていくことでしょう。
AMPは高速化が目的なため、デザインもシンプルなものになります。
ただその反面、AMP特有の制約やルールが多く、凝ったデザインにすることは非常に難しくなります。
ので、コーポレートサイトや、キャンペーンサイトのようなホームページはすぐにAMP対応を行う必要はないと思います（今後、自社でブログなどで情報を発信しているところは、AMP対応のメディアと比べて、どんどん差をつけられるかもしれませんが）
AMP対応の必要性は急務ではないですが、高速化はどのサイトでも考えないといけない課題でしょう。
アマゾンはサイトの表示速度が1秒遅れるだけでコンバージョンが7％落ちることを発見しています。
How slow is too slow in 2016?
http://www.webdesignerdepot.com/2016/02/how-slow-is-too-slow-in-2016/
アマゾン程ではないにしても、表示速度の遅れは大きな機会損失です。
そこで【CSS】【Javascript】【画像】の３つの視点からWordpressの高速化についてご紹介します。
1, どこが問題かチェックする
まずはPageSpeed Insightsで管理しているサイトの状態を調べます。
その結果を100点満点中何点なのかと、100点にするにはどうすればいいかを提案してくれます。
ここでの点数がすべてではないですが、点は高いに越したことはありません。
ひとつひとつ解決していきましょう。
2, CSS配信の最適化
簡単にいうと「このCSSが表示させるのに遅延の原因になってるから、CSSの読み込みを後にするか、HTMLに直接書いてね」って意味になります。改善方法として下のURLでGoogleより大きく３つ方法が書かれています。
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
- 小さな CSS はインライン化する(<head>内に直接書くこと)
- 大きなデータ URI はインライン化しない
- CSS 属性をインライン化しない(<p style=”・・・”>みたい)
ちなみにこちらは当サイトで出た修正提案箇所です。
全部で５つ外部参照CSSについて提案がありました。このうち４つはプラグインによるものです。
当然ですが、プラグインによる外部参照CSSは修正することは出来ません。
そこでsync JS and CSSというプラグインを使います。
こちらのプラグインである程度、CSSのブロックを解消してくれます。
ただプラグインをインストール→有効にしただけだと、CSSが全部インライン化して逆に遅くなりかねないので、以下の部分にチェックを入れてください。
これで不要なインライン化を防ぐことが出来ます。
3, 外部参照のCSSを減らす
そもそも外部参照CSSが多いと、その分HTTPリクエスト数も増えるのでなるべく少ない方がいいです。この時、CSSファイルを一つにするのに@importを書いたらいいんじゃないか、と思う人もいるかもしれませんが、それもCSSの中で外部参照してるのと同じなので、意味がありません。
WordPressだとテーマ管理用のstyle.cssはテーマ名以外は削除して、可能な限り１つのCSSファイルに集中させるのがいいでしょう。
|
1 2 |
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"> <!-- テーマ名のみ --> <link href="<?php echo get_template_directory_uri(); ?>/style.min.css" rel="stylesheet"> <!-- CSSはすべてこっちに書く --> |
4, CSSを圧縮する
CSSをひとつにまとめたら、CSSファイルを圧縮しましょう。
圧縮してくれるサイトはいくつもありますが、僕はこのサイトを使っています。
こちらのサイトはInputにCSSをコピペして、コードの種類に合わせて右上のボタンを押すだけで簡単に圧縮してくれます。
5, viewportの設定
高速化とは関係ありませんが、重要なことだと思ったので。
高速化は主にモバイル(スマホ端末・タブレット端末)を対象に行うわけで、それらの端末でいくら早く表示されたとしても崩れてたり、読みづらかったりしたら意味が無いと思うんです。高速化・軽量化も重要ですが、それと同じくらいユーザエクスペリエンスも重要です。
次回は【Javascript】の高速化についてご紹介します。
