【2020年版】FRONTL1NEの最強/最速を目指したWordPress環境+αについて
こんにちは、FRONTL1NE運営のFL1NEです。
FRONTL1NEでは皆さまへ快適にWebサイトを見ていただけるよう日頃から最適化/高速化を繰り返しています。
そんな中2020年現在、FRONTL1NEで実際に利用している環境や知見について共有いたします。
ではどうぞ!
(Webサイト構築のご相談などあればお問い合わせページかDiscord、Twitterなどでご連絡ください!)
インフラ
サーバー環境について
FRONTL1NEのWebサイトではGoogle Cloud PlatformのGoogle Compute Engineを利用しています。
以前まで利用料金の安さなどからリージョンをアメリカにし、f1-microという一番性能の低いインスタンスを利用していましたが、アクセス数の増加などに伴い東京リージョンに移行し、e2-smallという2コアCPU(2vCPU)と2GBのメモリをもつインスタンスに移行しました。
エックスサーバーなどのレンタルサーバーを利用すると言う手もありましたが、最新の技術などに追従するためにGoogle Cloud Platformで運用をしています。
(最新のソフトウェアバージョンに対応とかしようとするとやっぱり自前で組まないとね…)
めちゃくちゃアクセス数がある場合、Google Kubernates Engineで自動スケーリングする環境とか構築するのが良いと思います。
我々はGCPを利用してますが別にAmazon Web Service(AWS)でも全然いいと思います。
またGCPにデプロイする際、 簡略化のために後述するHTTPサーバー、OpenLiteSpeedの公式イメージを使っています。
CDN (Content Delivery Network)について
FRONTL1NEではCDNサービスとしてCloudflareを利用しています。
Cloudflareは無料で利用することもできるCDNサービスで、DNSやファイヤウォール機能なども兼ね備えているため非常に便利です。
Cloudflareでは世界各地にあるエッジサーバーに静的アセットなどをキャッシュし、利用者の最寄りにあるエッジサーバーから配信するためデータの読み込み速度を高速化することができます。
またGoogle Cloud Platformの場合、サーバーの通信量に応じて料金がかかる従量課金形式なので、Cloudflareにアセットがキャッシュされることにより、サーバー自体へのトラフィックを抑えることができ、通信料金を下げることができます。
CloudflareにはRocket LoaderやPage Ruleなど様々な設定がありますが、きちんと設定できればものすごく高速化できるはずです。
(ちなみにベンチマークの結果、FRONTL1NEではRocket Loaderは切っています)
超おすすめ。
Webサーバーソフトウェア (HTTPサーバー)について
FRONTL1NEではHTTPサーバーとしてLiteSpeedのオープンソース版であるOpenLiteSpeedを利用しています。
以前はnginxを利用していたのですが、nginx + php-fpm環境にFastCGI Cacheを組み込んだ状態などよりも、LiteSpeedの方がパフォーマンス的にメリットがあり、管理もブラウザ越しに行え扱いやすくオススメです。
また、LiteSpeedサーバーと連携して利用できる「LiteSpeed Cache」と言うWordPressプラグインを利用することで他のHTTPサーバーでは実現できない驚異的なパフォーマンスを実現できます。
2020年の現時点でWordPressを高速に動かすなら、もはやLiteSpeed一択と言っていいと思います。
(KUSANAGIとかもあるけど、比較をしてないので不明。しかしKUSANAGIはnginxベースのはずなので多分LiteSpeedの方が早いと思う…)
テーマ
FRONTL1NEでは2019年の7月あたりからLuxeritas(ルクセリタス)という無料かつ高速なWordPressテーマを利用しています。
WordPress向けテーマには様々なものがあり、無料ではなく有料のものもありますが、国内ではLuxeritasとCocoonが高機能かつ無料で有名です。
WordPressはテーマによってSEOのレベルも速さも差が出るのでしっかりベンチマークをとって比較した方がいいです。
プラグイン
FRONTL1NEでは複数のプラグインを利用してます。
その中でも高速化に貢献している主要なものについて紹介します。
LiteSpeed Cache
LiteSpeedの公式プラグイン、「LiteSpeed Cache」です。
LiteSpeedをHTTPサーバーとして利用しているならもはや必須ですが、他のHTTPサーバーでも普通のキャッシュ系プラグインのように利用することもできます。
MemcachedやRedisを利用したオブジェクトキャッシュにも対応している他、画像やコードの最適化をする機能なども兼ね備えています。
また、Cloudflareの連携などもできます。
個人的に一番気に入っているのが、クローラーを搭載しており、他のユーザーがページにアクセスする前にキャッシュを生成しておけます。
そのため、どのページにアクセスしても高速にページを表示させることができます。
EWWW Image Optimizer
WordPressの画像最適化プラグインとして多分一番有名なのが「EWWW Image Optimizer」です。
LiteSpeed Cacheにも画像最適化機能がありますが、次世代画像フォーマットである「WebP」のサポートがされていないWebブラウザでもWebPで配信しようとしたりと挙動がいまいちだったのでEWWW Image Optimizerを利用しています。
LiteSpeed Cacheと組み合わせて利用する場合、気をつけないと機能が競合してしまうので注意が必要です。
WordPress外のツールについて
Google Analytics
Google Analytics(Googleアナリティクス)はもはやWebサイト運営する上で欠かすことのできない、統計情報取得ツールです。
検索ワードやユーザーの利用デバイスなどの情報をある程度取得することができます。
基本、Google Analyticsなどを導入する場合はセットでプライバシーポリシーページも作成しましょう。
Google Search Console
Google Search Console(Googleサーチコンソール)もWebサイトを運営する上で必須となるツールの一つで、主にGoogle検索で表示された回数やクリックされた数などを調べることができます。
こちらもGoogle Analytics同様、検索すれば情報がたくさん出てくるので割愛。
LiteSpeed WebAdmin Console
HTTPサーバーであるLiteSpeedの管理コンソールである、LiteSpeed WebAdmin Console。
リアルタイムで接続数やトラフィック量などを可視化することもできる上、ログや設定も全部Web上で完結する優れもの。
不正利用されないようにアクセス制限をかけたりするのは必須。
キーワード検索関連ツール
詳細は書かないけど
とかめっちゃ愛用してる。
ただ、あくまで補助的な要素で使ってる。
キーワードプランナーとかだけで書く内容決めるのはただのアフィリエイトサイトになりかねないからNG。
ベンチマークツールについて
ベンチマークツールは一つだけではなく複数のもので計測すると効果的です。
Google系のツールではサーバーの初期応答時間(TTFB)などはあんまり考慮されなかったり、ツールによっては広告系などが除外され実態の速度とは異なる結果が出ることもあります。
ちなみに広告を設置しているサイトの場合、大体の場合で広告がパフォーマンスの足を引っ張ります。
こればかりは割と自分たちで解決できない場合が多いです。
速度をとるか、目先のお金を取るか、全ては運営の仕方次第です。
PageSpeed Insights
PageSpeed Insights(ページスピード インサイト)はGoogleが提供しているWebサイトのベンチマークツールです。
モバイルとPCベースの表示速度をGoogle側で計測してくれます。
基本は後述するLighthouseとセットで利用すると良いです。
Lighthouse
Lighthouse(ライトハウス)はGoogleが提供しているWebサイトのベンチマークツールです。
Google Chromeなどに追加できる拡張機能として提供されています。
LighthousehあPageSpeed Insightsと違って、速度の他にアクセシビティ、ベストプラクティス、SEOといった複数の項目に関するスコアを測定することができる他、PWAへの対応チェックを行うこともできます。
Fast or Slow
Fast or Slow(ファスト オア スロー)はWordPressのセキュリティで有名なWordfenceが運営するベンチマークツールで、世界の18箇所から指定されたWebサイトの速度を計測することができます。
これを利用することでCDN対応がしっかり行われていて、世界のどこからでも高速にアクセスできるかなどの検証を行えます。
詳細に関してはGIGAZINEさんに詳しくまとめられているのでそちらをどうぞ!
Qualys SSL Labs SSL Server Test
SSL Server TestはQualys SSL Labsが提供しているHTTPS接続の安全性などについて検証することができるツールです。
きちんとSSLの設定が行えていない場合、ここで大体悪い評価になります。
最高評価はA+です。
その他
他にもベンチマークツールはいくつかあって
などが結構便利です。
まあ全てのベンチマークでいい成績を取れるようにしたいですね。
あと、ちゃんとWebブラウザーのインスペクター見た方が良い。
おわりに
FRONTL1NEではこのようなツールなどの検証を繰り返し、みなさんが快適なサイト閲覧をできるように日々最適化、高速化を進めています。
この記事で紹介した技術などは、その中のごく一部です。
より詳細な情報を知りたい!といった場合や、Webサイト構築・高速化のご相談などがあればぜひ筆者のTwitterやお問い合わせページ、Discordなどでご連絡ください!
ではここまで読んでいただきありがとうございました。
