画像が多いサイトの読み込みを早くするタグを見つけた

webの話。しかも見る方じゃなくて開発の話。

最近またHTMLをいろいろいじり始めてるんですが、画像が多いページの読み込みがなかなか終わらないのが気になってたんですね。
例えばサークルサイト。画像をたくさんロードするんですよ。今数えたら91枚ありました。あとKTさん保管庫なんかも最近いじりはじめてて、100枚単位で画像を並べるサイトなのでこちらも多かったり。
で、真偽はあいまいなんですが、最新じゃないHTTPは画像のロードが同時に2つまでしかできないらしく、画像の容量じゃなくて画像の数で読み込みが遅くなるっぽいんです。そういえばアマゾンとかツイッターのUI画像って1つにまとめられててるけどそういう意味だったのか。
なんかの情報によると、アクセスしてから3秒で表示されないと見に来た人は帰っちゃうらしいです。うちはもうちょっと待つけど3秒で帰る気持ちも分かる。対策できないかなぁ。

と、調べてたらimgタグとかにloading=”lazy”って書くとスクロールするまで(?)ロードをしないでいてくれるらしいです。
例えばimgタグで使うならこんな感じ。

<img src="image.jpg" loading="lazy">

なんかのスクリプトをロードしたりせずこれだけで読み込みタイミングを変えられるとのこと。すごいな。
てことで先述のサークルサイトで実際に試してみました。

まずloading=”lazy”を挿入する前のロード時間。

一番下のピンクの文字が最初のロード時間で、2.64秒だそうです。3秒よりは短いとはいえ、すぐ出てくると思ったものが2.6秒でないのは待たされた感じになっちゃうだろうなぁ。

つづいて、これまで参加したイベント(ページの下の方)のバナーにloading=”lazy”を付与した場合。

1.78秒! 1秒短縮できました! おー、こんだけの手間で30%ロードが短縮するなんて!
さらに、「これまで参加したイベント」のタイトル画像とか、在庫状況の画像にもloading=”lazy”を付けたところ——

1.57秒! 40%の短縮です。体感的にも確実に早くなった!
全部の画像に付けてもいいんですけど、それはそれでスクロールしたときにしんどそうだし、最初にばっと表示される画像は普通に読み込んでおくのかなーと思いここまでにしました。

いやほんと導入難易度の低さに反して効果が大きくて驚いた。
KTさん保管庫の改装もそうだし、てこまいのイラストページも画像が多くて遅いのですぐに適用したいなーと。

これ見てる人でこっち側の人がどれだけいるのか分かんないですが(=これ見てる人がどれだけいるのか分かんないですが)、よかったら試してみてくださいねー

更新履歴240101・2023年総括

