August 10, 2020 • ☕️ 2 min read

ランディングページはユーザが最初にアクセスするページとなります。いつもトップページのことを指しています。 有意義なコンテンツをトップページに置くことで、アクセスしてきたユーザにアピールすることができるでしょう。 thundermiracle.comをリフレッシュするとき、Netlify formを使って、ランディングページに問い合わせフォームの設置もできたが、 直面しなければいけない問題が生じて、結局問い合わせフォームを独立なページに移動しました。

問題

ローディングスピードが落ちる

ホームページをWordpressからGatsbyjsに移行した一番重要な理由はローディングスピードを向上することです。しかし、1つのページに過分なコンテンツを入れると、逆にスピードが落ちてしまいます。

Wordpressから移行してきた最初のバージョン

from-wordpress-to-gatsby.png

Lighthouseレポートからはっきりわかるが、パフォーマンス点数はほぼ0点から99点まで上がってきました。

しかし、コンテンツを積み重ねて、問い合わせフォームを設置した後は?

thundermiracle_bef_1.png

かなり遅くなりましたね。

原因

レポートの詳細を確認すると:

thundermiracle_bef_2.png

サードパーティ・ コードの影響はかなり深刻です。

導入したサードパーティ・ コードは:

  • Snatchbot
  • GoogleAnalytics
  • recaptcha.js

解決

よく考えると、ランディングページに問い合わせフォームが不可欠なコンテンツではありません。ユーザがホームページのコンテンツに興味が示したら、問い合わせページに遷移してもらえば十分でしょう。

導入したサードパーティ・ コードについて:

いずれも問い合わせ用のものなので、問い合わせページに移してみました。

thundermiracle_aft_1.png

完了

移行してきた最初のバージョンと比べるとパフォーマンスが多少落ちましたが、問い合わせフォームがある時よりずいぶん改善できたとわかりますね。


関連投稿

GatsbyにNetlify Formのスパム対策

June 18, 2020

Blog part of ThunderMiracle.com