Webサイトの高速化をデモで実践!WEXAL高速化ウェビナーレポート

Webサイトの高速化をデモで実践!WEXAL高速化ウェビナーレポート

こんにちは。吉政創成の菱沼です。2020年5月21日(木)、Microsoft Teamsを利用したウェビナーが開催されました。参加する機会がありましたので、簡単にレポートいたします。


現在、新型コロナウイルスの影響でリモートワークが中心の生活を送っている人が多いことかと思います。政府は以前より、少子高齢化社会による人材不足への対策と、東京オリンピックの公共交通機関の混雑緩和のため、テレワークを推進してきました。

今回の件で、各企業でテレワーク環境の整備が進んだことになりますが、その利便性からそのままテレワークを推奨する企業が増加する可能性があります。また、再びこうした非常事態となった場合、企業は事業の継続と社員の安全配慮義務を果たすために、躊躇なくテレワークを実施することは想像に難くありません。

こうした状況の中で、ストレスなく業務を遂行するためには、ネットワークを含めた快適な環境を整える必要があります。Webサービスを利用する企業も多いため、Webサービスを提供する事業者は、ユーザーに快適にサービスを利用してもらうためにも、Webの高速化を見逃すことはできない時代になりました。

本ウェビナーでは、これまでWordPressの高速化に特化してきたKUSANAGIから、新たに誕生したWEXAL®とその効果についてご紹介しました。WEXAL®は既存のシステムに手を加えることなく、Webサイトを高速化することができるサービスです。WordPressのみならず、他のCMSやスクラッチ開発のWebサービスにも適用が可能です。

また、Googleがなぜ高速化を推奨しているのか、その理由についても改めてご説明しました。

イベント概要:

新型コロナウィルス(COVID-19)の感染拡大によって、働き方もリモートワークが中心になりつつあり、自宅から仕事をする人も増えてきた中、Webサイトの表示速度はますますユーザー体験、売上に重要な要素となりました。

今回は、Webサイトを高速化するソリューション「WEXAL」についての効果を実感いただき簡単導入のイメージを掴んでいただけます。

(ご参加いただいた方から最適化してみたいURLを募集し、実際にWEXAL化するとどうなるのかをお見せするデモを行います。)

https://enterprise-wordpress.doorkeeper.jp/events/106305

1.Microsoft Azureについて

日本マイクロソフト株式会社 クラウドソリューションアーキテクト 大川様

Microsoftが保有するネットワークは、現在、世界2位(1位は米国政府)、民間企業では1位と、世界最大規模を誇っています。Microsoftが提供しているAzureは、140か国58リージョンで稼働しているクラウドサービスです。ユーザー企業はFortune500に選出された企業のうち、95%で利用されています。多くの企業で利用されるからこそ、安全性を高めるために、Microsoftではセキュリティ対策として10億ドルを投資し、また、3500名のサイバーセキュリティエキスパートが常に監視・研究・対策を行っています。その結果、客観的な基準により安全性・信頼性が確認されたサービスとして、日本初のクラウドセキュリティゴールドマークを取得しました。

Microsoft Azureは、アプリケーションを自在に構築、管理、デプロイすることができるため、業務を効率化させるアイデアを形にした独自ソリューションを簡単に構築することができ、生産性を高めることができます。また、Azure Marketplaceから、信頼できるパートナーによって提供されたアプリやソリューションをワンクリックで利用できるようになっており、これらの活用によって、より迅速に、低コストで自社に合ったソリューションの開発をすることができます。

プライム・ストラテジーのKUSANAGIとWEXAL®はMarketplaceから選択することができ、たった数クリックでAzureのVM上に構築することが可能です。

2.Web高速化にとって重要な○つのポイント

プライム・ストラテジー株式会社 マーケティング部 部長 相原知栄子様

昨今、GoogleはWebサイトを閲覧するユーザーの利便性を高めるため、Webサイト、特に利用者が増えたモバイルサイトの高速表示を求めています。Googleによる検証によれば、モバイルサイトの読み込みに3秒以上かかると訪問者が53%離脱し、また、読み込み速度が1秒から5秒に増えるとモバイルサイトの訪問者の直帰率が90%増えるという結果が出ています。つまり、表示速度が遅いということは、コンバージョン(以降CV)率や収益が減少する可能性があるということになります。

