今まで、ブログのトップページは最新の数記事の記事全文を掲載していました。
そのため、当然ながら記事内の画像や埋め込みの動画などすべて表示されるので、トップページの表示速度はとても遅くなります。
そこで、サマリーだけを表示しようとHugoの{{ .Summary }}を利用しようとしたのですが、とても長いサマリーが出てきてなぜかと困っていました。
本記事は、Hugoのサマリー機能(Summary)についての解説と、うまくサマリー機能を利用することでブログのトップページのページスピードをあげることができたのでその紹介をする。
Hugoのサマリー機能
まずHugoには大きく分けて2つのサマリー機能があります。
Hugo-definedとUser-definedの２つです。
公式ドキュメントはこちら。
https://gohugo.io/content-management/summaries/
Hugo-defined
これは、Hugoが自動的にサマリーを作ってくれる機能です。 仕様では、はじめの70単語を抜き取って、それをサマリーとしてくれます。 しかし、デフォルトでは英語のような単語の区切りをスペースで表現する言語を基準としています。 そのため日本語の記事をこのサマリー機能にかけると、とんでもないことになるのである。
下記は一例だがある記事のサマリー結果です。
とくかく長い。。。
Appleのkeynoteで話題の’Courage‘使ってみた笑 ISUCON6予選で惨敗した。(18000点くらい) 端的に言って、とても未熟だった。 とはいえ、とてもいい思い出になったのでまとめる。 メンバー スリーエムというチーム名で、@mogulla3と@mintsu123と一緒に出場した。 ふたりともぼくよりもアプリの改善などは10倍くらい優秀なエンジニアなので、 ぼくはインフラとか総務的な立ち回りをして、２人がチューニングに集中できるようにすることを心がけていた。 準備 準備は３週間の間に土日どちらかに集まってISUCONの過去問を解いたり戦略について事前に打ち合わせしてた。 プライベートレポジトリの用意(Gitlab) チャットルームの用意(Slack) ISUCON4とISUCON5の予選の過去問解き 土日集まったときには戦略や振り返りを重視 実際の過去問ときは平日に各々が空いた時間などにやってた 基本戦略を準備 なんの技術を主に使うか だれが何を担当するか 定形作業の手順化 その他ナレッジなど 採用した技術 PHP 7.0 php-fpm Openresty(nginx) 1.11 MySQL 5.7 Redis 3.2 当日 出だしはとても順調だった。 Azure担当だったぼくはすぐにサーバをデプロイし、OSバージョンを確認した。 予想通りのUbuntu 16.04であったので、準備したとおり必要なミドルウェアのインストールをすませた。 ほぼ定石と言える下記（定形作業と呼んでいた）もすぐにこなすことができた。 調査のための各種ログ出力化 Nginxでの静的ファイルの配信、キャッシュ化 Kataribeインストールと実行 MySQLのインデックスの付与と設定見直し php-fpmのUnixドメインソケット化 デプロイの仕組みの整理 不要デーモンの停止 この状態でもスコアは0のままであり、少し焦りを感じたが、 ここからが本番のチューニング開始である。 Kataribeの結果から、GET /が改善ポイントであることは明らかなのはわかっていた。 Top 20 Sort By Count Count Total Mean Stddev Min P50.
Hugo-definedの日本語対応
HugoではhasCJKLanguageというパラメータを用意していて、日本語に対応することができます。
ちなみにCJKとは、「Chinese」「Japanese」「Korean」の略のようです。つまり漢字を使う言語を表すときに使うらしい。
config.tomlにhasCJKLanguage = trueと記載することで長ったらしいサマリーから回避することができます。下記がhasCJKLanguage = trueにしたあとのサマリー結果です。
（短っ・・・）
Appleのkeynoteで話題の’Courage‘使ってみた笑 ISUCON6予選で惨敗した。(18000点くらい)
文字数カットする技
hasCJKLanguage = falseで長いサマリーを文字数指定でカットすることはできます。
例えば、300文字でカットしたい場合、テンプレートファイル内で下記のように書くことで分量を調整することは可能です。ですが、文章の途中できれてしまい不自然になるため、あまりおすすめはしないです。
{{ substr .Summary 0 300 }}
User-defined
続いてはUser-definedのサマリー機能について説明します。名前の通りHugoの利用者側でサマリー箇所を決めることができる機能です。サマリーとして区切りたい場所で<!--more-->を入れます。そうすると、冒頭から<!--more-->までがサマリーとなります。
例として下記の文章（markdownファイル）の場合、冒頭の「タイトル通り」から<!--more-->までをサマリーとして扱ってくれるのである。
+++
hugo meta infomation
+++
タイトルの通り、"英語で"AWSソリューションアーキテクト認定の模擬試験を受けてみたので報告です。
なぜそんなことをしたかって…？？
- 今度、AWSの認定試験を受ける予定がある（日本語）
- 今度、他のクラウドの認定試験を受ける予定がある（英語）
というわけで、英語での試験があまりにも不安だったのと、AWS認定試験もどのみち受けるので、
練習を兼ねてAWS認定の模擬試験を英語で受けてみた、のである。
<!--more-->
# 結果
・・・・・
本ブログではUser-definedを採用
上で見てきたようにHugoではサマリー機能をいくつかの形式で利用することができますが、日本語環境では個人的にはUser-definedをおすすめします。
正直、Hugo-definedではサマリーが短すぎるし、現状の仕様ではサマリーに利用する文字数を自分で調整することはできません。
いい文章ではだいたい、冒頭に読みての「掴み」を書くと思うし、<!--more-->を挿入するだけでできるのであればそれがいいと思います。
ブログトップページの高速化を図る
冒頭に書いたが、もともとブログサイトのトップページは、最新の3記事の全文を表示していました。それゆえにトップページが重く困っていました。また、書いた記事の内容によって（動画やスライドの埋め込みの多い記事をかくと）ページスピードが変動することになり、良質な記事を書くということと、ページスピードを上げることの両立がはかれていませんでした。
そこで、今回User-definedのサマリー機能を導入することで、この問題を解消しました。
過去の記事すべてを対応するのは難しいので、直近のものだけとりあえず対応しましたが、それだけでも十分な効果を発揮しています。
実際、Googleのページスピードも87点まで改善することができました。
(でもまだまだ改善の余地あり)
さいごに
このブログでお金を稼いでるわけでもなんでもないが、どうせ書くからには多くの人の役に立ってもらいたいと思っています。そのため、少しずつでもいいブログサイトにしていきたいと思っています。
Hugoの知見がまたでてきたら共有していきます。
