Googleの秘策「PageSpeed」をガジェット速報に導入したら表示速度が3倍速くなった!

弊サイトのアクセスシェアにおいて、モバイルインターネット環境が約67%を占める現在、3GやLTE回線のユーザーを想定したサイト作りが必要不可欠になりました。回線の品質が悪くなればなるほど、サーバーが送出するデータを圧縮することや、HTTPリクエスト数を減らすことが重要になります。

さて、そんな世間の流れにガジェット速報も追いつくために、19日午前0時~午前5時頃に深夜のメンテナンス作業を行いました。作業中に一時的なアクセス障害を起こす大失態を犯しましたが、今のところ正常どおりに稼働しております。

メンテナンス前とメンテナンス後を比較すると、ページ表示速度は350%近く高速化しています。そんな高速化を実現した秘密の1つが、グーグルが提供する「PageSpeed」ソリューションの利用です。

04_ngx_pagespeed

これは、ApacheやNginxといったHTTPサーバーに組み込む形で提供されており、この高速化ソリューションを利用するには専用サーバーやVPSといったroot権限が利用できる環境が必要となります。従って同居型レンタルサーバーを利用している場合はほぼ導入不可能な点は注意が必要です。

現在提供されているのは、Apache用の「mod_pagespeed」と、Nginx用の「ngx_pagespeed(ベータ版)」の2つ。ガジェット速報はNginxを利用しているのでベータ版を利用することになりますが、当然のことながらクリティカルなサービスを運営している方はこの方法はオススメできません。

PageSpeedは具体的にどんなことをしてくれるのか?というと、端的にいうならば、ブラウザが最も理解しやすい形でデータを自動で再構築してくれます。

ngx_pagespeed   Make the Web Faster - Google Developers

例えばガジェット速報のソースを見て頂くと分かるかと思いますが、従来は「logo.png」という画像形式で提供していたロゴ画像が「data:image/png;base64,iVBORw0KGgoAAAANS…..」といった『データURIスキーム』形式に自動で置き換わりました。これにより、画像データを取得するためのHTTPリクエストを1つ削減できることになります。

また、コメント文やムダな改行などの削除、JavaScriptファイルの結合、CSSファイルの圧縮など、様々な機能が提供されており、ガジェット速報では利用していませんが「画像の最適化」といったことも自動で行うことが出来ます。

さて、ここまで読んでお気づきの方もいらっしゃるかと思いますが、動的ページにおいてサーバー側で最適化するということはサーバ側のCPU処理負荷が高まることになります。本来であれば、ガジェット速報においても「画像の最適化」機能を導入したいところですが、サーバ―側の負荷を考慮すると見送らざるを得ない状況です。将来的に資金的な余裕ができてハイスペックCPUを搭載したマシンを借りることができるようになれば、是非ともチャレンジしてみたい機能の1つです。

グーグルは増加し続けるネットトラフィックを問題視しており、それらを減らす方法を模索し続けています。また、ページ表示の遅延がユーザー体験(UX)を損なっていると考えており、ページ表示が遅いサイトは検索結果の順位においてペナルティが与えられることが明らかにされています。

サイト運営者の方で、もしPageSpeedソリューションの導入が許される環境にあるならば、是非ともチャレンジしてみてはいかがでしょうか。なお、本稿では導入法について説明を省きますが、GitHubに1から10まで丁寧に載っていますので、ぜひそちらをご覧ください(GitHub)。

スマートフォン版を近日リニューアルします

大変ご迷惑をおかけしておりますスマートフォン版ですが、7月上旬をめどに完全リニューアル予定です。

現在は「コメントに返信できない」といったことや「Android 2.3.xで表示不具合が起こる」などの不具合が発生していますが、これらは改善する見込みでございます。さらにUIを一新し、ヘビーコメンターの方にとっても便利な機能が充実する予定です。

今しばらくご不便をお掛け致しますが、何卒ご理解とご協力をお願い致します。

ソーシャルシェア

このニュースでディスカッション
  • コメントを投稿する際には「コメントガイドライン」を必ずご覧ください
  • コメントを投稿した際には、コメント機能利用規約(ガイドライン)に同意したものとみなされます
  • 主要ニュースサイトなどの「許可サイト」以外のURLを含む投稿はコメントが保留されます