prefetch導入テンプレートの調整を完了しました

テンプレート テンプレ不具合・修正など
2022/07/08
5
vanillaice (Akira)
vanillaice (Akira)

先日お知らせした件について作業完了致しました。

一部テンプレートの修正を行います

一部テンプレートの修正を行います

弊テンプレートユーザー様、及び、これから利用してみようかな、とお考えの方に向けて取り急ぎのご連絡です。...

対象テンプレートは以下の通り。掲載されていないものについては対象外です。

ordinary_days - FC2ブログテンプレート

ordinary_days - FC2ブログテンプレート

ordinary_daysテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

wash_ashore - FC2ブログテンプレート

wash_ashore - FC2ブログテンプレート

wash_ashoreテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Francesca- FC2ブログテンプレート

Francesca- FC2ブログテンプレート

Francescaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Halo- FC2ブログテンプレート

Halo- FC2ブログテンプレート

Haloテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

El-zigzag - FC2ブログテンプレート

El-zigzag - FC2ブログテンプレート

El-zigzagテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

BigGirlNoCry - FC2ブログテンプレート

BigGirlNoCry - FC2ブログテンプレート

BigGirlNoCryテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

OmbreRose - FC2ブログテンプレート

OmbreRose - FC2ブログテンプレート

OmbreRoseテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Mystyle - FC2ブログテンプレート

Mystyle - FC2ブログテンプレート

Mystyleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Blowing - FC2ブログテンプレート

Blowing - FC2ブログテンプレート

Blowingテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Tarth - FC2ブログテンプレート

Tarth - FC2ブログテンプレート

Tarthテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Muse - FC2ブログテンプレート

Muse - FC2ブログテンプレート

Museテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

tremolo - FC2ブログテンプレート

tremolo - FC2ブログテンプレート

tremoloテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

今回は機能の削減なので、無理に再DLする必要はありません。新規DLへ向けての仕様変更とお考えください。

既にご利用中の方でもprefetchが害になるパターンがありますので、以下のリストに該当する方は少しお考え頂いた方が良いかもしれません。

  • 内部リンク掲載数が非常に多い
  • 画像の容量を削減していない(MB単位の画像)
  • 画像掲載数が非常に多い(目安 1ページあたり10枚以上)

prefetchというのは遷移が予想されるページにバックグラウンドでアクセスし、画像などのリソースを予めダウンロードしてキャッシュを作成しておく、という手法です。なので帯域を消費する方法でもあります。ただし帯域に制限がかかりそうな場合などはブラウザがprefetchを行うかどうか判断します。

簡単にいうと、目当てのページは既に表示が完了しているけれども、ブラウザはまだ裏でガチャガチャ仕事してる、と。その仕事量が多すぎるとブラウザだって疲れちゃうし、サーバーへの負荷も出てくるよ、ということですね。

現在のFC2ではユーザー間に機能の差が出てきています。画像についてはpreloadといって、表示時に最優先処理を行う手法が取られることがあります。以下に該当する場合です。

  • 有料会員登録をしている
  • 無料会員だけれども、個別記事下にテキスト広告を表示させている(個人設定で「表示させない」オプションがあります)

上記は CDN利用を持っている という意味で、CDNについては今回説明を省きます。以下の記事をご参照ください。

FC2ブログの【アカマイ】画像表示高速化の仕組み

FC2ブログの【アカマイ】画像表示高速化の仕組み

超いまさらで多くの方はご存知かとは思うのですが。 「アカマイ」って何なの?から始まって仕組みまでを、私のわかる範囲で記そうと思います。 間違ってるところがあればご指摘頂けると助かります ^^;...

で、prefetchを行った方がお得、というパターンはズバリ 無料会員 + テキスト広告非表示 + 記事UP時に画像に対し何らかの対策をしていない 方です。

何らかの対策、というのは例えば「画像のwidth, height属性付加」「画像のlazyload(JS または ブラウザネイティブ)」など。
ブログを開設し、特に何も設定を触らず、記事は「見たまま編集」で書いている、という方はまず間違いなくパターンにあてはまります。

