容量を減らす：猫でもできるWordPressサイトの高速化05
次は、送信するデータの量を減らして行きましょう。データ量が少ない方が早い、というのは直感的に理解できることなので、取り組みやすいと思います。
Webサイトを構成するファイルには、次のようなものがあります。
・HTML
・CSS
・JavaScript
・PNG／JPEG／GIF
大別すると画像とそれ以外に分けることができます。よりわかりやすいと思われる、画像の容量削減から説明していきましょう。
画像の容量を小さくする一番簡単な方法は、画像の大きさを小さくすることです。640×640pxの画像よりも、160×160pxの画像の方が容量が小さいであろうことは簡単に想像できます。画像容量には画像の面積が影響するので、辺の長さを半分にすると容量は概ね4分の1になることも覚えておきましょう。
画像の容量には「解像度」も影響します。画面での表示を前提としている画像の解像度はおおむね72dpiですが、印刷用の画像やデジカメやスマホなどで撮影したままの画像では解像度が300dpiから350dpiであることがあります。これを適切な値に直すと、画像容量を大きく削減することができるでしょう。Photoshopのような画像加工編集ソフトウェアがあると便利ですが、Web上で解像度やサイズを変更してくれるサービスもありますので、うまく利用してください。
また、アイコンなどでは画像の代わりにアイコンフォントを使って軽量化する方法もよく行われます。ただし、使用しているアイコンの数が少ない場合には、逆に容量が増えてしまうこともあるので注意が必要です。アイコンフォントは拡大して使っても美しさを維持できるので便利ですね。
次に画像以外の容量削減です。最適化やミニファイ、コンプレスなどとよばれる過程で、改行やコメントが削除され、各種ファイルの軽量化が行われます。改行を取り除いたくらいでは大した変化がないように思いますが、長いコードを含むファイルであればあるほどその効果は覿面です。
コードの容量削減も、いわゆる黒い画面で処理する方法からブラウザ上で処理できるもの、あるいはWordPressであればプラグイン上で処理してくれるものもあります。あってはいけないことですが、これらの処理の結果、表示や挙動がおかしくなることは十分に考えられます。処理の後は制作時と同様、しっかりと検証することが大切です。