Webページの容量上限を決めて制作していこうと決めた話

Webページの容量上限を決めて制作していこうと決めた話

最近は、有線LANに繋がっているデスクトップPCであろうが、Wifiなどの無線通信で利用するスマホやラップトップPC(ノートPC)であろうが、通信速度がとても速くなっています。

ここ最近はWebサイトの単ページ(1ページ毎)の容量を気にせずに、Webサイト全体単体のWebページ、最近はWebアプリに関しても、その総容量については気にしなくなっていました。

Webページの合計サイズを1,600KiB未満に抑える

Webページの合計サイズを1,600KiB未満に抑える

しかしながら、たまたま、Chorme Developers内にあるAvoid enormous network [1]というWebページの中に、日本語の翻訳で言うと「合計バイト サイズを 1,600 KiB [2]未満に抑えるようにしてください。」という文章がありました。

知ってしまうと気になるWebページの合計サイズ

さすがにChorme Developersの公式Webサイトで、ここまでハッキリ書いてあると、やはり気になるようになってしまいます。

更に言えば、これまで制作していた数多くの数十に及ぶWebサイトやブログサイトは、適当にWebページを選んで調査してみると1,600KiBを超えているページばかりです。

Googleのクローラーがダウンロード出来る限界はあるのか?

ところで、「合計バイト サイズを 1,600 KiB 未満に抑えるようにしてください。」とChorme Developers内で書かれていながらも、Googleのクローラーは、最大でどれくらいのWebページデータをダウンロードすることができるのでしょうか?

GoogleのJohn Mueller(ジョン・ミューラー)氏は、English Google Webmaster Central office-hours hangoutという動画内で発言しています。

ダウンロード出来るサイズには明らかに制限があります。10MBくらいあると思います。したがって、コンテンツが10MB以内にあれば、それを認識して検索に表示することができます。(YouTubeの翻訳をそのまま利用しています。)

English Google Webmaster Central office-hours hangout|YouTube

さすがに、単体ページで10MBを超えるWebページはありませんでしたが、センサーサイズや、複眼レンズによる部分は別として、結果として、最近のスマホで可能なデジタルカメラが持つ解像度は、1枚当たり数MBになりますし、一眼レフで撮影した写真などは、1枚で10MBを簡単に超えてしまいます。

万が一、Webサイトにアップする前に画像の圧縮を忘れれば、その写真1枚で10MBを越して、検索エンジンにとっては残念な結果になってしまいます。

筆者の場合、運営しているWebサイトには必ず、画像を自動で圧縮するプラグインのImagifyを導入しています。

1アカウントで、数十サイトにでも利用できるので重宝しています。

特に、複数人で運営しているWebサイトなどでは、大きな成果を発揮するプラグインです。

とはいえ、基本的にはSqooshというWebツールで画像の容量と、圧縮後の品質を確認しながら、事前に1枚ずつ圧縮してからWebサイトにアップしています。

ChatGPTのWebPilotツールを使用してWebサイトの内容を調査する場合でも関係してくる

ちなみに、ちょっと話がそれてしまいますが、自分のWebサイトを分析するときなどに、ChatGPTのプラグインによっても、単体のWebページで調査できる容量が決まっていることがあるようで、具体的な制限は明示されないのですが、非常に複雑なページの場合や単体ページの総容量が多い場合、一部の情報が欠落して認識される可能性等が有るようです。

実際に、筆者の運営するWebサイトで単体ページの容量を分類して調査にかけてみたら、確かに容量に応じて対応が変わったので驚きました。

Webページの容量上限を決めてリライトしながら軽量化していく

Webページの容量上限を決めてリライトしながら軽量化していく

筆者が運営するWebサイトは数十サイトに及び、さらに、当ブログ(ユニコブログ®)も含めたWebページの総数(中身のあるコンテンツページ)は2,600ページを超える量になるので、これはかなり大変な作業になります。

  • Webページ単体で容量を削減できる内容のもの
  • Webサイト全体に影響する内容のもの
  • CMSやプラグインを使用している限りコントロール出来ない部分

これらを分けて計画していきながら、軽量化を進めていかなければなりません、

一気にこれらを行うのはあまり現実的ではないので、日々、リライトをしていきながら、都度対応していくしかないかなと考えています。

Webサイト全体に影響するものは慎重に進めなければいけないし、必要だから導入したプラグインを、簡単にアンインストールするのも、これは中々難しい面があります。

