高速化

当ブログは、さくらのVPSに、WordPressで運用をしています。 Core Web Vitalsが、5月からGoogleの検索ランキング要因として導入されることから 高速化したいと常々思っています。 例えば、gzip圧縮をしたり、画像の圧縮したり、cssやjsを圧縮しまとめたりと 色々対応はしているのですが、なかなかスピードがあがりません。 インフラ的な限界説もありますが、まだ他にもできることがあるのでは？と思い Webサーバをnginxから、LiteSpeedに切り替えることにしました。 LiteSpeedとは Webサーバといえば、不動のApache、Apacheよりも高速なイメージのnginx、IIS等があります。 LiteSpeedは、第4のWebサーバと言われており、最近そのシェアも少しずつですが伸びてきています。 https://www.litespeedtech.com/ netcraftで、シェアを見てみると、まだまだですが、ランクインしています。 2021年の1月で、2%のシェアとなっています。 2021年1月のWebサーバシェア(netcraft) 2022年の1月では、3%のシェアになっています。1%増えていますね。(Cloudflareが気になります) 特徴は、以下ということで早そうですね。 LiteSpeedウェブサーバーは、パフォーマンス、セキュリティ、互換性を犠牲にすることなく、リソースを節約します。ApacheをLiteSpeedに置き換え、最大容量を2倍にし、サードパーティのキャッシュ層を排除し、HTTP/3のような最先端技術をサポートします。 ちなみに、このLiteSpeed、バーチャルホストの設定等も管理画面からできるようになっており扱いやすいと感じました。(ただし、セキュリティを気おつけないと簡単に乗っ取られてしまうのでご注意ください。) 現状の確認 当方の環境は、以下のようになっています。(低スペックです) HDD 25GB仮想2Core1GB メモリCentOS Linux release 7.4nginx version: nginx/1.18.0 PageSpeed Insightsでのスピード計測 PageSpeed Insightsでnginxの状態で、計測したものです。 https://developers.google.com/speed/pagespeed/insights/ スコア スコア 数字的には、かなり低いですね。せめて、黄色(50〜89)にしたいと思います。 WebサーバをnginxからLiteSpeedに変更 https://www.litespeedtech.com/ さしあたり、淡々と進めていきます。 これからの流れ LiteSpeedのインストール管理画面のID/PW設定7080ポートでアクセスできるようにする管理画面から、外部アプリ、スクリプトハンドラを設定するバーチャルホストを作成するバーチャルホストに、RewriteルールとSSLの証明書をセットするリスナーを作成し、バーチャルホストと関連づける管理画面から再起動し、アクセスできることを確認するWordPressのLiteSpeed用のキャッシュプラグインを入れる インストール yum -y install epel-release rpm -Uvh http://rpms.litespeedtech.com/centos/litespeed-repo-1.2-1.el7.noarch.rpm yum -y install openlitespeed openlitespeedインストールにより、以下が合わせてインストールされました。 インストール: openlitespeed.x86_64 0:1.6.19-1.el7 依存性関連をインストールしました: libmcrypt.x86_64 0:2.5.8-13.el7 lsphp73.x86_64 0:7.3.27-2.el7 lsphp73-common.x86_64 0:7.3.27-2.el7 lsphp73-gd.x86_64 0:7.3.27-2.el7 lsphp73-imap.x86_64 0:7.3.27-2.el7 lsphp73-mbstring.x86_64 0:7.3.27-2.el7 lsphp73-mysqlnd.x86_64 0:7.3.27-2.el7 lsphp73-opcache.x86_64 0:7.3.27-2.el7 lsphp73-pdo.x86_64 0:7.3.27-2.el7 lsphp73-pecl-mcrypt.x86_64 0:1.0.3-1.el7.7.3 lsphp73-process.x86_64 0:7.3.27-2.el7 lsphp73-xml.x86_64 0:7.3.27-2.el7 場合によっては、以下のパッケージも必要になります。(json_encodeやjson_decodeを利用している場合) # yum install -y lsphp73-json.x86_64 LiteSpeed Web Serverは、「/usr/local/lsws」にインストールされます。 # pwd /usr/local/lsws # ls Example PLAT add-ons adminpasswd backup cachedata conf fcgi-bin lib lsphp73 modules phpbuild tmp GPL.txt VERSION admin autoupdate bin cgid docs gdata logs lsrecaptcha php share 管理画面用に、IDとパスワードの設定を行います。admpass.shを実行します。 # /usr/local/lsws/admin/misc/admpass.sh Please specify the user name of administrator. This is the user name required to login the administration Web interface. User name [admin]: // ユーザ名を入力 Please specify the administrator's password. This is the password required to login the administration Web interface. Password: // パスワードを入力 Retype password: Administrator's username/password is updated successfully! LiteSpeedを起動します。また常時起動するように、設定しておきます。 # service lsws start # chkconfig lsws on 起動を確認します。 # ps -ef|grep ls root 12604 1 0 08:15 ? 00:00:00 openlitespeed (lshttpd - main) root 12618 12604 0 08:15 ? 00:00:00 openlitespeed (lscgid) nobody 12644 12604 0 08:15 ? 00:00:03 openlitespeed (lshttpd - #01) nobody 12645 12604 0 08:15 ? 00:00:03 openlitespeed (lshttpd - #02) セットアップ 管理画面にアクセスして、設定を行っていきます。 ポート番号7080でサーバにアクセスします。(通常の表示側ページは、8088ポートになります。) http://xxx.xxx.xxx.xxx:7080/ ここで私の環境では、ポートを閉じているためアクセスできませんでした。 今回暫定的に利用する、7080と8088ポートをあけます。(セキュリティの為、ポート番号は後で変更します) # firewall-cmd --add-port=7080/tcp --permanent # firewall-cmd --add-port=8088/tcp --permanent # firewall-cmd --reload 再度、アクセスしてみます。 http://xxx.xxx.xxx.xxx:7080/ (管理画面)http://xxx.xxx.xxx.xxx:8088/ (サイト側) SSLの設定をしていないため、安全でないサイトとして出ますが、そのままアクセスします。 ログイン画面が出るので、上で設定した、ID/PASSWORDでアクセスします。 サーバ設定 外部アプリ 外部アプリに、lsphpを追加しておきます。 外部アプリ設定 スクリプトハンドラ 上記の外部アプリをスクリプトハンドラとして登録しておく。 スクリプトハンドラ設定 バーチャルホスト設定 基本設定 バーチャルホストの設定を行っていきます。 以下は、デフォルトのバーチャルホスト設定になります。 バーチャルホスト基本設定 新規追加で、zaitakukinmu.comのバーチャルホストを追加していきます。 項目内容バーチャルホスト名自分が認識しやすい名前を設定Virtual Host Rootnginxで表示していたDocumentRootのディレクトリを設定設定ファイル$SERVER_ROOT/conf/vhosts/$VH_NAME/vhconf.conf↑こちらを設定し保存する際に、ディレクトリがないとエラー表示されるのでCLICK TO CREATEを押下し作成する。スクリプト/外部アプリを有効にするPHPを動作させる為に必要なので、"はい"を設定抑制された"はい"を設定バーチャルホスト基本設定 バーチャルホスト基本設定 設定ファイル 設定ファイルディレクトリ作成完了 Virtual Host Rootに設定したディレクトリのオーナーが、nginxになっている場合は、一括でオーナーを変更しておきます。(画像のアップロードやログ出力等での書き込み権限が必要な為) # chown -R /var/www/対象のディレクトリ Rewrite WordPressが動作するように、以下のRewriteルールを管理画面から追加します。 httpとhttpsをリスナー設定で、このバーチャルホストで受け取るため(この後設定)、httpで来たら、httpsにリダイレクトする設定も追加しておきます。 rewriteCond %{HTTPS} !on rewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L] RewriteBase / RewriteRule ^/index\.php$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] Rewriteルール設定 SSL設定 SSLの証明書と秘密鍵の情報をセットします。 SSL設定 証明書チェーンは、"はい"にしておきます。(これをしておかないと、SSL証明書のエラーが出ます。) リスナー設定 バーチャルホストの設定だけでは、ページは表示されません。 リスナー(ポート)設定と、バーチャルホストを紐付けして表示されるようになります。 リスナーとして設定するのは、http(80)とhttps(443)になります。 リスナー設定(http) リスナー設定(https) 設定を反映するために、LiteSpeedを再起動します。(管理画面から、青枠をクリック) Webサーバの再起動 確認 通常のドメインアクセスでページが表示されることを確認する。(nginxが止まっていることを確認) https://zaitakukinmu.com/ 問題なくページが表示されたら、サーバ再起動等で、nginx、php-fpmが起動しないように停止しておきましょう。 WordPressのプラグイン追加 LiteSpeed Cacheというプラグインを入れておきます。 設定は、インストール時のままとしておきます。 インストール中に、発生したエラー バーチャルホストの設定をしても表示されないため、curlコマンドで確認してみます。 curl https://zaitakukinmu.com:8088/curl: (35) error:1408F10B:SSL routines:ssl3_get_record:wrong version number sslの設定が完了していないのに、httpsでリクエストしているからでした。 Fatal error: Uncaught Error: Call to undefined function W3TC\json_decode() in jsonのパッケージが足りないので、以下をインストール # yum install -y lsphp73-json.x86_64 Deprecated: Unparenthesized `a ? b : c ? d : e` is deprecated. Use either `(a ? b : c) ? d : e` or `a ? b : (c ? d : e)` in wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Node.php on line 42 こちらは、php7.4の場合の構文エラーなので、ソースを直接修正しました。 困ったときの対応 Virtual Host設定後、ページが表示されない場合は、別のディレクトリを作成し、その中に、静的なindex.htmlを作成し、そのページが表示されるかどうかを確認する。(まずは、index.htmlの表示確認。そして、phpコードを書いた、index.phpで確認。)ブラウザでうまく表示されない場合は、ターミナルから、Curlコマンド等でリクエストしてみる。管理画面からログを見れるので確認する。WordPressの内容がうまく表示されない場合は、wp-config.php内のDEBUGモードをtrueにして確認する。 PageSpeed Insightsでのスピード再計測 計測誤差もあるかもしれませんが、軒並み良くなっていそうです。 スコア 31 =&gt; 59 First Contentful Paint 1.6 =&gt; 1.1 Time to Interactive 12.9 =&gt; 9.4 Speed Index 7.2 =&gt; 4.9 Total Blocking Time 2,020 =&gt; 1,110 Largest Contentful Paint 5.6 =&gt; 2.8 Cumulative Layout Shift 0 =&gt; 0 まとめ Webサーバを変えるだけでスピードアップはかれるのであり。ただし、既にアクセス数が多いようなサービスの場合は、充分検証が必要。Webサーバの設定を管理画面からできるのはすごく楽。本当に高速化するには、サーバスペックをあげる、コンテンツを見直す等が必要。 次回以降は、Qualys SSL Server Test でA+を取るための設定変更について書きたいと思います。

タグを入れるだけでサイト高速化「Repro Booster」が気になる

WordPressの高速化プラグインをインストールしてみる

LiteSpeedで、QUICとHTTP/3を有効にする

WordPress + Cloudinaryでサイトを高速化する

nginxから第4のWebサーバLiteSpeedに変更する