- TOP
- ブログ一覧
BLOGブラキオブログ
エンジニアリングJamstackWEBサイト（ホームページ）のページ速度が速いことで得られるメリット
結論から言うと、WEBサイトのページ速度（ページが表示されるまでの時間）はとても重要で、速ければ速いほど多くのメリットを享受することができます。ではそのメリットはというと・・・があります。これらはWEBサイトを運営する上で欠かせない項目ですよね。2018年1月にということが事前にアナウンスされ、2018年7月にスピードアップデート として導入されました。ですが、影響を受けるサイトは一部で、本当に遅いページだけがマイナスの影響を受け、であればマイナス影響を受けることはないでしょう。ページが表示されるまでに何十秒もかかってしまうのは良くないです。直帰率・離脱率について2017年と2018年のGoogleの調査をしたそうで、ページ表示速度が1秒から3秒になると直帰率が32%増加、6秒になると106%増加、10秒まで遅くなると123%増加すると報告されています。また、表示に3秒以上かかるモバイルページからは53%のユーザーが離脱しているとの調査報告がされています。ページ速度が遅いことでせっかくWEBサイトに訪れてくれたユーザーが内容を見ずにサイトから去ってしまうと言うことがわかります。実際に私たちもすぐに表示されないページは嫌ですよね。この調査からがユーザーが我慢をできるデッドラインと言うのがわかりますね。ページが表示されるまでの時間が3秒以上かかっているようであれば改善は急務かつ必須と言えます。弊社のブログでも以前に触れていますが（）弊社サイトで採用されているJamstackはページ速度が速いと言うのが特徴の一つです。速い理由については、今後記事にしていこうかなと思っていますが、簡単に説明をすると従来のWordPressを利用したCMSサイトの場合は、アクセスがあるたびにHTMLを生成をしてブラウザで表示できるようにしています。ですが、Jamstackの場合は事前にHTMLを生成をしておいてアクセスがあったらそのすでに用意されているHTMLを使ってブラウザで表示をさせています。都度生成をしないのでページを高速で表示される仕組みになっています。では実際に弊社サイト（）のページ速度を確認してみます。すると、かなり高速で表示されているのがわかるかと思います。弊社で使っているコーポレートサイト用のJamstackテンプレートではこのようにページが高速で表示されるようにチューニングを行っています。ホームページが必要、検討している場合はまずはご相談ください。
2022.03.22
エンジニアリングNext.jsNext.jsでXMLサイトマップを作成する方法
XMLサイトマップというのはXML形式のファイルのこといいます。そのXMLサイトマップを設置することで、新規記事の公開やリライトによる更新情報をインデックスに素早く反映させ、検索結果に表示させることができます。設置したからといって上位表示に直結するわけではありませんが、クローリングが効率的になるということは、結果的にSEO上好ましい状態に近づくということになるでしょう。Next.jsでStatic GenerationをしていわゆるJamstackのサイトを作る際にデプロイ時に一緒にXMLサイトマップ（sitemap.xml）も作る手順をご紹介します。こちらのパッケージを使えば簡単にできてしまいます。設定ファイルを一つと、pacakge.jsonにscriptsを足せばビルド時にサイトマップが生成され流という便利なパッケージです。Next.jsでサイト構築するのならおすすめのパッケージです！！sitemap.config.jsファイルをプロジェクトの直下に作ります。オプションを一つ一つ解説をすると・・・siteUrl：サイトURLを指定します。これは必須項目です。generateRobotsTxt：robots.txt ファイルを生成し、生成されたサイトマップをリストアップします。デフォルトfalseです。outDir：生成するディレクトリを指定します。packge.jsonのscriptsに追記をします。おそらく しているところがあると思うのでその後に を追記します。下記のようにコマンドを叩いていただくとサイトマップの一緒に生成されます。ちなみに、弊社サイトだとこのような形で ディレクトリ内に生成されます。Google Search Consoleへサイトマップを登録します。Google Search Consoleのページに行ったら左メニューのサイトマップをクリックします。次にURLの入力欄があるのでそこにサイトマップのURLを入力してください。サイトのURL/sitemap.xml になるはずです。弊社の場合は です。
2022.03.19
エンジニアリングJamstackヘッドレスCMSとは？現役フロントエンドエンジニアが解説
CMSというのは「コンテンツ管理システム」のことで、簡単にいうとブログのように記事などを投稿したりページを追加したりすることができるシステムのことをいいます。代表的なものだとWordPressがまさにCMSです。「プレビュー機能がないCMS」と言われます。もう少し詳しく解説をするとデータを配信しているだけのCMSのことをいいます。例えば、ブログデータを配信となると下記のような感じになります。このようなデータをヘッドレスCMSでは作成をし、配信をします。そして、JavaScriptなどのプログラミング言語でその配信されたデータを取得をし、HTMLやCSSを使いWEBサイトとして構築をしていきます。なのでWordPressの場合は配信と構築をWordPress内でしていましたが、ヘッドレスCMSの場合は配信と構築を分離して開発をすることができます。またヘッドレスCMSは国内、海外製も含め多種多様なサービスがあり、それらを利用して簡単に配信をすることができます。弊社で使っているヘッドレスCMSです。国内産なので日本語で書かれていて馴染みやすいです。また、UIもわかりやすく使いやすいですね。こちらも国内産ヘッドレスCMSです。リリースされたばかりで弊社ではまだ使っていないですが、無料で使える枠がmicroCMSよりも多いので今度試してみたいなと思っています。GraphQLに特化したヘッドレスCMSです。海外製のため日本で書かれていないので英語が読めないと難しいですね。クライアント様に管理画面として記事投稿をしてもらう運用だと採用は難しそうです。また、GraphQLということもあり設計がちょっと難しいですね。弊社で使っているホスティングサービスNetlifyにもヘッドレスCMSはあります。以前、GatsbyJSとNetlifyCMSを使ってコーポレートサイトを作らさせていただいたこともあります。海外製なのでやはりクライアント様に記事投稿をしていただくケースでは採用は難しいです。Google の提供する BaaS サービスである でヘッドレスCMS サイトを構築するサービスです。Firebaseとの連携が必須なのでFirebaseにホスティングしていたり、cloudfunctionsで少し凝ったことをしたい、お問合せの内容をfirestoreに保存したいなどのケースではこちらの方が良い場合もありそうです。弊社でもFirebaseを使うケースも出てきそうなので候補として頭の中に入れておきたいですね。
2022.03.18
エンジニアリングJamstack弊社サイト（ホームページ）で使われているJamstackとは何か？
弊社コーポレートサイトはJamstackという構成で作られています。Jamstackは高セキュリティで高速表示というメリットがあり、弊社ではお客様からのご希望がない限りJamstackでサイト制作をさせていただいております。ですが、そのJamstack。なかなか聞き慣れない言葉ですよね。なのでこの記事ではJamstackについて解説をしてみたいと思います。
2021.07.13
- TOP
- ブログ一覧