はてなからHugoに移行!Hugoの良い点

はてなからHugoに移行!はてなの良かった点

では、 ブログをはてなからHugo+Netlifyに移行して思った、 「はてなの方が良かった点」 を話しました。

今回は逆に、Hugo+Netlifyに移行してよかった!という点について話しました。 むしろこっちの方を知りたい人の方が多いでしょう。

サイトスピード改善

なぜサイトスピードを上げる必要があるのか?

サイトスピードは、正義です。理由は2つあります。

検索順位への影響

1つ目は、検索順位への影響です。 ブログを運営してる人はわかるでしょうが、アクセスのほとんどはモバイルからです。 特に、このブログのように文章を読ませるだけのブログの場合は、7割程度がモバイルを占めるようになります。

2018年にグーグルが、モバイル検索順位において、サイトスピードを考慮することを発表しました。 この発表では、その比重は高くないとしましたが、実際にグーグルは「ユーザにとって、クリックしてよかったと思えるサイトを上位に出したい」 という思惑があるのですから、特に、サイトスピードが遅いサイトは相当不利になることが考えられます。

直帰率を下げるため

もう1つは、サイトの表示時間が直帰率に影響するからです。 これは、サイトの表示が遅いとユーザにとってクリックしてよかったと思えないということですから、 上と言ってることはあまり変わらないのですが、 仮に、検索順位への影響がなかったとしても、直帰率を下げた方が良いため、独立に議論出来ます。 直帰率が高いと何が起こるかというと、明らかなのは、記事を読んでもらえないということです。 しかし、ただ読んでもらえないだけならまだ良くて、さらに悪いのは、 ユーザの滞在時間が短くなるので、グーグルから「価値のないサイトだ」とみなされることです。

これらを避けるためにも、サイトスピードを速くすることはとても重要なのです。

Hugoによって爆速になった

Hugoに移行してすぐに、サイトスピードを測ってみました。

https://d33wubrfki0l68.cloudfront.net/b37b788faf91a180d1a3b63e890c1f3544382f96/ff593/images/1572660074.jpg
https://d33wubrfki0l68.cloudfront.net/ab3624d0f5062f86c8106e7ac07acfda8b071768/15547/images/1572660098.jpg

上が、移行直前に測ったはてなでのモバイルの速度スコアで、 下が、移行直後に測ったHugoでのモバイルの速度スコアです。

ちなみにデスクトップは、はてなでは80くらいで、Hugoではほぼカンストの99です。

モバイルの方は顕著な差が出ています。はてなでは42でしたが、Hugoでは85です。 40台というのは、赤くなってるのでわかると思いますが、グーグルによって「遅い」 と判断されるレベルです。

はてなのモバイルは遅いです。しかしこれでもがんばって高速化をした結果なのです。 もともとはてなではデスクトップでも50程度だったのですが、 色々と軽量化をして、80まで上げました。それに伴って、モバイルも20台から 40台まで上がったのです。しかし、それ以上はどうやっても上がりませんでした。

これは、静的サイトジェネレータとはてなやワードプレスのような動的サイトジェネレータの 差だと思います。実際にぐぐると、ワードプレスでもモバイルが40程度という人が見つかりました。 従って、動的サイトジェネレータでは、モバイルで80台まで上げるにはかなり厳しいのではないかと思います。 おそらく、サーバを強化しても(CPUを増やしたり、SSDにしたり)劇的な改善にはならないでしょう。

静的サイトジェネレータはなぜ速いのか

HugoやJekyll、Hexo、Gatsbyなどは静的サイトジェネレータと呼ばれます。

「静的」というのは何なのか?

はてなやワードプレスでは、ブログのデータはサーバのデータベースに保存されています。 そして、ユーザがサーバにページ読み込みをリクエストすると、サーバは、そのページのHTMLをそれから 生成して返します。 言い換えると、はてなやワードプレスというのは、ブログはサイトというよりはむしろ アプリケーションに近いということです。

一方で静的サイトジェネレータというのは、このHTMLを最初から生成しておきます。 そして、ユーザがリクエストを送ると、それを返すだけです。 だから速いのです。

しかし一方でデメリットもあって、 これはアプリケーションのようなインタラクションが出来なくなるということでもあります。 例えば、はてなでは当たり前のコメントや検索のような機能は、静的サイトでは難しくなります。 しかし、ブログの本質は書いた記事を読んでもらうことですから、そこは速度と利便性で割り切って 速度をとるという選択がありえるわけです。

そして今は、サイトスピードが重視されるようになった。 これが、静的サイトジェネレータの価値が見直されている理由です。

また、Hugoを使ったサイトをデプロイするNetlifyは、 Asset Optimization(画像のサイズ縮小など)や、 独自のCDNも持っているため、これによっても速くなります。

サイトスピードだけはワードプレスで作った大手ブログに負けなくなる!

静的サイトジェネレータを使うと、動的サイトジェネレータの限界を超えることが出来ます。 これはつまり、はてなやワードプレスにあるものすごい強いブログに対して 速度だけは無条件に勝てるということです。 それがどれだけ大きいかは別にして、快感ではあります。

ランニングコストは独自ドメイン代だけ!

