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以上になると警告が出たります ↩︎

ユニコブログ®は
ConoHa WINGレンタルサーバーで
運営しています ^ᴗ . ᴗ ^

コノハウィングレンタルサーバー コノハウィングレンタルサーバー
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業に対して出資や資金調達などのサポートを中心に事業を行っていました。

現在は、主に自社のブログサイトを中心としたWebメディア運営、Webアプリの開発、LINEスタンプやLINE絵文字等の、2Dイラスト制作を中心にキャラクターデザインをして、そこから3DCGによるコンテンツ制作事業としてAR(拡張現実)やVR(仮想現実)向けのプラットフォームへコンテンツ提供を行っています。

公式ブログサイトのユニコブログ®では、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

主な経歴としては、2003年から放送及び映像業界向けの様々な新規事業立ち上げを15年以上担当していました。

2014年からは、会社員として働きながら経営/メディアコンサルティング業を開始して、2020年01月に法人化し、ユニコーンコンサルティング株式会社を設立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。

著書 : 『保存版 売上を向上させるためのYouTube活用術』

教育関連では複数の教育機関で定期的に講演を行っており、主な活動実績としては、2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演しました。

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら

ユニコーンコンサルティング®|公式Webサイト