A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

PHP パフォーマンスチューニング

Google Developers PageSpeed Insightsを活用してパフォーマンスチューニング

投稿日:2014年9月26日 更新日:

PageSpeed Insightsのトップページに書いてあるんですが「あらゆる端末でウェブページの読み込み時間を短くしましょう。」との事。
読み込みが早い方が良いのはもちろんその通りで、問題はどうやって速くするか?な訳です。
PageSpeed Insightsは、そんな”どうやって速く”のありがたいアドバイスを頂けます。
https://developers.google.com/speed/pagespeed/insights/
最適化前のスクリーンショットを取り忘れたので、比較し難いのですが、現状はこんな感じです。

A4 WORKSコーポレートサイト

 
 
 
PageSpeed Insights PageSpeed Insights_SP
 
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をインラインで処理

通常であれば、以下の様な感じで、外部ファイルを読み出しするのですが、インラインで処理するか、読み込みを非同期にする様に言われます。

 

簡易に変更するには非同期は難しいケースもあるので、今回はインライン化しました。
対象のサイトはPHP+smartyの構成なので、こんな感じのfunctionをつくります。
https://gist.github.com/akifumi-kamata/2db9e78ef9076b052853
こんな感じで呼び出しします。




    
(以下省略)

単純に外部ファイルを読み込んで表示しているだけです。
cssや、Javascriptが相応に大きなサイズになった場合には別な対応が必要ですが、現状はそこまででないので、このような対応をしています。

更なるパフォーマンスチューニング

これらとは別に無料のCDN(CloudFlare)を使ったパフォーマンスアップも対応しましたが、こちらはまた別の機会に。
 
 

-PHP, パフォーマンスチューニング
-, , ,

執筆者:

関連記事

no image

PHPの名前空間を実際に使ってみた。

A4 WORKS 新人の池田です。 “ブログを書くことで学べる事も多くある”という教えのもと、ブログ初挑戦です。 読みにくい部分も多分にあるかとは思いますが最後までおつきあい頂 …

FuelPHPでSmartyを使う

以前のエントリ「FuelPHPを使ってみる」の続きです。 Twigを導入するか迷ったんですが、今回はなじみがあるのでSmartyを採用(導入)します。 最初に。 バージョン1.7.2でのセットアップ方 …

file_get_contensでPOSTリクエスト

file_get_contensでファイルパスの代わりにURLを指定することで、手軽かつ簡易に外部のサイトからソースを取得することができ、WebAPIからデータを取得するなどに重宝します。 ただ、PH …

WordPressのパフォーマンスチューニング

先日のエントリの”サイトのパフォーマンスチューニング”の続きです。 コーポレートサイトは最適化したのですが、このブログは最適化して無かったので、こちらも対応。 下記のコードをindex.phpの冒頭に …

BitbucketのPull RequestをSlackに通知するWeb API

BitbucketのWebhookと、SlackのWebAPIを組み合わせせる事でcommit通知は送れるのですが、Pull Requestの通知は標準では送信できない様です。 ネットで探すといくつか …