A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

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

   

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を使い設定をしました。

静的な画像にキャッシュの有効期限情報を持たせる

.htaccessに以下の設定を追加し、有効期限情報を送出する様に設定します。

7days推奨とありましたが、今回は様子見で1daysに設定。

外部ファイルのcss,Javascriptをインラインで処理

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

簡易に変更するには非同期は難しいケースもあるので、今回はインライン化しました。

対象のサイトはPHP+smartyの構成なので、こんな感じのfunctionをつくります。

こんな感じで呼び出しします。

単純に外部ファイルを読み込んで表示しているだけです。

cssや、Javascriptが相応に大きなサイズになった場合には別な対応が必要ですが、現状はそこまででないので、このような対応をしています。

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

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

 

 

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

STINGERレクタングル大

STINGERレクタングル大

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

fuelPHP_icon
FuelPHPでSmartyを使う

以前のエントリ「FuelPHPを使ってみる」の続きです。 Twigを導入するか迷 …

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

A4 WORKS 新人の池田です。 “ブログを書くことで学べる事も多 …

CloudFlare_icon
無料のCDN CloudFlareを使ってみる

ダウンロードの高速化とトラフィックの分散にはCDN(Contents Deliv …

fuelPHP_icon
FuelPHPのとっかかりの際に目を通してほしいスライド

公式のドキュメントも分かりやすく整理されているとはおもいますが、このスライドが要 …

php_icon
PHPでAPCを有効にするとclass not foundになる現象

最近はLINEスタンプのネタばかりだったので、久々の技術ネタです。 4年ほど前に …

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

BitbucketのWebhookと、SlackのWebAPIを組み合わせせる事 …

fuelPHP_icon
FuelPHPを使ってみる

ゲーム開発プロジェクトのサーバー側(アプリと連携させるAPIとか管理機能とか)を …

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

先日のエントリの”サイトのパフォーマンスチューニング”の続きです。 コーポレート …

php_icon
memcachedのインストールとPHPの対応

AWSのサーバーにmemcachedをインストールしたので備忘録。 memcac …

php_icon
file_get_contensでPOSTリクエスト

file_get_contensでファイルパスの代わりにURLを指定することで、 …