神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

google検索の順位でページの読み込み速度やモバイルフレンドリーが評価対象になるみたいで、オフスクリーン画像の延滞読み込み処理の必要性が今後、高まるかも

ほとんどのアクセスがスマホからで、年々、コンテンツも大容量化しているで、おそらく将来、オフスクーンの延滞読み込みの需要が高まるのでないかと思っております。

対応策として、オフスクリーン画像の延滞読み込み処理が効果的

画面で見えているページの先頭部分の範囲だけをまず最優先で表示させ、ユーザーのスクロール操作にて順次表示されるまだ見えていないページ後半部分の画像に関しては、スクロールされたタイミングにて、必要に応じて実際の画像データ読み込みの通信を行い、通信で使える帯域をまずは見えている画面の部分についてのみ優先的に通信して、残りは延滞させ、いかにもページ全体がすばやくロード完了したかのように体感的にみせかける手法、特に回線の細いスマホでは有効な処理です。

つまり擬似的にロード完了速度を高め、イライラ度を下げ、残りの記事を読むかどうかはユーザーに委ね、その判断基準になる最初に見えるページの先頭部分だけを最優先に表示させる。

これはある種、モバイルフレンドリーを提供する事であり、Google検索さんの評価になる可能性が高まってきました。ウェブに関する主な指標が新たに発表されており、将来、ページの読み込み速度やモバイルフレンドリーが評価対象になるみたいです。サーチコンソールにはもう既にモバイルユーザビリティなるものが実装されており、自分ブログの評価チェックが確認できます。

ということはですよ!googleはモバイルフレンドリーのページかどうかの情報は既に集めており、今後、利用する気満々じゃねーって感じす。

ほとんどのアクセスがスマホからで、年々、コンテンツも大容量化している

おそらく将来、オフスクーンの延滞読み込みの需要が高まるのでないかと、去年、はてなブログに実装可能か技術的な興味から試しに、当ブログに実装してみました。

まずは他のはてなブログさんで既に成功されているか、調べてみましたが、いませんでした。調べると実現にはいくつか問題がありまして、どうもそれが理由で断念されているみたいです。

という事で俄然やる気が出て参りまして、じゃ実現してみようって事で

こちらです。比較的簡単に完璧に実装できたのではと思います。

tommyoctopas.hatenablog.com

はてなブログで トップページを一覧形式で大量に表示しているテーマについても、サイムネイルをオフスクリーン画像の延滞読み込みできるバージョンも完成してまして、試験運用中ですが、近日公開いたします。

実は トップページのサムネイルは技術的な話しになりますが、imgタグではなくbackground-imageタグになっておりまして、この対応に苦慮しましたが、これも簡単な方法で突破できまして、最大50記事が一覧表示されることもあり、効果的面です。

ほかのブログサービスは対応が厳しそうな感じがしますが、はてなブログはモバイルユーザビリティ高いんじゃねって思います。

f:id:tommyoctopas:20200601145710j:plain

テーマがレスポンシブ対応になっていれば、モバイル専用デザインを使わなくても、はてなブログはPC向けデザインのままで、モバイルフレンドリーと認定されるようです。ただ弱点らしきのがありまして、はてなブログ側で組み込まれてるこの2つのjavaスクリプトが結構巨大でありまして、スマホ表示では、ほとんで使われてないと、google先生に指摘されてまして、こちらとしては改善したいけど、手が出せない、はてばブログシステムの領域でして、とほほな状況です。ただページの表示が12秒かかる訳ではなさそうで、悪いからといってスコアに影響は無いと注釈はされていますが・・・

f:id:tommyoctopas:20200601154528j:plain

あと考慮すべき部分としては

トップに表示されてるヘッダ画像とブログタイトルの部分でヘッダ画像は、できるだけ圧縮して小さいファイルサイズにておくこと、この部分は最初からオンスクリーンなので、読み込みパフォーマンスにもろ影響します。時々、巨大な画像ファイルを使われてるブログさん見掛けますが、のっけから、おっお重いブログになっちゃってます。

あと、せこい技ですが、このブログタイトル枠の高さを多めにとって、なるぺく以後のコンテンツがオフスクリーンになり易い状況化を作り出しておきます。僕はデバイスの高さの30%にしています。

画像もインパクトがあるやつの方が、実はメリットがありまして、一番最初に目に入る部分ですから、一瞬でも注目させて閲覧者のスクロール操作開始までの猶予時間を稼ぎ、ロード中のjavaのオンスクリーン処理の時間稼ぎが出来ることとなり、よりブログ側に有利に状況となる訳です。

ちなみに合わせて、モバイルユーザビリティに有効と思われるのが、はてなブログSNS共有ボタンです。これはどうも別のもに交換した方がよさそうです。はてなブログのものを使うと、モバイルでは表示まで結構時間かかってまして、現状では記事下のみがいいと思います。上下共に表示する設定だと、はてなブログのものだと、ダブルパンチで時間を食ってまして、表示の安定性の評価ではマイナスポイントになる可能性ありです。この辺りは、検索するれば、いくらでも代替案の記事がありますので、お好みのやつを実装してみては如何でしょうか

さらにトリッキーな事を最後に追記しておきますと、サイドバーに設定できる注目記事のパーツ、これがページロード完了に影響を及ぼしてまして、このパーツだけロードが遅いのですよ、これもはてなブログ側の処理なので、ロードまで待つしかなく、オフスクリーン画像処理に補足されない可能性があり、ちょい困ったって感じでして、僕はこのパーツを、あえて使うのを止めています。

まとめ

google先生スマホに好かれるには、ブログ記事の画像ファイルは、できるだけ圧縮して小さく、そして大量に掲載する場合は、オフスクリーン画像の延滞読み込み処理にてモバイルフレンドリーにしておきましょうね!いいことあるかもよ!って話しです。

ではでは