サイト構成改定と涙ぐましい高速化の試み

⚠︎ ページの作成日を確認のうえご覧ください。
内容が古くなっている場合があります。

日頃のご愛顧ありがとうございます。ここをご覧になられている方は[https://pixel-gallery.xyz]に居るわけですが、私の作品をご覧になったり購入されたりする方は[https://pixel-gallery.net/Photo]に足を伸ばされ訪問されているはずです。2020年1月28日 pixel-gallery.xyzとpixel-gallery.netの構成を変更しました。

これまでギャラリー(pixel-gallery.net)はhttps://pixel-gallery.net/Photoのみでしたが、作品一覧を見る必要がない場合への対処もしくはエントランス機能としてhttps://pixel-gallery.netへのアクセスが可能になりました。

──────────

挨拶はこれくらいにして、ここからは技術的な話をしようと思う。

なにをしたか、だ。

WEBページの歴史はテキストのみ、テキストと画像(メディア)、レイアウトの複雑化と進み、ページごとファイルを用意していた静的ページの時代から、ページを構成するパーツをデータベースに保存して閲覧者の要求に応えるたびページを組み立てる動的ページの時代へ移行した。

ちなみにここhttps://pixel-gallery.xyzとhttps://pixel-gallery.net/Photoは動的ページで、記事ひとつにいくつものパーツを必要に応じて呼び出し組み立てたのちに、みなさんのブラウザへ送り出している。

なぜ動的に組み立てて送り出しているのかといえば、パーツ単位で作成、更新、変更したほうが管理が容易であるし、パーツはそのままで模様替えすることも可能で作り手、送り出し手として便利このうえないからだ。

もしこのページをひとつのファイルとしてつくると、本文は別として↑や→や↓の要素を変える必要が出たり、デザインを調整したり変えたりするたび、このページ以外の何百ページもあるコンテンツすべて書き換えなければならない。

本文だって、すべての記事をまたいで脱字や誤記を修正したり表記の統一をかけたりするには動的ページのほうがたやすい。

みなさんの側に立つと、見やすさ、いろいろな情報へのアクセスのしやすさなどを実現するため編集されたコンテンツとして、それぞれの要素を改良し向上させやすいというメリットがあるかもしれない。

ただ動的ページの最大の問題は、パーツをデータベースから呼び出して、組み立てて、送り出すことから、最初からひとつのファイルにまとめられている静的ページより読み込みに時間がかかる点だ。

このため動的ページでは一度組み立てたコンテンツを、そのまんま静的にページ=ひとつのファイルとして保存して、次に来た人にこれを見せる(送り出す)方法を採用することがありこれをキャッシュを使うと呼んでいる。https://pixel-gallery.xyzとhttps://pixel-gallery.net/Photoはキャッシュを使用して、すこしでも速い読み込みを実現させようとしている。

ところが、ギャラリーサイト(pixel-gallery.net)側は画像サイズが大きく画質劣化が少ない容量が大きいファイルをたくさん使用しなければならない。

以前にも書いたが、デスクトップPC、ノートPC、タブレット、スマートフォンいずれもディスプレイがのきなみ高精細化し、いわゆるRetinaディスプレイ化したことで、表示されるサイズの2倍(面積で4倍)大きい画像でないと表示がボケボケになるようになった。こうなると画像の容量は増えるいっぽうだ。

すべてのブラウザで表示可能ではないけれど、画像ファイルJPEGより圧縮率を高めても画像劣化が目立ちにくいWebPという画像形式があり、表示できるブラウザへは容量が小さいWebP画像を当サイトとギャラリーサイトは送り出すようにしている。

画像の容量が小さければ、回線をダウンロードさせるのに必要な時間が少なくてすむ。記事のテキストよりレイアウトの指定より、圧倒的に容量を食うのが画像なので50〜80%の減量ができるなら表示までの待ち時間が格段に減ると言える。

でも、これでも不十分なのだった。

動的に組み立てて送り出すのは、あれこれあれこれ手間がかかって時間がかかる。

1.送り出すデータから余計な改行などとっぱらう。改行されているのは人間が書いたり読んだりするためでブラウザにとっては必要ないものだ。
2.データを送り出すときGzip圧縮してデータの容量を小さくしてブラウザで解凍させる。
3.サーバーにキャッシュをつくり、この静的なページを読み込むようにさせる。
4.プロキシを通過する閲覧者には、プロキシに画像やフォントをキャッシュさせ、これを使って閲覧できるようにさせる。
5.閲覧者のブラウザにもキャッシュを残すようにして、アクセスのたび変更点がないのに再読み込みしないで済むようにさせる。
6.キャッシュの閲覧履歴をブラウザと確認しあう手間のうち、使う必要のない確認は廃止する。
7.閲覧のためサーバーを訪ねてきた閲覧者を、いちいちひとつの要求ごと接続を切ることなく、しばらくはずっと繋がっているようにふるまう。あらたな接続要求と接続を繰り返す無駄を省く。

などなど、やれることはほとんどやった。

それでも気になるので、https://pixel-gallery.net/で表示されるページとhttps://pixel-gallery.net/Photoを別個のものにした。

ギャラリー https://pixel-gallery.net/Photo は画像を一覧表示したり、作品を個別に見たり、私に問い合わせをしたりオーダーしたりと様々な要求に応えるページだ。このため作品を更新したり、エディションすべて完売した作品を引き上げたり、その他の作業をするうえでも動的ページである必要があり、閲覧者にとってもメリットがある。

動的ページはやれることをやり尽くしても静的ページよりどうしても表示までの速度が劣る。そこでギャラリーの玄関というかエントランスは静的なページにして、これがhttps://pixel-gallery.net/だ。

大企業の通販サイトのように常時たくさんの人が訪ねてきて売り上げ規模も莫大なら回線・サーバー・その他技術を高度なものにでき、数千人から数万人がアクセスし操作しても万全なサイトがつくれるだろう。

ところが経費が私のお財布から出ている上記2サイトには限界があり、お客さんがたくさんアクセスしているときや、たまたまキャッシュを書き換えているときは読み込み遅くなったり一瞬止まったような印象になる。

こんなときでも、データベースを参照する必要がなく、サーバーに処理をいちいち命じる必要がない静的ページはすらすら読み込めるのだった。しかも前記した動的ページ高速化のうち、サーバー側に静的ページをつくる以外の方法はこちらでも採用している。WebPが表示できるブラウザへはJpegの代わりにWebPを送り出してもいる。

──────────

ということで、昔ながらの静的なHTMLファイルはサクサク表示されるのだった。

このページがいくら速くても作品一覧等がいままでよりスムースになるだけでは意味がないだろうと言われそうだし、その通りでもある。

それでも入り口が速いメリットを感じる方もいるかもしれないし、アクセス数と利用状況しだいでは時代と逆行しかねないが静的なページに機能を移してもよいかなと思っている。

© Fumihiro Kato.
Unauthorized copying and replication of the contents of this site, text and images are strictly prohibited. All Rights Reserved.

・スタジオ助手、写真家として活動の後、広告代理店に入社。 ・2000年代初頭の休止期間を除き写真家として活動。(本名名義のほかHiro.K名義他) ・広告代理店、広告制作会社勤務を経てフリー。 ・不二家CI、サントリークォータリー企画、取材 ・Life and Beuty SUNTORY MUSEUM OF ART 【サントリー美術館の軌跡と未来】、日野自動車東京モーターショー企業広告 武田薬品工業広告 ・アウトレットモール広告、各種イベント、TV放送宣材 ・MIT Museum 収蔵品撮影 他。 ・歌劇 Takarazuka revue ・月刊IJ創刊、編集企画、取材、雑誌連載、コラム、他。 ・長編小説「厨師流浪」(日本経済新聞社)で作家デビュー。「花開富貴」「電光の男」(文藝春秋)その他。 ・小説のほか、エッセイ等を執筆・発表。 ・獅子文六研究。 ・インタビュー & ポートレイト誌「月刊 IJ」を企画し英知出版より創刊。同誌の企画、編集、取材、執筆、エッセイに携わる。 ・「静謐なる人生展」 ・写真集「HUMIDITY」他
投稿を作成しました 532

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る