Produced by FOURIER

ページの先読み機能を自動で設定したい!

SenaSena calender 2023.3.2

はじめに

皆さんはページの事前読み込み(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から定期取得

graph LR A[Google Analytics] -->|API| B[Laravel] B --> C[データベース]

HTML埋め込み

DBから取得して、HTMLに埋め込むようにします。

graph LR A[データベース] --> B[Laravel] B -->|HTML| C[ブラウザ]

実際にやってみた

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

Sena / Engineer

生涯に亘り技術を極めていきたい。