CDN利用権を持つ方の場合は、画像がpreloadされますのでlazyloadの方が意味をなくすんですね。preloadは最優先処理、lazyloadは最劣後処理なので真逆のアプローチです。共有テンプレートに於いては各ユーザーの条件を分岐するのは難しいので、今後も「条件の良くない方に焦点を置く」という形で制作したいと思っております。

また、事のついでに新作テンプレートについて。常にいくつか中途半端な仕上がりのものを持っており、その中の2つほどほぼ完成に近づいてはいます。それを秋口に共有に出せるかなぁ、といった感じです。ちなみにいずれも要約タイプです。

Related post

Comments  5

こん
2022/07/09 (Sat) 08:10

ご教示ください

Akiraさん、こんにちは。
前回のお知らせをいただいてからのスピード作業、本当にお疲れ様でした。

早速ですが、prefetchの概念は(多分)理解したように思うのですが、どこをどう直せば良いのかが(あいかわらず)分からず、迷っております。まったく急いではおりませんので、お時間がある時にでも(作り出してm(_ _)m)教えていただけますでしょうか?

まず、私は有料会員ですが「内部リンク掲載数が非常に多い」にぴったし該当するので、prefetchは少なくしておいた方が良い気がいたしました。テンプレートはHaloを使わせていただいています。画像の処理は一応しているつもりです。

とりあえず、新規のテンプレートをDLし「prefetch」という単語を検索してみて、どうやらここがそうらしいという該当箇所をそっくりコピーしてみましたのですが、それでよろしかったでしょうか。

<!--not_titlelist_area--><link rel="prefetch" href="<%url>archives.html"><!--/not_titlelist_area-->
<!--permanent_area--><!--preventry--><link rel="prefetch" href="<%preventry_url>"><!--/preventry--><!--nextentry--><link rel="prefetch" href="<%nextentry_url>"><!--/nextentry--><!--/permanent_area-->

違っている、もしくは変更しない方がよい、ということでしたら、それも併せてご教示いただけましたら幸いです。

いつもご面倒をおかけして申し訳ありません。もしかしたら私と同じ疑問を持たれた方もいらっしゃるかもしれないかもしれないと、今日は顔出しでお邪魔いたしました。ではでは、良い週末をお過ごしくださいませ。

-
2022/07/09 (Sat) 14:39

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/07/09 (Sat) 22:28

To こんさん

こんばんは ('0')/

> そっくりコピーしてみましたのですが〜

はい。追加についてはそれでOKです。あとは削除対象があります。
qkoriginlist
を検索して頂くと、htmlの</body>付近に見つけられます。これが該当のファイル名称の一部なので、このscript要素
<script src="該当ファイル.js"></script>
の一行を削除してください。

こんさんの場合は上記の通りです。他のテンプレートでは
fp_
の文字列を持つJSファイルが対象の場合もあります。ファイル名はこのいずれかです。

一応影響についてざっと説明しますと、こんさんの場合全記事リストの遷移は通常よりも速いはずです。トップページでは他ページへのprefetchは行われませんが、有料会員なので画像preloadが行われるのと、無料会員になったとしてもlazyloadが適用されますのでほとんど影響はないと思います。
個別記事については最も遷移が期待される前後ページに対し処理を入れてあります。
お手数おかけします。よろしくお願いします :)

vanillaice (Akira)
vanillaice (Akira)
2022/07/09 (Sat) 22:29

To 誤字の件 内緒さん

修正しました。ご連絡ありがとうございます! :)

こん
2022/07/10 (Sun) 07:12

To vanillaice (Akira)さん

Akiraさん、お忙しいところ、早速お返事をいただきまして、ありがとうございました!
削除すべき箇所があったのですね〜。やっぱり伺ってみてよかった(笑。

いつもいろいろご配慮いただきまして本当にありがとうございます。どうぞ良い日曜日をお過ごしくださいね。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)