キーワー
はじめに 光回線 え、携帯 の普及も急 インター た。また 普及によ 閲覧でき 方で、利 地や特定 線が混雑 ムアウト になりま 信事業者 制の廃止 サービス を求める利 本記事 閲覧性（表 量）の削減 について
ホームペ 現在、
HTML、C を組み合 画像、動 また、
を構築可 が 2014 2011年～
れにより 合わせだ 出来るよ 環境によ ないケー HTML5/C
地方独立行政
h
ド：ホームペ
などのブロー 電話回線な 急速に進んで ネットに接続 スマートフォ り、どこで る環境が整い 用者の急激な の時間帯にお し、Web閲覧 の発生といっ した。また、
）の台頭や通 などから、個 を選ぶとと 利用者が増 では産技研ホ 表示品質）の 減を両立した ご紹介いた
ージ作成を取 ホームページ CSS、JavaS わせる方法が 画ファイル等 より高度な 能とするた 年 10 月に、
～2012年にか
、HTML・C けでブラウザ うになりま っては、HT ースが多く、
CSS3 対応ブ
政法人
大阪府
ttp://tri-osTe
ページ、表示
ードバンド網 どを用いたモ でおり、様々 続できるよ ォンやタブレ も手軽にホー いつつありま な増加に伴い おいてインタ 覧の応答性能 った問題が頻
、MVNO（仮 通信キャリア 個々の利用状 もに、通信量 えつつありま ホームページ の維持と通信 たコンテンツ します。
取り巻く現在 ジを作成する Scriptの３つ が一般的です 等が添付され ウェブアプリ め W3C1) よ
、CSS3 の主 かけ勧告され CSS・JavaS
ザ上で多彩な した。しかし TML5/CSS3
ホームペー ブラウザの利
府立産業技術
saka.jp/ech
閲覧性の
示高速化
網の整備に加 モバイル環境 々な場所から うになりまし レットなどの ームページを ます。その一 い、人口密集 ターネット回 能低下やタイ 頻発するよう 仮想移動体通 アの定額料金 状況に適した 量の「節約」
ます。
ジにおける、
信量（データ ツの作成事例
在の状況 るためには、
つの記述言語 す。それらに れます。
リケーション より HTML
主要な仕様が れました。こ Scriptの組み な表現が実現 し、利用者の 3 に対応でき ージ開発者は 利用者向けに
術総合研究
hnic
の維持と ホーム
加 境 ら し の を 一 集 回 イ う 通 金 た
タ 例
語 に
ン L5 が こ み 現 の き は に
高 一 用 供 通
な 表 た で
が に
選 現 削
気 す
無 色 図 圧
究所 〒
cal
と通信量 ページの
高品質なホー 一方で、HT 用者に配慮し 供する努力が
通信量削減の １． CSSを
これまでの なく、また、
表示に差異が ため、ブラウ であっても画 られました。
が少なくとも になりました とで、これま 選択ボタンな 現できるよう 削減による応
２.画像の圧縮 画像データ 気づかないレ す。一例とし します。png 無償で使用が 色以下に減色 図2に産技研 圧縮した場合
図1．元画
図2．16
〒594-115
Sh
量の削減を の作成事
ームページコ TML5/CSS3
したホームペ が求められて
の実例 を用いたペー
のCSSは、デ 同じ指定で が生じること ウザ間の互換 画像を用いる しかし、現 もCSS2.1ま た。CSS2.1 まで画像ファ などを、CSS うになり、通 応答時間の短
縮
タ量削減の取 レベルで圧縮 してpngqua
gquant は B が可能で、PN 色しデータ量 研のロゴマー 合の結果を示
画像（24ビッ
色に減色し
57 和泉市あ
Phone：0heet
を両立し 事例
N
コンテンツを 非対応ブラ ページコンテ ています。
ージ作成 デザインの自 でもブラウザ とがありまし 換性を考慮し るケースが多 現在はブラウ までサポート の機能を活 ァイルで表現 SとHTML 通信回数やデ 短縮が期待で
取り組みとし 縮を行う方法 antコマンド BSDLicens NG形式の画 量を削減しま ークを16 色 示します。
ットカラー、
した画像（3.5
あゆみ野 2
0725-51-et
した
o.15001
を提供する ラウザの利 テンツを提
自由度が少 ザによって した。この し、「文字」
多く見受け ウザの大半 トするよう 活用するこ 現していた Lだけで表 データ量の できます。
して、人が 法がありま ドをご紹介 e2) の下、
画像を256 ます。図1、
色に不可逆
12KB）
5KB）
丁目 7 番 1 号
-2525この例では 1/3程度に削 うに減色に ゴマーク等
３.コンテン コンテン 度なインデ して可読性 ページ生成 れらのデー が可能にな びます。手 ールの一例 機能である す。これは 用が可能で ツは、図5 理のための 態で行い、サ 5）する、と
図4．
図5．m
４．CDNの CDN（コ ク）はJav
は、解像度を 削減すること による不可逆 等で特に効果
ンツのminif ンツ制作時は デントやコメ 性を高めます 成データとし ータを取り除 なります。こ 手軽にminify 例として、Go PageSpeed はApacheLic です。minify化
のとおり可 の編集作業は サーバに配置 といった運用
minify化前
minify化後の
の活用 コンテンツ・
vaScriptライ
作成者 顧 発行日
下げずにデー とができまし 逆圧縮は、色数 果を発揮します
fy化
、各種記述文 ント、空白行 す。しかし、こ
ては余分な情 除くことで通信
の手法をm y化の効果を oogle Chrom dInsightsを cense23) の下
化を行った後 読性が低下す minify化前 置する時にm 用を推奨しま
前のCSS例(
のCSS例（
デリバリ・
イブラリなど
顧客サービス 2015年6月
ータ量を約 した。このよ
数の少ないロ す。
文の中に、適 行などを挿入 これらはWe
情報です。こ 信量の削減 minify化と呼
を確認するツ me用の拡張 をご紹介しま 下、無償で利
後のコンテン するため、管 前（図4）の状 minify化（図 ます。
(5.8KB)
（4.5KB）
ネットワー どの外部読み
ス室 業務推 月17日
よ ロ
適 入 eb こ
呼 ツ 張 ま 利
ン 管 状 図
ー み
込 J 例
バ ア を イ 削 す た 性 は
を 必
ま
な サ よ に の
サ 運 な
た 助
1 2 3
推進課 西野
込みファイル JavaScript 例に挙げると 自サイトから バへの通信回 アントにおい をブラウザが イルが必要な 削減が期待で するファイル た場合、自サ 性があり、ま は、ホームペ といったリス を用いる場合 必要がありま
図6.jQuer 切
まとめ サーバの応 な方法として サーバソフ よる通信量の に基づく対応 の対応に比べ しかし、サー サーバ構成に 運用している う際には、設 なコストが発 トで手軽に試 た。これらの 助となれば幸
1) http://www.w 2) http://openso 3) http://www.a
野 淳 Phone
ルを高速に配 ライブラリの と、図6のよ らCDNへ変 回数を削減で いても、CD がキャッシュ なサイトを閲 できます。そ ルに悪意ある サイトの利用
また、CDN ページが正常 スクもありま 合、信頼のお ます。
ry等のライブ り替えた場合
応答性能を維 て、nginxな トウェアの導 の削減、とい 応が挙げられ べ、本事例の ーバをレンタ には関与でき るサーバの場 設定作業や安
発生します。
試行・実施で の事例が企業 幸いです。
w3.org/
urce.org/licens pache.org/licen
e:0725-51-2
配信するサー の一つである ように参照ラ 変更すること できます。ま DNが配信す
ュすることで 閲覧する際に その反面、C るコードが埋 用者が被害を
に障害が発 常に表示され ます。このた おける配信元
ブラリ配信を 合のイメージ
維持するため など動作が高
導入や、gz圧 いったサーバ れます。これ の効果は小さ タル利用して きません。ま 場合でも、構 安全性の再確 本稿では、
できる事例を 業における情
ses/bsd-license.p nses/LICENSE-
2698
ーバ群です。
るjQueryを ライブラリを とで、自サー また、クライ るファイル で、同じファ に、通信量の CDNが配信 埋め込まれ を受ける可能
生した場合 れなくなる、
ため、CDN 元を選択する
をCDNに ジ
めの効果的 高速なウェブ 圧縮の導入に バ構成の変更 れらサーバで さなものです ている場合、
また、自社で 構成変更を行 確認など様々 少ないコス を紹介しまし 情報発信の一
php -2.0
を を ー
の
能
ブ に 更 で す。
で 行
し 一