はてなで独自ドメインを使ってサイト運営をするには、 独自ドメイン代の他、はてなプロの費用がかかります。 これは年に1万円ほどです。 はっきりいうとこれは多くの人にとって大した額ではないですが、 将来的にブログを更新せずただ寝かせておくだけになった場合とか、 そういう状況を考えると、無駄です。

月に500円から1000円浮くと考えれば、 他の動画サービスなりを契約するなりして、 その分人生を楽しむことも出来るでしょう。

はてな規約からの解放

これは私には小さくない問題でした。

はてなには規約があり、これは無料でもプロでも等しく適用されます。 規約では、以前まではアフィリエイトはグレーでした。 しかし、これはあまりにも現状に即してないため、実際にはほとんどのブログはBANされませんでした。 それでもたまに、謎の理由でブログがBANされて凍結されることがあるらしく、 その場合にどうなるのか(記事が消去されてしまうのか。移行だけは許されるのか) も明らかではありませんし、何より基準が曖昧でした。

こういった理由から、はてなは最近になって、アフィリエイトを全面OKにしました。 しかし、はてなにはまだ曖昧な規約があり、それがコンテンツ内容が相応しくない場合にBANされるというものです。 例えば、公序良俗に反するコンテンツは違反としていますが、どのラインかは明確になっていませんし、 アダルト広告は違反とユーザの中では言われていますが、具体的にそう書かれている条項は見つけられませんでした。 例えば、「オナニー」「セックス」という言葉を使うことは公序良俗に反するのか? ギャンブルについて書くことはどうなのか? 記事の中で他人を侮辱することはどうなのか? すべて曖昧だと思いました。

なので、はてな規約の下にある限り、自分が思ったようには書けないわけであり、 アドセンスBANを受けたことがただの損になってしまいます。

当方京大卒だがグーグルアドセンスのBANをくらったので解説するわ

アドセンスBANを受けてしまったことはしょうがないとして、 それをポジティブに考えて有利に活かす方が有益です。 有利に活かすというのはグーグルアドセンスの厳しい規約に怯えずに自由に書くということです。

はてなの規約というのはアドセンスの規約に比べるとはるかにゆるいとは言えます。 しかし、それが存在し、なおかつ曖昧である以上、これから解放されるべきだと考えていました。

今考えると、アドセンスBANを受けた時点ではてなを離れるという決断が出来ても良かったと思います。

リダイレクトによって古いリンクが復活!

はてなにあったら良いな機能

で書きましたが、はてなに対する不満の1つとして、 リダイレクトの設定が出来ないということがありました。

リダイレクトというのは、サイトを移行したり、URLを書き換えた時に、 「古いURLから新しいURLに移りましたよ!」 ということをグーグルのエンジンに 伝えることです。これによって、グーグルのエンジンは、古いURLがなくなったことと、 新しいURLが古いURLの評価を引き継ぐべきだということを認識出来ます。

私の場合は、過去に大規模なURL書き換えを行った時に、 数千の外部リンクを捨てました。 これは、狂ってるという人もいましたが、 それよりURLを書き換えることの方が重要なので、その時は気になりませんでした。 リダイレクトがあれば、これらを全部捨てずに済みました。

では、なぜリダイレクトが必要かというと、 URL書き換えからもう半年が立とうとしているのに、 未だに古いURLからのアクセスして404になるケースが絶えないからです。 これは検索経由の場合もありますし、リンク経由の場合もあります。 これがどういう害があるかというと、

  1. アナリティクスが汚れる
  2. ユーザ体験が悪い
  3. 滞在時間が短くなって、グーグルの評価が落ちる

ということです。これらを改善するために、リダイレクトをしようと思ったのですが、 残念ながらはてなは要求に応えてくれませんでした。 私の期待値は3日での実装でした。

カスタマイズ性

はてなやワードプレスなどの出来合いのものではなく、 Hugoなどの静的サイトジェネレータを使う場合、 こういう機能がほしいなぁと思った場合にカスタマイズする余地があります。 特にはてなだと、この余地がほとんどないため、 妥協が必要になることが多いです。

サイトマップがサーチコンソールに正常に認識される

はてなの問題として、 サイトマップがサーチコンソールに正しく認識されずエラーとなる という問題があります。

Hugoで吐いたサイトマップは、一発で正しく解釈されました。

https://d33wubrfki0l68.cloudfront.net/3936641f07ada3ead30a8412a6f843694cbcd5cc/8f5fe/images/1572740385.jpg

サイトマップがなくとも、通常のクロールによってサイトのインデックスは進むので 必須ではないのですが、あった方が良いです。

移行して満足しているか?

これがとても重要なのですが、 私ははてなからHugoに移行したのは正しい決断だったと信じています。

はてなからHugoに移行!はてなの良かった点

で話したように、はてなには、記事を書きやすくする機能が揃っています。 しかし、サイトスピードやリダイレクトは、私にとって捨てられないポイントでした。 また、記事を書きやすくする機能にしても、私はプログラマなので、 自分でツールを作ってしまえば済む問題です。 従って、トータルでいえばプラスだと考えています。 もし、移行するためのIT知識があるのであれば、チャレンジしてみることをおすすめします。

はてなからHugoへの移行方法については別に書くので、 楽しみにしていてください。


このエントリーをはてなブックマークに追加

See also