今後、5Gの時代が訪れればネットワークの高速化が実現するため、さして対処をしなくてもいいのではと思われがちですが、当社は5Gの時代こそ、バックエンドとレンダリングの高速化が必要で、これをしているかどうかでより大きな差を生む時代になると考えています。

そこで本セッションではそれぞれのフェーズで行うべき高速化に必要な処理について解説します。

<高速化の目的は、収益アップとコストダウン>

高速化することで、ユーザーエクスペリエンス(以降UX)が最大化します。その結果、PVやCV、回遊率、滞在時間が向上します。また、CPUにかかる負荷と、データ転送量が減少するため、インスタンスとネットワークにかかっていたコストを低減させることができます。

<どうすれば高速化するのか?>

次の図(左)は、Webサイトが表示されるまでの間に、ネットワーク・バックエンド・レンダリングで行われている一連の処理の流れを表しています。Webサイトを高速化させるには、このすべてを高速化させる必要があります。

通常、サイトがレンダリングをする際、一度にすべてのデータの読み込みをしようとしますが、転送するデータの優先順位を決めて表示させることで、ネットワークの負荷を分散が可能となり、その結果、表示を速くすることが可能になります。(イメージ図・右)

ではそれぞれのフェーズでどのような処理を行えばいいのでしょうか?

①バックエンド

・サーバ(インスタンス)はコア数ではなく、CPUの周波数の高いものを選択する

・キャッシュを上手く使うことで高速化効果があるため、ページキャッシュやCDN、Opcache、Query Cacheなど、各キャッシュの性質によって上手に使い分けを行う

・処理を速くする機能を利用する   など

②ネットワーク

・バックエンドで利用されるネットワーク帯域を太いものにする

・画像を、次世代画像フォーマット(WEBP等)を利用した最適化やブラウザごとに出し分けを行う

・WordPressのプラグインやjQueryなどを利用して、画像データの読み込みを遅らせる

・CSS/JS/HTMLのサイズを最小化・最適化する   など

③レンダリング

まず、レンダリングを3段階に分割して再構成します。

ファーストビュー → インタラクティブ → セカンドビュー

まずはファーストビューに必要な情報を優先して転送し、その後、インタラクティブとセカンドビューに必要なデータを順番に転送させます。この際、ファーストビューをどれだけ速く表示させられるかがポイントとなります。

<KUSANAGI+WEXAL®で効率的な高速化を>

すべてに取り組むのは大変に感じるかもしれませんが、ひとつひとつでも取り組んでいけば高速化を実現します。ただ、高速化はあくまでゴールへの一つの手段でしかありません。高速化に必要な機能を持つツールがすでにあるのなら、使ってしまったほうが効率的です。

KUSANAGIはこれまで説明してきたバックエンド・ネットワーク・レンダリングの高速化に必要な機能をすべて備えているため、管理者に負荷をかけることなく高速化を実現します。

また、最新の環境と当社から提供される定期的なアップデートに加え、WAFを利用できるなどのセキュリティ対策を施しているため、お客様のwebサイトをセキュアな環境にすることができます。

また、新たにリリースされたWEXAL® Page Speed Technologyは、オリジナルデータの改変をせずに、ネットワークとレンダリングの高速化が可能です。また、画像のABテストと、ブラウザごとのリソースの出し分けもすることができます。さらに戦略AI「David」によって、そのサイトに合った適切な最適化戦略が考案され、それに沿った形で効果的な最適化が実施されます。

KUSANAGIとWEXAL®は双方を導入することで、より安全で、安定したwebサイト運営を実現することが可能です。副次的効果として、リソースの最適化によってデータ転送量が削減され、インスタンスとネットワークの利用料を削減できたというデータがあります。

より詳しいサービスの詳細は以下URLをご参照ください。
https://kusanagi.tokyo/

https://www.wexal.jp/

