スタッフのつぶやき

【備忘録】PageSpeed Insightsの改善で効果があった方法

  • このエントリーをはてなブックマークに追加
【備忘録】PageSpeed Insightsの改善で効果があった方法

こんにちは、ワタナベです。

もうそろそろ髪色を変えようかな~と考え中です(‘ω’)

今回は「PageSpeed Insights」の改善でこれをやったら効果が出た!というものを備忘録として書いていきます。

使用していないJavaScriptの削除

特定のページからプラグインの不要なcss、jsを無効化(読み込まないように)する

Contactform7などは特定のページでしか使う機会がないと思いますが、全ページで読み込まれてしまっています。
そこで、このフォームを特定のページでしか読み込めないようにしてしまいます。

function.phpに下記のように記載すると、指定されたページ以外では読み込まれなくなります。

function dc_dq_style_script() {
if( !is_page(‘contact’) ){ // ‘contact’というスラッグの固定ページではない場合
wp_dequeue_style( ‘contact-form-7’ );  // Contact Form7のcss
wp_dequeue_script( ‘contact-form-7’ );  // Contact Form7のjs
}
}
add_action( ‘wp_enqueue_scripts’, ‘dc_dq_style_script’ );

詳しいやり方はコチラ↓↓

レンダリングを妨げるリソースの除外

プラグイン「Autoptimize」を使う

「JS,CSS & HTML」でそれぞれの項目の「コードの最適化」にチェックを入れるだけでOK。
ほかの設定へのチェックはサイトによっては表示が崩れてしまうかもしれないのでそれぞれのサイトにあった設定をしましょう。

さらに最適化を図る場合は、「Images」やWebfontなどの設定もするとよいでしょう。

CSSの非同期読み込み

<link rel=”stylesheet” href=”style.css” media=”print” onload=”this.media=’all'”>

たったこれだけでcssの非同期読み込みができるのは驚きでした…!
すべてのcssにこの記述をするとファーストビューでスタイルが当たっていない状態で表示してしまうので、common.cssなどは通常通り読み込むのがよいでしょう。

テキスト圧縮の有効化

.htaccessへ下記を追記。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

 

以上です。

 

それではまた次回。

ご閲覧ありがとうございました(‘ω’)ノ

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