2022年1月29日土曜日

[福井] Fukui WordPress Meetup #15 - サイトの表示速度改善 ＆ 壊して戻そうバックアップと復帰の手順 の会 に参加して #wpfukui #wordpress

 

プログラム：https://www.meetup.com/ja-JP/Fukui-WordPress-Meetup/events/283042791/

今回は、仕事で利用しているさくらインターネットのレンタルサーバーを扱うということで、参加しました。筆者は、サーバー管理者をしていることもあり、皆さん、サーバーのバックアップや復元をどのようにされているのか、考えているのかも知りたいところですね！

WordPress 5.9（フルサイトエディティング機能が実装、これは昨年参加した Kansai WordPress Meetup で体験した）がリリースされたばかりの模様（2022年1月26日）。これについて Meetup が開始されるまで雑談されてました。

以下、各セッションについては筆者が聞いて理解・体験した内容の備忘録です。

「壊して戻そうハンズオン」前半 … サイトのバックアップと破壊編


バックアップ方法は下記のようにいくつか方法がある。しかし重要なのは、「いかに簡単に復元できるか」ということ。

  1. FTP/phpMyAdmin等で手動
  2. プラグイン
    1. All-in-One WP Migration（有償版にしないと使いづらい / uploadの容量制限等がある）
    2. UpdraftPlus（今回これでハンズオンにつかう / ドメインを変更する場合には有償版が必要）
    3. BackWPup（バックアップに特化、復元作業は煩雑）
  3. ホスティング業者のバックアップサービス

UpdraftPlusを使ったバックアップとサイトを壊すハンズオン


下記のように、UpdraftPlus プラグインをインストールして、有効化

設定 > UpdraftPlusバックアップを選択

「今すぐバックアップ」ボタンを押してバックアップ
＊WordPress フォルダ内にバックアップされる

バックアップができると、「既存のバックアップ」の項目にある５つのボタン「データベース」「プラグイン」「テーマ」「アップロード」「その他」をそれぞれクリックします。

すると下図のようにダウンロードできるようなウィンドウができるので、ダウンロードボタンを押して端末にバックアップデータをダウンロードします。

そして下記のように５つのバックアップが存在することを確認します。

壊す前のサイトトップ画面


そして WordPress を壊します。
まずはさくらインターネットのクイックインストールを使った場合、下図のパッケージに表示されているのでアンインストールします。

次にデータベースも削除します。



これで完全に消えたということになります。

表示速度改善のヒント


サーバー自体のレスポンスが遅く表示が遅い場合には、サーバーのプラン変更やサーバー変更などをするのは大前提。

Google の PageSpeed Insights は、LCP(First Contentful Pain) やCLS(Largest Contentful Paint)、画像フォーマット（次世代フォーマット（webp）で配信しているか等）など最新の評価項目がでているため、評価情報がガラリと変わっている。JQueryは重い。また読み込み時にレイアウトが崩れていると評価が低くなる。

単にサイト表示が速いだけでは高得点にはならない。
表示速度が早くても画像の軽量化をしていない場合などは、点数が伸びない。

また読み込みを遅延する、Native Lazyload（WordPress 5.5から標準サポート）を導入する。head にいれたものを footer に持ってくるとか（jQuery系には影響がでるので、そのあたりは対応が必要）。

WebP への変換（WebPはかなり圧縮率が良い。ただしアイコンなどの場合には逆に増えてしまうこともあるので注意）
Google：https://squoosh.app/
TinyPNG: https://tinypng.com/
WebP Converter for Mediaプラグインを使う。

いろいろ対応すると 95%を超えることもできる。

WebP Converter for Mediaプラグイン:

https://ja.wordpress.org/plugins/webp-converter-for-media/ を使えばメディア画像を WebPに変換できる。
こちらで重要なのは、利用している Webサーバの仕組みが、 Apache（.htaccessが使えること）かそれ以外（NGINX）によって、設定変更が必要だということ。デフォルトは、Apache（.htaccess）が利用できる（さくらインターネットのレンタルサーバ含む）設定となっている。


プラグインインストール後、設定の末尾にある 「Regenerate All」ボタンをクリックして変換をする。

私の持つサイトの一つのケースでは下記のようにそれなりに圧縮できた感じ。

実際の Chromeの要素の検証（Develoer Tools）で png 画像が webpとして読み込まれていることを確認

元を図り忘れてしまったこと、もともと重いサイトだったことを加味すると、まぁそれなりの効果はでているかもしれない。

質疑応答
  • 画像の Alt を設定していないとどうなるか
    • アクセシビリティが悪くなるので、かなり評価が下がる。ChromeのLighthouse 拡張機能を使えば、ユーザ補助の項目がアクセシビリティとなる。
  • 外部画像の読み込みが遅い点はどうしたらよいか（アフィリエイターの視点）
その他の質問応答
  • テーマのテスト環境用のローカル環境は wp-env がおすすめ

「壊して戻そうハンズオン」後半 … サイトの新規作成とバックアップからの復帰編

インストールしたフォルダと同じところに復元する必要がある。
これがわからなくなった場合、先程バックアップしたファイルのうち、 gzip圧縮されたものを展開してファイルをテキストエディタで開くと情報が書かれている

クイックインストールを開始

インストールURLは、壊したサイトのものを選べばよい（まだ残しているなら）。ドメインごと消してしまっているなら、ドメインを新規作成して以前と同じフォルダを指定。データベース作成ボタンから、データベースは新規作成する。こちらは新しい名前でも構わない。

これで WordPressにログインできるようになったはずなので、再び UpdraftPlus プラグインをインストールし、有効化する。



「既存のバックアップ」項目から「バックアップファイルをアップロード」リンクをクリックして、以前バックアップした５つのファイルをアップロードしましょう。



アップロードが終わるとその下に、「復元」ボタンでてきます。これをクリックします。

すると復元する項目がでてくるので、すべてチェックして「次」のボタンをクリックします。

うまくいけば、下記のように Restore successful! という成功のメッセージがでてきます。
その後、「UpdraftPlus 設定に戻る」ボタンをクリックします。

サイトが完全に復元データに置き換わっているので、つまりはユーザー情報も新しくなっていますので、ログインを求めてきます。そのためバックアップする前のユーザーでログインしてください。


うまくいけば、下図のようにもとに戻っていることが確認できるでしょう。
実際には他にもメディアや投稿、固定ページ等いくつか確認するとよいと思います。


質疑応答

筆者は、サイトリニューアルを依頼するときに、以前はMAMPのサイトクローンをいれてデザイナーの人に渡してました（MacなどMAMPごと圧縮して手渡していた）が、いまはもうクローン用のデモサイトを立ち上げて使ってもらってます。

なお筆者はサーバー管理者でもあるので、CUIツールである WP-CLIを組み合わせて自動バックアップ、WordPress更新をしてます。

2022年1月29日 @kimipooh
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)