はじめに
皆さんはページの事前読み込み(prerender)についてはご存知でしょうか? この機能を使うと、事前読み込みしたページへの遷移が早くなります。
詳細については、前回の記事をご覧下さい。
traffic-adviceへのアクセスが増加している件 〜Google Chromeの先読みの仕組みの話〜 | FOURIER TECH BLOG 〜 IT技術ブログ 〜
弊社では、管理しているWebサイトのアクセスログについて傾向分析しています。その中で404ステータスを確認していたところ、「 /.well-known/traffic-advice」というリソースへのアクセスが増加していましたので調査してみました。
https://www.fourier.jp/techblog/articles/whatis-traffic-advice/
今日はこの記事の続きとして、事前読み込みを実際に実用化させようと思います。
王道の使い方
遷移先がほぼ決まっている箇所に使うのがベストです。
例えば、以下の画像のような「続きを読む」があるようなページです。
https://www3.nhk.or.jp/news/html/20230320/k10014013581000.html
また今では見かけなくなりましたが、エンターページで使うのも良い例だと思います。
運用上の問題点
事前読み込み(prerender)をするページについて、決めるのが面倒という問題があると思います。 日に日に変わるGoogle Analyticsを確認して、特に多い遷移先を確認して設置することは運用上大変です。
そこで・・・Google Analyticsから自動で取ってくることにしてみます。
構想図
Google Analyticsから定期取得
HTML埋め込み
DBから取得して、HTMLに埋め込むようにします。
実際にやってみた
Google Analyticsから取得する
GA4をPHPで取得する方法は、すでに記事化をしているので略します。
PHP(Laravel)でGA4のPV数を取得してみた
PHP等でGA4のデータを取得するには、多くの手段を踏む必要があります。計25枚以上の写真と共にクリックする場所を全て解説します。
https://www.fourier.jp/techblog/articles/ga4-with-php/
Google Analyticsから定期的に取得して、DBに保存する
以下のコードを、一日一回scheduleで実行されるようにします。
// GA4から取得したデータ(例)
$inputs = [
[
'/', // 遷移先
'/company', // 遷移元
],
// ...
];
$result = collect($inputs)->map(function ($row) {
$router = app(Router::class);
try {
$ToPage = $input[0]; // 遷移先
$FromPage = $input[1]; // 遷移元
// URL(string)からLaravelのRouteName(string)に変換
$ToPageName = $router->getRoutes()->match(\Request::create($ToPage))->getName();
$FromPageName = $router->getRoutes()->match(\Request::create($FromPage))->getName();
if ($ToPageName === $FromPageName) return null; // 同じ場合はnull
return ['to_route' => $ToPageName, 'from_route' => $FromPageName, 'count' => $viewCount]; // to_route: '遷移先', from_route: '遷移元', count: 遷移回数
} catch (NotFoundHttpException|MethodNotAllowedHttpException $ex) {
return null; // 存在しないページならnull
}
})->filter(fn(?array $v) => !is_null($v)); // 配列の中からnullを削除
// $resultをDBに保存
DBから取得してHTMLに埋め込み
// class TrafficAdvice extends Model
$advice = TrafficAdvice::firstWhere('from_route', '=', $request->route()->getName());
try {
\View::share('traffic_advice', route($advice?->to_route));
} catch (\Exception $ex) {
// TrafficAdvice無し
}
Blade
@if($traffic_advice)
<link rel="prefetch" href="{{ $traffic_advice }}" as="document">
@endif
確認方法
Chromeであれば、ページを右クリック > 検証 から [ Network ]タブを開きます。
リロードして、指定したURLが入っていれば正しく設置が出来ています。
まとめ
前回の記事の実践編ということで、Google Analyticsから取得して事前ページ読み込みの自動化に挑戦してみました。
現在はPrerender(最新版ではPrerender2)と呼ばれる描画まで先読みで行ってしまう物があるようです。 ですがこちらのChromeでは動作の確認が出来ませんでした。こちらについても追って見ていこうと思います。
Prerenderについての仕様
Prerender pages in Chrome for instant page navigations - Chrome Developers
The Chrome team has been working on options to bring back full prerendering of future pages that a user is likely to navigate to. This modern reboot of prerendering will start rolling out from Chrome 108
https://developer.chrome.com/blog/prerender-pages/
新しいメンバーを募集しています
Sena / Engineer
生涯に亘り技術を極めていきたい。