PageSpeed Insightsのトップページに書いてあるんですが「あらゆる端末でウェブページの読み込み時間を短くしましょう。」との事。
読み込みが早い方が良いのはもちろんその通りで、問題はどうやって速くするか？な訳です。
PageSpeed Insightsは、そんな”どうやって速く”のありがたいアドバイスを頂けます。
https://developers.google.com/speed/pagespeed/insights/
最適化前のスクリーンショットを取り忘れたので、比較し難いのですが、現状はこんな感じです。
A4 WORKSコーポレートサイト
PC向けが94/100、モバイル向けが86/100と言った状況です。
まだ完全では無いのですが、facebookやtwitterプラグインに起因するものや、compassで動的に生成された画像など対応がちょっと大変なモノが指摘されている状態なので、一旦区切りとしました。
対応した事
・htmlソースコードを圧縮して送信する
・静的な画像にキャッシュの有効期限情報を持たせる
・外部ファイルにしていたcss,Javascriptをインラインで処理する
htmlソースコードなどを圧縮して送信する
phpの設定で、ブラウザがgzip圧縮に対応している場合には圧縮して送出する様な設定をおこないます。
php.ini、.htaccess、phpのソースに記述の3択から選択できますが、今回はphpのソースコードにini_setを使い設定をしました。
https://gist.github.com/akifumi-kamata/4718f102e15e7a450d37
静的な画像にキャッシュの有効期限情報を持たせる
.htaccessに以下の設定を追加し、有効期限情報を送出する様に設定します。
https://gist.github.com/akifumi-kamata/3b373c19852b35899b16
7days推奨とありましたが、今回は様子見で1daysに設定。
外部ファイルのcss,Javascriptをインラインで処理
通常であれば、以下の様な感じで、外部ファイルを読み出しするのですが、インラインで処理するか、読み込みを非同期にする様に言われます。
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
簡易に変更するには非同期は難しいケースもあるので、今回はインライン化しました。
対象のサイトはPHP+smartyの構成なので、こんな感じのfunctionをつくります。
https://gist.github.com/akifumi-kamata/2db9e78ef9076b052853
こんな感じで呼び出しします。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
{assetsInliner file="/css/stylesheet.css"}
</style>
(以下省略)
単純に外部ファイルを読み込んで表示しているだけです。
cssや、Javascriptが相応に大きなサイズになった場合には別な対応が必要ですが、現状はそこまででないので、このような対応をしています。
更なるパフォーマンスチューニング
これらとは別に無料のCDN(CloudFlare)を使ったパフォーマンスアップも対応しましたが、こちらはまた別の機会に。
