Recent Posts / Category : web
サイトの表示速度が検索順位の判断基準になるってことで
手がけたいろいろなサイトで、この対策をしないといけなくなった
【Google推奨】サイト（ページ）表示速度計測チェックツールまとめ
とりあえず、PageSpeed Insightsで各サイトをチェック
なんも考えずにサイトを作っていくと、まぁ赤ペン先生ものすごい厳しい判定をくださる
このサイトはこんな感じ、まあ・・まあ・・なんというか、「まぁ」な感じ
まぁWordPressのテーマの選択にもよるのかもしれないが
このブログはこんなスコアだけども
他のサイトなんてもう目も当てられない状態。
0/100がけっこうあった・・・こりゃ大変だ
規模の大きいサイト（ECサイトとか）は本当にテコ入れが大変で
ぱっと簡単に対策できることから潰していくと
・リソースの圧縮を有効にする
・ブラウザのキャッシュを活用する
・CSS を縮小する
・JavaScript を縮小する
このあたりはぱっと改善できるのでまずはこれを着手
リソースの圧縮を有効にする
htaccessにさらっと追記するだけでこれは解決
理屈があるんだろーが考えない・・・ただコピペするだけ
↓コピペ内容は下記参照
リソースを圧縮して転送サイズを減らしブログを高速化する方法（CSS、JS、WEBフォントなどの圧縮）
で、いろいろアレコレした結果こんな感じになった
#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
#フォント
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#圧縮の設定
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-font-ttf application/x-font-opentype image/svg+xml
# ブラウザのキャッシュを有効
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ブラウザのキャッシュを活用する
こちらもhtaccessにさらっとコピペで追記するだけでこれは改善できる
↓コピペ内容はこの記事
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと | 株式会社LIG
CSS を縮小する
これ
最近作ったサイトだとちゃんとgulpやGruntやらで管理してたりDWでプロジェクト（？）管理してたりするので
そういう場合はsassなりscssなりコンパイルする時に圧縮できるんだけども
古いサイトだとcssのデータしかない、とかWordPressのテンプレートもがっつり「style.css」しかない場合があるので
そういう時はこれが便利
CSS Minifier (スタイルシートの圧縮)
コピペでサクッと圧縮してくれる
cssのバックアップとって、圧縮したので上書きすればOKかなと
JavaScript を縮小する
これも同じく、古いサイトとかの場合はコピペで処理！
JS Minifier (JavaScriptの圧縮)
で、ここまでやって、ふつーのサイトならだいたいスコア上がると思うけど
WordPressはもうちょいやらなくちゃいけない
CSS、JSを非同期に
フッターのJSなんかはフィルターフックでなんとかできるもよう
【WordPress】スクリプトを読み込むときに自動で挿入される［type属性］を削除する方法。 – ONZE
でもwp_head()のcssとかどうすんの・・と思ったら便利プラグインがあった
JavaScriptやCSSを非同期ロードしてサイトを高速化してくれるWordPressプラグイン「Async JS and CSS」 | TechMemo
これをインストールして非同期問題は解決
さ、これでスコアあがったかな？
と、PageSpeed Insightsで見てみると・・・
・・あ、ああ、あんまり改善されてなくて引くぐらい
AnalyticsとかAdSenseのGoogleの外部のやつががっつりひっかかってきます
これはどうしようもないっぽい
フォーラムにこんな感じのが
同じようにAnalyticsとかAdSenseのキャッシュの問題があったけど
そういう外部サイトの問題を排除したPageSpeed Insightsがあるそうで
こんどはこっちで判定してみると
あ！ちょっとマシになってる！
あと解決しないといけないのがやっぱ画像ですかね・・
画像についてはフォトショでバッチあててなんとかするしかないかな
他サイトで対策してる時にこの画像問題なんとかしようとして
かなり圧縮したりしたけど、htmlとかで表示させているサイズよりも元の画像が大きいと駄目判定食らうような雰囲気があったので
こういうのってブログとかだと対策しにくいかなぁ～という感じ
ECとかもまじ地獄やしね・・数が多いから
9GBのイメージフォルダに3日がかりでバッチ当てたけどな・・・
処理においては容量よりもファイル数が危険な感じだからなぁ
と、地道な感じのPageSpeed Insights対策をこれから各サイトにしていかないといかんなぁ・・めんどくせ
結局、満点の合格を貰うにはもうちょい頑張りが必要ってことですな・・
他サイトでは100点満点出たから、やっぱ後は画像だな！