3.WEXAL® Reverse Proxy Limited EditionとWeb高速化実践

プライム・ストラテジー株式会社 マーケティング部 穂苅 智哉

Googleが提供するPage Speed Insightはいわば、Googleが考えるWebサイトの理想像であり、ここで高得点が取れるということは、Googleの検索結果で上位に上がることができるということになります。Googleは近年、ユーザビリティの向上のため、Webサイトの高速化を各サイトへ求めています。

このツールが指摘する改善ポイントでは速度に関係するものが挙げられます。

例えば、指摘される項目の中に、「オフスクリーン画像の遅延読み込み」という項目があります。WEXAL® Reverse Proxy Limited Editionは、こういった指摘項目を改善することが可能です。

<なぜ高速化が必要なのか?>

Walmartの調査によれば、ページの読み込み速度が1秒改善されるごとにCVは最大2%増加し、0.1秒改善されるごとに1%増収すると言われています。

また、Googleの検証によれば、モバイルサイトの読み込みに3秒以上かかると53%が離脱し、読み込み速度が5秒になると直帰率が90%増加するとされています。

上記の検証結果によって、Googleは2018年にモバイルサイトの表示速度を重視するアップデートを行っています。つまり、Googleで検索順位を上位にするためには、サイトの高速表示は避けられず、放置しておけばCV率の低下し、減収する可能性があります。

また昨今の情勢からテレワークが今後より普及していく可能性が考えられるため、高速化表示できるサイトはそれだけで利点となる可能性が高く、ページ高速化の需要は増加すると考えられます。

当社が提供するKUSANAGIとWEXAL®はこのWEXAL® Reverse Proxy Limited Editionは、導入するだけでGoogleフレンドリーなサイトを実現できます。本セッションではWEXAL®について解説いたします。

<WEXAL® Reverse Proxy Limited Editionについて>

Webサーバの前段に設置することで、WEXAL® Page Speed Technologyを対象サイトに適用するリバースプロキシ専用インスタンスです。DNSやロードバランサの設定を変更するだけで、従来、エンジニアが多大な工数をかけて改修していたWebを構成するファイル(例:画像・JavaScript、CSS,HTMLなど)をオリジナルに手を加えずに自動で最適化を行います。

また、AIによって高速化戦略生成がリアルタイムで行われ、設定は専用管理画面(ブラウザ)ですべて行うことができます。

オリジナルのサーバ基盤の影響を受けないため、WordPress以外のCMSやスクラッチ/フレームワークのwebサイト問わず稼働させることができます。

詳細は https://www.wexal.jp/ からご確認ください。

<効果の検証>

実際にWEXAL®をサイトに適用した場合に、Google Page Speed Insightの結果がどのように変化するかを数サイトで検証した結果をご紹介しました。検証した結果、適用後、スコアが倍以上の数値を出しました。このイベントレポートでは1サイト分をご紹介します。検証した他のサイトのデータにご興味をお持ちの方はぜひお問い合わせください。

翔泳社の書籍通販サイトは画像の多さの影響もあってか、Google Page Speed Insightの結果は6点でした。WEXAL®を適用してみたところ、スコアは10倍の62点にまで改善しています。

これはWEXAL®による画像圧縮と最新フォーマット化によってサイズが縮小され、また、DOM生成を高速化したことが影響しています。

WEXAL®は既存システムに手を加える必要がないため、人的・時間的手間をかけることなく、Webサイトを高速化でき、Googleフレンドリーなサイトにします。また自動修復機能もあるため、なにか起きた場合にも安心してWebサイトを運営することが可能です。

KUSANAGIとWEXAL®は、主要クラウドホスティングサービスと提携しているため、ワンクリックで導入が可能です。デプロイが素早くできるのに、これほどの効果が出せるものは他にはないと思いますので、ぜひ導入をご検討ください。

セミナーに参加された方でご希望の方に、WEXAL®を自社のサイトに適用した場合の効果レポートをご提供しました。こちらをお読みの方でご興味のある方はぜひプライム・ストラテジーにお問い合わせください。

Eventカテゴリの最新記事