ましてでとうしもしく! (←天邪鬼
2023年はサイトの更新回数3回、ブログの更新回数4回、しかもいずれも上半期だけで、5/18以降の6ヶ月半程度は一切更新がなかったという状態でした。こんなことでいいのだろうか、いやよくない(反語表現

なんて話は一旦おいといて更新履歴です。

いつものILLUST更新ですね。更新はしてなくても絵はそれなりに描いてたのでストックはまあまあ潤沢だったんですよ。
いつもだと更新頻度を上げるために小出しにしてたんですが、2023年下半期があの有様だったので一気に4枚追加した次第です。
それでも今回アップした絵が2023年1月という。「一気に」とは言うもののまだまだストックはあるので小出しにしていきたいなぁ、と思うのは自由ですし…?(予防線

内訳はワンドロ絵3枚と去年の年賀状絵1枚ですねー。このタイミングの更新で今年じゃないという…。
それぞれの絵のことはそれぞれのページで語ってるので見てもらえたらなってところなんですが、前回更新のチルノと椛のワンドロや、今回更新のサニーと諏訪子のワンドロ、Twitterから結構描き直してたりします。
ワンドロ絵は1時間程度(大抵1.5時間)で仕上げてるもので、微妙に感じてもそのまま完成にさせちゃうことがまあまああります。特にこの2年ぐらい絵を描く量が減っちゃった+他人の絵の構図をまねてるので構図の難易度が高いなどあり、ワンドロの時間内で問題に気づきつつ後戻りできず公開ってのが増えてるのかなーなんて。
Twitterの絵はアカウントが無くならない限り残るし、サイトに載せるものが同じである必要もないし、せっかくだからいい感じに直して載せたいってことで積極的に手を加えてたり。
ワンドロの場合、当時のTwitterのリンクも必ず付けてるんで、見比べてもらったら楽しいかも。

それにしても、いくつか前の更新でILLUSTページを分割したとはいえ、初期表示のページに52枚のイラストがあるわけで。多いよなぁ。
今は2015年以前かその後かで分けてるわけだけど、この分け方だと当然その後の画像がどんどん増えてくるから何か考えないといけない。
──いや多くて困るのかっていうと困らないとは思うんだけど、ただ更新順だけで散漫に画像を並べるのも芸が無いなと思い始めてたり。

もう更新を休んでからの方が長くなっちゃったけど、KTさん保管庫ってサイトも維持してまして、そこはKTさんって人が描いた1000枚ぐらいの絵を並べてるサイトなんですが、画像検索機能があるんすよね。キーワードで検索すると関連する画像が出てくるっていうgoogle画像検索みたいなやつ。2006年から順次検索に対応させてて半分ぐらいタグ情報を入力した段階で休止しちゃったんだけど。
実は開始はgoogle画像検索の普及とほぼ同じ時期だったり、ニコニコ動画よりも開始が早かったり、文字化できない情報を文字で検索させる分野ではまあまあ先進的なことをしてたと自負してます。
──なんてのはいいんだけど、つまるところてこまいでも画像検索を導入して「椛の絵だけ見たい」「東方以外の絵ってあるのか」みたいな、見る人が見たい絵を抽出できる機能があった方がいいのかなーなんて。
まぁそう思ったところでまず、もっと絵描け、もっと更新しろ、描いてる漫画完成させろってのが本来の大前提なわけで、あまり積極的には取り組まないと思うけどね。はい以上、心境の報告でした。

あとインデックス絵を更新しました。辰年ですもん。ドラコケンタウロス。紅美鈴とか八千慧ではなく、コンコレのオリキャラでもなく。まぁ最初に浮かんだ辰キャラだったんで。
ちなみにTwitterには東方の年賀イラストも載せました。

年末は仕事も年賀絵も全てに集中できず、散漫に何も進まない状態で、それぞれ構想込みで1日ずつぐらいで年を越してしまいました。もうちょっと力みたかったんだけどなぁ。リアル年賀状が偶然全員喪中だったのでその分はりきって描けると思ってたんだけどなぁ。

更新はこんなもんですが、さてタイトルのとおり2023総括。
コロナ態勢が5月GW明けに解除になっていろいろ元通りになっていったりしたけど、うちんちに関しては、去年の年始に祖母が謎の腰痛で動けなくなり、ふとんから起き上がるのも1時間かかるみたいな状況に突然なったところから始まり、のちほどそれは加齢による疲労骨折と分かって、大事には至らず緩やかに回復してはいるものの、ひとりでなんでもできた人だった祖母が、急に介護が必要な人になったっていういろんなショックにさいなまれることになりました。
祖母がしてた洗濯が他の人の仕事にシフトし、暖かくなるまでぐらいは布団から出られず、ついこの間まで一人で風呂に入れず、外出は未だ一人ではできず、多くを母様がしてるというフラストレーションで、仕事から帰ると家はすごく険悪みたいな日があったり。徐々に減ってきてはいるけど。
月〜金、遊びに行ってるわけじゃないけど、仕事してきてるんだけど、家で増えてる負担や軋轢とは線が引けている立場(いないんで誰かからあらすじを聞かないと状況が分からないって意味ね)として、休みぐらいは家にいようとか、みんなの話はちゃんと聴かないとなとか、一人で好きにできる人生の終わりを強く感じた一年でした。子供ができたとか、そういう前向きなイベントでそういうのを感じたかったなぁ…

コロナ中に引きこもってたんで体力が無くなってて、ちょっと職場以外の所に出かけるだけでへろへろに疲れるようになってたのに気づいたのも今年だった。先述のような状態なので休みの日に旅行に行く体力ってのも必要ないといえば必要ないんだけどね。
ということで、悲しさと無力さと愛しさと切なさと心強さと…を感じる1年でした。最後の3つは感じてないね。部屋とTシャt(違う

あとコロナ明けで、ここ数年にはなく人間関係が少し広がりました。まーそもそもここ数年ゼロだったんで広がった程度も全然なんだけど。
職場の人のお気に入りの飲み屋で知り合いにはならなかったけど常連客と話ししたりとかとか。うーんこの程度で広がったなんていっちゃうと、思えば社会人なりたての頃の研修とか同人イベントで会った人とか、あの頃はいろんな人と話してたな。小さくおさまっちゃったもんだなよんちくん。

まだまだ書いてる途中だけど今年も「この映画を見た2023」をアップする予定で、去年は12本映画見に行ったんですよ! これまで最多!
物語の感動はインプットはしてるつもりなんで、なにかしら創作方面でアウトプットしたい。サイトの更新は途切れてるけど、Twitterのイラストも全然増えないけど、創作のやる気は衰えてないつもりだから…!
てことで、2024年、どうなるかな…?! よろですー!