プログラム：https://www.meetup.com/ja-JP/Fukui-WordPress-Meetup/events/283042791/
今回は、仕事で利用しているさくらインターネットのレンタルサーバーを扱うということで、参加しました。筆者は、サーバー管理者をしていることもあり、皆さん、サーバーのバックアップや復元をどのようにされているのか、考えているのかも知りたいところですね！
WordPress 5.9（フルサイトエディティング機能が実装、これは昨年参加した Kansai WordPress Meetup で体験した）がリリースされたばかりの模様（2022年1月26日）。これについて Meetup が開始されるまで雑談されてました。
以下、各セッションについては筆者が聞いて理解・体験した内容の備忘録です。
「壊して戻そうハンズオン」前半 … サイトのバックアップと破壊編
バックアップ方法は下記のようにいくつか方法がある。しかし重要なのは、「いかに簡単に復元できるか」ということ。
- FTP/phpMyAdmin等で手動
- プラグイン
- All-in-One WP Migration（有償版にしないと使いづらい / uploadの容量制限等がある）
- UpdraftPlus（今回これでハンズオンにつかう / ドメインを変更する場合には有償版が必要）
- BackWPup（バックアップに特化、復元作業は煩雑）
- ホスティング業者のバックアップサービス
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に変換できる。
WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」 にあるサイトを見ながら試してみる。
こちらで重要なのは、利用している Webサーバの仕組みが、 Apache（.htaccessが使えること）かそれ以外（NGINX）によって、設定変更が必要だということ。デフォルトは、Apache（.htaccess）が利用できる（さくらインターネットのレンタルサーバ含む）設定となっている。
プラグインインストール後、設定の末尾にある 「Regenerate All」ボタンをクリックして変換をする。
私の持つサイトの一つのケースでは下記のようにそれなりに圧縮できた感じ。
実際の Chromeの要素の検証（Develoer Tools）で png 画像が webpとして読み込まれていることを確認
元を図り忘れてしまったこと、もともと重いサイトだったことを加味すると、まぁそれなりの効果はでているかもしれない。
質疑応答
- 画像の Alt を設定していないとどうなるか
- アクセシビリティが悪くなるので、かなり評価が下がる。ChromeのLighthouse 拡張機能を使えば、ユーザ補助の項目がアクセシビリティとなる。
- 外部画像の読み込みが遅い点はどうしたらよいか（アフィリエイターの視点）
- iframeを導入しNative Lazyload を導入して遅延読み込みさせるとか。
- <iframe>: インラインフレーム要素 (Firefoxヘルプ）
- テーマのテスト環境用のローカル環境は wp-env がおすすめ
「壊して戻そうハンズオン」後半 … サイトの新規作成とバックアップからの復帰編
インストールしたフォルダと同じところに復元する必要がある。
これがわからなくなった場合、先程バックアップしたファイルのうち、 gzip圧縮されたものを展開してファイルをテキストエディタで開くと情報が書かれている
クイックインストールを開始
インストールURLは、壊したサイトのものを選べばよい（まだ残しているなら）。ドメインごと消してしまっているなら、ドメインを新規作成して以前と同じフォルダを指定。データベース作成ボタンから、データベースは新規作成する。こちらは新しい名前でも構わない。
「既存のバックアップ」項目から「バックアップファイルをアップロード」リンクをクリックして、以前バックアップした５つのファイルをアップロードしましょう。
アップロードが終わるとその下に、「復元」ボタンでてきます。これをクリックします。
すると復元する項目がでてくるので、すべてチェックして「次」のボタンをクリックします。
うまくいけば、下記のように Restore successful! という成功のメッセージがでてきます。
その後、「UpdraftPlus 設定に戻る」ボタンをクリックします。
サイトが完全に復元データに置き換わっているので、つまりはユーザー情報も新しくなっていますので、ログインを求めてきます。そのためバックアップする前のユーザーでログインしてください。
うまくいけば、下図のようにもとに戻っていることが確認できるでしょう。
実際には他にもメディアや投稿、固定ページ等いくつか確認するとよいと思います。
質疑応答
- UpdraftPlus プラグインは、容量が大きいバックアップは可能か
- さくらインターネットのレンタルサーバーは、１ファイルのアップロード容量制限が 5MB。しかし UpdraftPlusはこの制限に引っかかっていない。
- さくらインターネットのレンタルサーバーなら PHP設定でアップロード制限を引き上げることができる
- php.ini の設定（例。128MBまでのアップロードを可能する。memory_limit は当然それ以上の容量設定が必要）
- When installing, my web hosting says there’s a maximum file size I can upload – what can I do?（UpdraftPlus）をみると、Upload Larger Plugins というプラグインをつかうことがおすすめだよ！と書かれていました（あとから筆者が調べてみると.. どの程度使えるかは不明）。
- さくらインターネットもバックアップあるよ
- ローカル環境いろいろ
- Local
- Docker
- MAMP
- サーバーを立てている（クライアントに直接見てもらえるため）
筆者は、サイトリニューアルを依頼するときに、以前はMAMPのサイトクローンをいれてデザイナーの人に渡してました（MacなどMAMPごと圧縮して手渡していた）が、いまはもうクローン用のデモサイトを立ち上げて使ってもらってます。
なお筆者はサーバー管理者でもあるので、CUIツールである WP-CLIを組み合わせて自動バックアップ、WordPress更新をしてます。
2022年1月29日 @kimipooh
0 件のコメント:
コメントを投稿