これは、HTMLやCSSなどのベタ打ちではなく、WordPressというCMSを利用してWebサイト運営をしている宿命でもありますが、気になってしまった以上、Webサイト運営のポリシーとして、Webページの上限ルールは決めていくことにしました。

Webページの容量を決めているのは画像かCSSとJSなどの比率が高い

実際のところ、今後、単体のWebページを軽量化して行くに当たっては、このユニコブログ®の実例で考えてみると、以下の3点に絞られます。

  1. 使用する画像の圧縮率を上げるか使用枚数を減らす
  2. 画像を実写真画像からフラットデザインなどの容量が軽くて圧縮しやすいタイプにする
  3. プラグインやCSSカスタマイズの軽量化や容量を減らす

このブログは、そもそものWebデザインにおいてデザインパーツの要素が少ないので、実際にブログ記事を制作するときに関連する要素で軽量化を考えて行くしかないので、上記の3つくらいが効果のある軽量化作業にしかならないかもしれません。

Webページ単体の容量を減らしたいけど画像やWebサイトのデザインは気に入っている

個人的には、ブログ記事に関連する風景や世界の写真などでデザインするのが好きなので、中々難しいところです。

しかし、Googleの掲げる10の事実を再確認、ユーザーのためにを先頭に、速いほうが良い。

こう書かれていると、なんとか効率化しながらやっていくしかないですね。

早速、特化ブログによる同じテーマやジャンルを2つ作ってランキングとかにもどう影響が出るのか試してみます。

とはいえ、このブログ記事を書いている603記事目以降や、リライトが積み重なっていったときに、写真からイラストへ変わっていったときには…「あっ」と思っていただければ幸いです。

現状はWebページ単体の容量が年々上がっている

状はWebページ単体の容量が年々上がっている

昔から、HTTP ArchiveというWebサイトにState of the Web|HTTP Archiveという情報サイトがあり、多くのWebサイト情報から、単体のページ容量の統計データを公表しているサイトがあります。

これを見ていると、年々少しずつWebサイトの単体ページ容量は増えていっています。

しかしながら、「ページ単体の容量を1,600KiBまでにして作る」というルールにすれば、他のサイトに比べて容量自体はかなり少なくなるので、あとはWebブラウザへの読み込ませかたなど、その辺りをじっくり考えて行けば良いのかなという考えです。

Webページ単体を軽量化していくことも大事だけどコンテンツの質も大事

Webページの制作や、検索順位に関しては、例えばGoogleの検索エンジンであれば、あくまでもページのコンテンツに関してユーザーに役立つ内容になっているかを見ていると言うことなので、軽量化しつつも、このあたりは日々、ノウハウを積み上げていきながら諸々のスキルアップです。

検索エンジンのクローラーによってHTMlの容量に上限がある場合も

Google検索に限らず、その他の検索エンジンでもサイトスキャンやサイト監査の機能を利用すると、HTMLのサイズで警告[3]が出たりします。

Webページの単体サイズ全体だけではなくて、ここの要素についても、今後はテキストコンテンツの制作後には、Webページの総容量と各要素の容量についてどこまで軽量化できるか、少し意識を強くして行きたいところです。

最後まで読んでいただきありがとうございました。

Webページの容量上限を決めて制作していくときの脚注

  1. Avoid enormous network payloads|Chorme Developers (Published on Thursday, May 2, 2019 • Updated on Friday, May 29, 2020) ↩︎
  2. KiBとはKBという情報の大きさを表すときに使う用語です。KiBは例として2の10乗で1,024バイト、KBは10の3乗で1,000バイト、曖昧さ回避でIEC(国際電気標準会議)が決めた標準です。DVDなどの光ディスクでよく見かける違いでもあります。人間の場合は10進法で考えて4.7GB、コンピュータが計算するときは0か1の2進数なので4.38GBとなるイメージです。 ↩︎
  3. 例えばBingのサイトスキャンをするとHTMLのサイズが125KB以上になると警告が出たります ↩︎
ABOUT US
ユニコブログの執筆者である小林玲王奈のアイコン
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

放送業界や映画業界で映像制作や新規事業の立ち上げを中心に16年間働いて2019年に独立。2020年1月にユニコーンコンサルティング株式会社を設立しました。現在は、国内・海外向けのWebメディアを複数サイト運営しながら、経営コンサルタントとして数社の技術顧問、及び複数の教育機関で特別講義をおこなったり、Web講演をしています。|BBT経営塾(旧:大前経営塾)第10期生 卒塾

プロフィールの詳細は下記から確認できます。