GoogleBloggerを使ったウェブサイト構築で、
いくつかのページで画像が表示されないという、不具合報告がありました。
四国の片隅にある小さな会社で、ITが苦手で、各種のコンサルティングも兼ねて、以前からお付き合いしている会社さんだったので、なるべく丁寧に対応したいんですよね。
でも、自分の環境から、報告のあったページを見ても、問題なく表示されます。
トラブル対応って大体こんな感じから始まるんですよね。
ということで、この
不具合報告から、原因究明、対応完了までの工程をブログに残しておきたいと思います。
再現確認
とりあえず、先方の会社で、問い合わせの担当者の方だけでなく、ほかの従業員の方も全員、
ページ内の画像が表示されないという風に言われたのですが、
こちらが見ても、何の問題もない事から、初回は先方の環境を疑いました。
ページが表示されずに、画像のみが表示されないので、
サーバーのトラブルではないという風に考えました。
そこで、先方の会社のパソコンなどにインストールしている、ウィルス対策のソフトウェアを確認しましたが、各自のスマートフォンでも同じ症状が出ているとのことで、これは除外しました。
同時に、ブラウザの拡張機能の疑いも排除。
次に、ネットの回線速度による、
読み込み遅延でのパケットロスを考えてみて、自分の使っているブラウザのデバッグ機能を使って、ネットワークの速度を4G slowぐらいにしてみたら、画像数が多いので、確かにページの読み込みは遅いが、画像が表示されないということはありませんでした。
ブラウザで手軽にできる「回線速度チェック」を試してもらったら、その会社環境で150MB/sぐらいでていたので、もはや、ウチの環境よりも速度が出ていて、この点も除外。
ちなみに、東京にあるウチの環境はNTT光を使っているんだが、混み合うときは1MBも出ないというひどい有様で、NTTに問い合わせると、プロバイダに調べてもらえと言うし、プロバイダーに問い合わせると、回線に問題があるのではと、アホな回答をもらったので、もはやこれらは信頼に足らず、starlinkを導入してしまいました。
原因判明
とりあえず、原因がわからない状態ですが、
画像のサイズを小さくして対応してみることにしました。
Blogger内で独自にjavascriptでコードを埋め込んで、サイト設定された画像を自動的に表示するようにしているので、画像サイズを変更するには、Bloggerの画像のURLで値を切り替えることで自動に対応されるという便利な仕組みになっています。
現在、画像の幅が400pxのモノを、300pxに変換してみました。
すると、なんと、画像が読み込まれない現象が、
自分の環境でも再現されるようになりました。
現象が再現できたら、原因統計まではこちらで確認できるので、ひたすら思考を繰り返して、
トライアンドエラーの繰り返しです。
そして行き着いた
原因は、GoogleのCDNでした。
これは、おそらくですが、こちらの推測も入りますが…CDNは、基本的にキャッシュされた画像や、コードファイルを配信するので、CDNのどのサーバーを見に行くのはガチャ的要素があります。
おそらく、東京の自分と、四国のその会社では、CDNのキャッシュサーバーが違っていたんでしょうね。
そして、新たに画像のURLを更新したため、こちらでもCDNの接続時の同時タイミングでこちらの環境でもCDNが、アクセスエラーを吐いたのだと思われます。
対応方法
この事象の対応をするには、画像の遅延読み込みをすればいいけど思ったのですが、Bloggerの「遅延読み込み設定」をONにするだけでは、まるで解決しませんでした。
ブラウザコンソールには大量の読み込みエラーが出ている状態です。
全てがCDNサーバーのエラーであることも確認できました。
そこで、ようやく、本当の原因が見えてきました。
GoogleBloggerのFeed機能を使って、コンテンツページの情報を読み込み、そこから、画像や文章などを取得している仕様で、文章取得の時に、一度仮想DOMに変換して、HTMLを取得するという内容でやっていたのですが、これをやることで、IMGタグが実行された状態になります。
その後、その処理で取得したデータでIMGタグを生成していたため、表示画像数の倍のコネクションが発生していました。
まさに、これはサーバー側のプログラムの問題でした。
画像取得の場合と、ページ情報の取得でモードを切り分けて、そのページでは画像を取得するだけが目的だったので、仮想DOMの処理をすっ飛ばすように条件を加えてみたところ、CDN拒絶は無くなりました。
念の為、画像も一度にIMGタグに貼るのではなく、1枚ずつ画像読み込みが完了(onloadイベント発火）したら次の画像・・・という風な、再帰処理を追加して、今後画像がもっと爆発的に増えても大丈夫なように改修しておきました。
あとがき
今回の件は、数年前に公開していたWebサイトで、ページ内にその会社の製品を一覧でけいさいするという内容だったのですが、商品数が増えて画像が多くなって初めて発動する時限式不具合でした。
ページ構築当初は、普通に見えてしまうので、問題ないと思っていても、こうした後から発生する不具合対応も、Webページの運用における重要な対応案件ですね。
こうした事例を踏まえて、BloggerWebサイトがまた堅牢になってしまいました。
ありがとう！クライアントさん！
0 件のコメント:
コメントを投稿