ブログのアクセス速度改善策
seesaaブログのアクセス速度に特段の不満はありませんが、設定によってはアクセス速度が大幅に落ちることがあります。
例えば、「最近の記事」の表示件数は、デフォルトでは10件なのですが、当ブログのように200件以上（PC版右側表示の「ブログ全記事（新着順）」部分です）も表示させると、当たり前のことですが読み込みに時間がかかり、アクセス速度は大幅に落ちてしまいます。
ほとんどのブログユーザーはそんな設定にはしていないと思われますが、So-net（ssブログ）からの移転組である当ブログでは、旧記事への Google検索表示も含めてブログへのアクセス手段が限られてしまったため、サムネイル付きのブログメニューは、できるだけ件数を増やしたいとの思いで、結局全記事を表示させる設定としておりました。
その代償としてアクセス速度が大幅に遅くなるのは仕方ないと諦めていたのですが、HTMLの編集で大幅に改善させることができたので、備忘録として書き残しておくこととします。
もし、同様のことでお悩みの方がおられましたら、簡単な設定と記述変更で大幅な速度改善が期待できますので、以下お試しのほどを。^^
「最近の記事」表示件数を大幅に増やしても、さほどアクセス速度を落とさない方法
「最近の記事」の表示件数は無制限に増やすことができるようになっていますが、各記事から画像を読み込んで表示させる必要があるため、表示件数を増やせば増やすほど読み込みに時間がかかり、ページ表示までのアクセス時間が長くかかるようになります。
200件以上表示している当ブログは、当初、光回線の我が家のパソコンで10秒近くかかることがありました。
本文ページの画像の読み込み速度を上げる設定としては、「画像遅延読み込み」という設定があり、有効にしておけばページ表示が優先され、後から適宜画像を読み込ませるという高速化手段があるのですが、その機能は本文のみに有効で、「最近の記事」の画像の読み込みには適用されないんですよね。
で、公開された HTML記述をよく見てみると、「画像遅延読み込み」が有効の場合、画像の読み込み部分に data-src という記述があるのを見つけたんですよ。（ちなみに、記事投稿画面には表示されません。CMSによって公開時に生成されるようです）
通常の画像読み込みは単に src とするところが、data-src となってるんですね。これは「画像遅延読み込み」script である「lazyloading.js」が使用する記述のようで、「最近の記事」の記述部分も data-src に書き換えれば、ページ全体で「画像遅延読み込み」が機能するようになるのではないかと考えました。
変更箇所は下記の2箇所。↓
src を data-src に書き換えると、想定通り機能しました。ページの読み込み速度が改善されます。
まぁ、最初にページを読み込む際には、CMS が HTMLコードを生成するために若干時間がかかってしまいますが（ここは残念ながらアキレス腱）、キャッシュとの相乗効果もあり、以降のページ遷移は圧倒的に速くなります。（是非ブログ内サーフィンでお確かめください）
「最近の記事」表示件数を大幅に増やしたいとお考えで ご興味ある方はお試しください。「画像遅延読み込み」は「設定」ページで、「最近の記事」は「デザイン」ページの「コンテンツ＞最近の記事＞設定アイコン＞コンテンツHTML編集」で設定を変更します。
なお、data-src に書き換えたままで「画像遅延読み込み」を無効にすると画像が読み込みできなくなるため、書き換えた場合は「有効」必須です。
大きな画像の大量読み込みをプログレッシブ化で高速にする方法
通常、ブログの標準的な画像サイズに640px程度が多いのは表示速度を優先させてきた歴史があるからと思われますが、最近では通信速度も高速安定化しているため、1000px以上のサイズも普通に用いられるようになってきていると思われます。
しかし、FullHD規格の1920pxサイズの画像を何十枚、何百枚と使用する場合は、さすがにページ表示が遅くなり現実的ではありません。先の「画像遅延読み込み」を使用すれば、大幅に改善はされますが、デフォルトの仕様では大きな loading イメージが表示されるためスマートではありませんし、 loading イメージに対してはサイズが記述されないため、アンカーJump の jQuery を使用すると移動先がずれるなどの弊害もありました。
（ちなみに、loading イメージに関する記述も記事投稿画面には表示されません。CMSによって公開時に生成されるようです）
で、対策として loading イメージの替わりに、当該画像のサムネイルを読み込ませる記述に変更しようと考えました。
これによりページ全体とサムネイル画像が先に表示され、知らぬ間に高解像画像に置き換わりますのでプログレッシブJPEGのように高速に表示できるようになります。
具体的には下記の通り。
変更前の記述：デフォルトで画像を配置した時の状態
<a href="1920px画像の場所" target="_blank"><img border="0" alt="" src="サムネイルの場所" width="640" height="420"></a>
変更後：src に加え、data-src を追加
<a href="1920px画像の場所" target="_blank"><img border="0" alt="" src="サムネイルの場所" width="1920" data-src="1920px画像の場所"/></a>
この記述に書き換えることで、大きな画像の点数が大幅に増えても高速表示が可能になります。
ただし、設定画面で「画像遅延読み込み」が有効になっていると、CMS が loading イメージを挿入するように記述を変更してしまいますので、「画像遅延読み込み」は無効にしておきます。けれども「画像遅延読み込み」スクリプト自体は利用する必要があるため、本文の冒頭部分にでも下記の記述を追加します。（デザイン＞HTML編集のヘッダ部分に記述しても PCのみ対応で、スマホには対応しないようです）
<script src="https://blog.seesaa.jp/contents/js/lazyloading.js" id="lazyloadingjs"></script>
この1行を追加しておくだけで「画像遅延読み込み」スクリプトが機能します。そして loading イメージは挿入されません。
このようにして作成したのが「大画面対応フォトブログ （aspect-photo）」です。ブラウザのウインドウをモニタの横幅いっぱいまで広げれば、大きな画像のままでスクロール閲覧が可能です。
大量の大きな画像が、高速アクセスでストレスなく表示されると思います。 ※回線が混み合っているなど通信速度が遅い場合はその限りではございません m(_ _)m
他にもスタイルシートの変更なども必要になりますので、下記ご参考までに。
当記事は、seesaa ブログに標準装備されている lazyloading.js を利用し、一部コードを書き換えるなどして簡単に実現するアクセス速度改善策の一例として書いてみました。
このような機能が標準で用意されていないブログや、ホームページの場合でも、同様の対策はいろいろな方法で取れるようです。「画像遅延読み込み」で検索するか、AI に尋ねてみるのも良いかもしれませんね。^^
例えば、「最近の記事」の表示件数は、デフォルトでは10件なのですが、当ブログのように200件以上（PC版右側表示の「ブログ全記事（新着順）」部分です）も表示させると、当たり前のことですが読み込みに時間がかかり、アクセス速度は大幅に落ちてしまいます。
ほとんどのブログユーザーはそんな設定にはしていないと思われますが、So-net（ssブログ）からの移転組である当ブログでは、旧記事への Google検索表示も含めてブログへのアクセス手段が限られてしまったため、サムネイル付きのブログメニューは、できるだけ件数を増やしたいとの思いで、結局全記事を表示させる設定としておりました。
その代償としてアクセス速度が大幅に遅くなるのは仕方ないと諦めていたのですが、HTMLの編集で大幅に改善させることができたので、備忘録として書き残しておくこととします。
もし、同様のことでお悩みの方がおられましたら、簡単な設定と記述変更で大幅な速度改善が期待できますので、以下お試しのほどを。^^
「最近の記事」表示件数を大幅に増やしても、さほどアクセス速度を落とさない方法
「最近の記事」の表示件数は無制限に増やすことができるようになっていますが、各記事から画像を読み込んで表示させる必要があるため、表示件数を増やせば増やすほど読み込みに時間がかかり、ページ表示までのアクセス時間が長くかかるようになります。
200件以上表示している当ブログは、当初、光回線の我が家のパソコンで10秒近くかかることがありました。
本文ページの画像の読み込み速度を上げる設定としては、「画像遅延読み込み」という設定があり、有効にしておけばページ表示が優先され、後から適宜画像を読み込ませるという高速化手段があるのですが、その機能は本文のみに有効で、「最近の記事」の画像の読み込みには適用されないんですよね。
で、公開された HTML記述をよく見てみると、「画像遅延読み込み」が有効の場合、画像の読み込み部分に data-src という記述があるのを見つけたんですよ。（ちなみに、記事投稿画面には表示されません。CMSによって公開時に生成されるようです）
通常の画像読み込みは単に src とするところが、data-src となってるんですね。これは「画像遅延読み込み」script である「lazyloading.js」が使用する記述のようで、「最近の記事」の記述部分も data-src に書き換えれば、ページ全体で「画像遅延読み込み」が機能するようになるのではないかと考えました。
変更箇所は下記の2箇所。↓
src を data-src に書き換えると、想定通り機能しました。ページの読み込み速度が改善されます。
まぁ、最初にページを読み込む際には、CMS が HTMLコードを生成するために若干時間がかかってしまいますが（ここは残念ながらアキレス腱）、キャッシュとの相乗効果もあり、以降のページ遷移は圧倒的に速くなります。（是非ブログ内サーフィンでお確かめください）
「最近の記事」表示件数を大幅に増やしたいとお考えで ご興味ある方はお試しください。「画像遅延読み込み」は「設定」ページで、「最近の記事」は「デザイン」ページの「コンテンツ＞最近の記事＞設定アイコン＞コンテンツHTML編集」で設定を変更します。
なお、data-src に書き換えたままで「画像遅延読み込み」を無効にすると画像が読み込みできなくなるため、書き換えた場合は「有効」必須です。
大きな画像の大量読み込みをプログレッシブ化で高速にする方法
通常、ブログの標準的な画像サイズに640px程度が多いのは表示速度を優先させてきた歴史があるからと思われますが、最近では通信速度も高速安定化しているため、1000px以上のサイズも普通に用いられるようになってきていると思われます。
しかし、FullHD規格の1920pxサイズの画像を何十枚、何百枚と使用する場合は、さすがにページ表示が遅くなり現実的ではありません。先の「画像遅延読み込み」を使用すれば、大幅に改善はされますが、デフォルトの仕様では大きな loading イメージが表示されるためスマートではありませんし、 loading イメージに対してはサイズが記述されないため、アンカーJump の jQuery を使用すると移動先がずれるなどの弊害もありました。
（ちなみに、loading イメージに関する記述も記事投稿画面には表示されません。CMSによって公開時に生成されるようです）
で、対策として loading イメージの替わりに、当該画像のサムネイルを読み込ませる記述に変更しようと考えました。
これによりページ全体とサムネイル画像が先に表示され、知らぬ間に高解像画像に置き換わりますのでプログレッシブJPEGのように高速に表示できるようになります。
具体的には下記の通り。
変更前の記述：デフォルトで画像を配置した時の状態
<a href="1920px画像の場所" target="_blank"><img border="0" alt="" src="サムネイルの場所" width="640" height="420"></a>
変更後：src に加え、data-src を追加
<a href="1920px画像の場所" target="_blank"><img border="0" alt="" src="サムネイルの場所" width="1920" data-src="1920px画像の場所"/></a>
width="1920" を width="100％" とするも可能
この記述に書き換えることで、大きな画像の点数が大幅に増えても高速表示が可能になります。
ただし、設定画面で「画像遅延読み込み」が有効になっていると、CMS が loading イメージを挿入するように記述を変更してしまいますので、「画像遅延読み込み」は無効にしておきます。けれども「画像遅延読み込み」スクリプト自体は利用する必要があるため、本文の冒頭部分にでも下記の記述を追加します。（デザイン＞HTML編集のヘッダ部分に記述しても PCのみ対応で、スマホには対応しないようです）
<script src="https://blog.seesaa.jp/contents/js/lazyloading.js" id="lazyloadingjs"></script>
この1行を追加しておくだけで「画像遅延読み込み」スクリプトが機能します。そして loading イメージは挿入されません。
このようにして作成したのが「大画面対応フォトブログ （aspect-photo）」です。ブラウザのウインドウをモニタの横幅いっぱいまで広げれば、大きな画像のままでスクロール閲覧が可能です。
大量の大きな画像が、高速アクセスでストレスなく表示されると思います。 ※回線が混み合っているなど通信速度が遅い場合はその限りではございません m(_ _)m
他にもスタイルシートの変更なども必要になりますので、下記ご参考までに。
当方のモニタサイズ 24inch（1920px × 1200px）程度を想定した設定です。
当記事は、seesaa ブログに標準装備されている lazyloading.js を利用し、一部コードを書き換えるなどして簡単に実現するアクセス速度改善策の一例として書いてみました。
このような機能が標準で用意されていないブログや、ホームページの場合でも、同様の対策はいろいろな方法で取れるようです。「画像遅延読み込み」で検索するか、AI に尋ねてみるのも良いかもしれませんね。^^
にほんブログ村
この記事へのコメント