最近ブログのレイアウトを変更しまして、それに伴いPageSpeed Insightsのスコアが落ちとるとです。
自分のサイトを改善しつつ、その方法をちょこっと紹介しています。
タップ ターゲットのサイズを適切に調整する
ブラウザのキャッシュを活用する
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
レンダリングをブロックする JavaScript を除去してください
次のCSS 配信を最適化してください 編
そもそもスコアが高いサイトというのは「ユーザがストレスなく使えるサイト」です。
普段からそれを意識していれば自ずとある程度のスコアは出るはずなので、あまりに評価が低い場合は普段から意識するよう心がけてみると良いと思います。
タップ ターゲットのサイズを適切に調整する
タップターゲットのサイズを適切に調整は読んで字のごとくですが、スマホで表示した際に、ボタンやリンク系がタップしやすい大きさになっているか。というものです。
隣り合ったリンクがある場合などに「あんた、近すぎるよ！」ってことでスコアが下がっちゃいます。
なのでCSSでいい位置に調整しましょう。
例えば今回のテーマで余裕を持ってaタグやボタンを配置するために以下のCSSを適用しています。
※以下CSSで回避する場合aタグにはbutonというクラス名を付けること
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
a.button, .post-content input[type="button"], .post-content button { font-size:0.9em; color:#666; display:inline-block; border:solid 1px #ccc; padding:3px 10px; margin:3px 0; box-shadow:0px 0px 1px 0px #ccc; text-decoration:none; } a.button:hover, .post-content input[type="button"]:hover, .post-content button:hover { background: #EDEDED; text-decoration:none; color: #3a3a3a; } |
簡単ではありますがこのくらい余裕を持てばOKっぽいです。
サイトのデザインに合わせて良いCSSを当ててあげてください。
ブラウザのキャッシュを活用する
ブラウザのキャッシュを活用して普通更新されることのないファイルを再読込させないことで、アクセススピードを改善してください。というものです。
.htaccessに書くか、apacheの設定に直接書き込むか2パターンの方法がありますが、どちらに記述するにしても書き方は一緒です。
私は/etc/httpd/conf.d/expires.confの中に記述しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 days" ExpiresByType image/png "access plus 7 days" ExpiresByType image/jpeg "access plus 7 days" ExpiresByType image/gif "access plus 7 days" ExpiresByType text/css "access plus 7 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 7 days" ExpiresByType application/x-shockwave-flash "access 7 days" ExpiresByType application/x-woff "access plus 7 month" </IfModule> |
mimetypeごとにどのくらいの期間キャッシュするかをこんな感じで指定してください。
ここで注意なのですが、apacheが認識していないmimetypeの場合があります。
ここに記述しても反映されないようならmimetypeの設定が必要なので、適宜追加してあげてください。
例えばimage/jpegを書いたのにキャッシュされたと判断してくれないよ！という場合であれば、
|
1 |
AddType image/jpeg .jpg .jpeg |
を先頭に書いてあげれば良いはずです。
もしこれでダメならmod_expiresが入っていない or .htaccessで上書きが許可されていないという話になると思うので、サーバ管理者に連絡するしか手はないでしょう。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
レンダリングをブロックする JavaScript を除去してください 編
JavaScriptを同期ロードしてしまうと、ロードする時間分表示が遅くなってしまいます。
そのため、非同期で読み込むか、細かなJavascriptはインラインにベタ打ちしてしまう対応をすると評価が上がります。
私の場合はjqueryのJavaScriptのロードが問題となっていたので、
WP Deferred Javascripts
というプラグインを入れて対応しました。入れて有効化するだけでOKです！
次のCSS 配信を最適化してください 編
CSSファイルの読み込みファイル数が多ければ多いほどリクエストが発生する分ロスが大きくなります。
そのためCSSもインラインにベタ打ちしてしまうか、遅延ロードすれば評価は上がります。
しかし遅延ロードしていまうとロードされるまでの時間表示が崩れるので、全部埋め込むことにしました。
利用したプラグインは
Async JS and CSS settings
です。
Load Javascript asynchronously 無効
Load CSS asynchronously 有効
CSS loading method (default)Inserting all CSS styles inline into the document HEADER 有効
Minify CSS 有効
にすればOKです。
しかしもう一個厄介なCSSがありまして、
https://fonts.googleapis.com/css?family=Open+Sans:400,300
も最適化してください。と表示されてしまいました。
GoogleのWEBフォントっぽいですね。
こいつだけは他のサーバからの読み込みなのでどうしようもないので、テーマから除外することで対応しました。
具体的には、親テーマの中で
|
1 2 3 4 5 6 |
function unlimited_load_scripts_styles() { // Google Fonts (required to register outside scripts first) wp_register_style( 'ct-unlimited-google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400,300' ); wp_enqueue_style( 'ct-unlimited-google-fonts' ); } add_action( 'wp_enqueue_scripts', 'unlimited_load_scripts_styles' ); |
となっていたので、ct-unlimited-google-fontsで登録されているstyle読み込みを、子テーマのfunctions.phpで削除しました。
|
1 2 3 4 5 |
function remove_font_style() { wp_dequeue_style('ct-unlimited-google-fonts'); wp_deregister_style('ct-unlimited-google-fonts'); } add_action('wp_print_styles', 'remove_font_style', 100); |
