ブログのテーマを新しいバージョンにアップデートするときはヒヤヒヤします
アフィンガー5のEXを購入して使っていましたが、昨年アフィンガー6のベータ版がアップデートされて様子を見ていました。
そして今年7月。
もういいかな、大丈夫かなあ〜と恐る恐る新しいアフィンガー6をインストール。
私は互換バージョンは選びませんでした。
なのでドキドキ。
インストールしてからやったこと
まず、h2の見出しやトップページのヘッダーの色が全部青色に・・・・。
トップページの色だけは変えたかったので青から薄い青緑に変えました。新着記事の見出しはそのままの青でもわかりやすくていいかなと変えませんでした。
ページ設定が変わっていた
6に変えてから１週間後、何気なく設定→表示設定を見てみると、トップページを固定ページに設定していたのに投稿ページに変更されていました。
(アフィンガー管理画面の「はじめに」にある「Save」を押したせいかもしれません・・・。もしくはGutenbergに慣れていなくてトップページをうっかりゴミ箱に移動させてしまったときに設定がリセットされたのかもしれません。)
そのせいか、サーチコンソールでそのトップページが「重複されています」にされていました。
自分のアドレスを検索してみると、タイトルがキャッチフレーズと一緒に表示変更されています。(「タイトル:キャッチフレーズ」)
慌てて固定ページに設定しなおし再度トップページをインデックスしなおしました。
速度のチェック
なぜか私の場合は最初は遅くなりました。スマホはテーマエディターにコードなど書き込んで努力して52まで上げていたのに48。パソコンも80台から76へ。
ですが、AFFINGER管理画面→その他設定→上級者向け→コードの出力のところに、headとbodyに出力するコードを書き込める欄があります。
アフィンガー5の頃にスピードUPのために書き込んだコードがそこにあると遅くなるのかな？（アフィンガー6ではそこの部分を改善してるので二重書きになってるので遅くなるのかなあ？)と推測。
本当かどうかわかりませんがそう思ったのでコードを削除。
(削除する前にテキストファイルにコードをコピーして失敗した時のために保存)
まっさらにしました。
そして設定→パーマリンク設定→パーマリンクもそのままいじらず更新ボタンだけをクリック。
ページのクレジット、サーバーの履歴も削除してスピードを測ったらスマホは52、PCは81に。
アフィンガー6で新しくできたNEWS（お知らせ）の表示
次に、「新着記事を上の方に置きたいなあ。」と思ったので、新しくできたNEWSの表示を新着記事として使ってみました。
そして速度をはかるとスマホは58、PCは94。
さらに早くなりました。
でも前に設置した新着記事が消えないからトップページに新着記事が2つもある
管理画面の設定でトップページに新着記事を表示しないにチェックしたり、トップページに配置していた新着記事も消したんですが消えませんでした。
まあいっか ページスピード速くなったから
とそのままにすることにしました。
後日、固定記事の編集に更新記事が残っていたので削除。
消えました。
しかし、ちょっとスピードが落ちました。スマホは52、PCは88。なぜでしょう？わかりません。
もしかしてページの最後が広告じゃない方がいいのでしょうか？
でも、新着記事が二つない方が見た目がいいのでこのままにしました。
そして広告を遅延表示させてスピードを上げようとプロブロガーさんのアドバイスを参考にやってみたのですが・・・・。
あまり変わらず。
アフィンガー6にアップデートして以前より少しスピードが上がった
結果的にはアップデートして良かったです。
リリース版(ver20210728)をアップデートしてから、ページスピードはPCが90台を以前よりも出すようになりスマホは48〜61とムラはありますがなんとかイエローが増えていました。
少し速くなった感じです。
アフィンガー6にしたら記事作成画面で見出しの色や形も表示されてわかりやすくなり、Gutenbergのブロックエディター画面では見出しの形も変更して編集もできるようです。
遅いのはプラグインを多く入れてるせいもあります。プラグインのSite Kitを停止するとスマホ速度が80台、PC速度が98へと上がるのですが、ページそれぞれの読者の反応も同じページの上の数字で表示されて便利な面もあるので消さずに使っていました。
2022年7月頃からスマホスピードが遅くなっていたので見直ししてみた
そして2022年が過ぎて7月に入り、気がつくとスマホの速度が37!数字がまた赤くなっていました。
プラグインFlying Scriptsでスマホのフッターにあるタイトルとキャッチコピーを消しましたが、ちょっと数字が上がった程度。
アフィンガー6にアップデートした後だったので、機能を色々みているとアフィンガーの管理画面にある「その他の設定」のところに、
「 WordPress本体のLazyLoadを有効にする」があったので、autoptimizeの画像のところにある、LazyLoadをOFF にして再度計測すると、スマホで65〜70が出るようになりました。
サイドバーも非表示にすると速度がより速くなりますが、おすすめ記事や広告が表示されなくなるので私はしていません。
PCは100がでるようになりました。
スマホは速度30台が常に出て遅かった
スマホは37〜56、良い時で60台でした。
スマホの画面を見直した方が良いと思いトップページのヘッダーの高さをアフィンガー6の設定でギリギリまで変えたり(アイコン画像を左に置いた方が縦の長さがより減って良いのですが、やり方が難しいのでしてません)、サイトタイトルが大きかったので読める程度に小さくしました。テーマエディタ(子テーマ)に直接CSSを貼る方法を選んでその通りにしました。やり方はネット検索して見つけました。
PC版のヘッダーのタイトルもセンターに持ってこれる機能が増えていたので、アフィンガー管理画面で設定。
トップページの「おすすめ記事」の見出しレベルがH3にしていたのでH4に変更。文字が小さくなったのかどうかわかりませんがレベルが細くなるから良いかなと勝手に判断。
検索窓を左に置いて、左にあったメニューバーアイコンを右側に置き直しました(右側に置いているタイプが多いと検索で知ったので)。
AMPに対応できるページは「AMPに対応する」にチェックを入れました。
そして速度測定。
固定ページのトップページと管理画面のトップページの部分のキャッシュをAutoptimizeでして再度測定すると初めてスマホで79が出ました。ですがたまにしか出ませんでした。
トップページの編集画面の右下に「設定内の広告を表示しない」にチェックして再度何度か測定してみましたが、結果表示される時広告が出てたりするので私の場合は設定が効いてないみたいです。そしてAMPページにまだできるページはないか見直しをしてみたら84が出ました。
広告非表示とAMPの見直しをするとInteraction to Next Paintのところが赤からオレンジの領域に減りました。広告が出ると56〜79と幅が広がるようです(測定中見にこられている方がいると広告が出るのかな？どうかは分かりませんが、測定しているとき広告が出るときと出ない時があります)。
トップページの広告は非表示にしたらやっぱり早くなった
広告が表示されるとページスピードの測定数値が下がるので速度を優先される場合はトップページの広告を削除することも良策です。
トップページの広告を非表示にすることで急に数値が上がりました。
私のブログの場合ですが全く問題ありませんでした。
各ブログ記事や一部のカテゴリ欄の下、トップページ以外のサイドバーには広告をつけています。
そしてFlying Script by WP Speed Mattersというプラグインを採用したらさらにスマホのページスピードの速度が早くなりました。
Flying Script by WP Speed Mattersというプラグインは記入にコツがある？
あと他にPageSpeed Insightsの「パフォーマンスの問題を診断する」ところに出る、「使用していないJavaScriptの軽減」に出るURLのjsの部分をFlying Script by WP Speed MattersというプラグインのSettingのところにあるInclude Keywordsに記入して改善する方法を知り、このjsのファイル名の記入の仕方もいろんなブロガーさん数人のHPを見てやってみました。
最初試してみた時は、それほど早くならなかったので二人の方の方法をやった後は放置してたんですが、もう一度やってみようと検索してあるブロガーの方の書き方を採用したら急に97を出すようになりました。どうも記入の仕方にコツがあるようです。ちゃんと記入すると「使用していないJavaScriptの軽減」の表示が消えました。
私の場合はrecaptureのURLがずっと消えなくて改善に相当手こずりました。
「Flying Script by WP Speed Matters recapture」で検索して何人かのブロガーさんのHPを見て参考に試されると良いと思います。
Autoptimizeで改善した経緯はこちらにも載せています。
広告は手動で貼っている
私はSite Kit by Googleの自動広告は使ってなくて、手動で広告を貼ってるので、ページスピードがこれ以上遅くなるならSite Kitを削除することも思案していましたが速度改善できたのでそのままにしていますがスマホで94〜95が出ています。
Site Kitを利用している方で自動広告を設定している方は広告も消えてしまうので削除の際は気をつけてくださいね。
Snippetsというプラグインで広告を手動で固定の位置に貼っています。理由は誤クリック防止(いたずら防止)でプラグインのAd Invalid Click Protectorを使ったためです。これを使用してから不安が一つ減りました。
このプラグイン、Ad Invalid Click Protectorの使い方はワードプレスに詳しいブロガーさんのブログを検索して設置の仕方を知りました。
Gutenbergになれていく覚悟を決める
私はクラシックエディターを使ってきましたが、今回からGutenbergに変えました。(プラグインは消さずにそのまま残しています。)
でも表示が以前とは変わり、一度のクリックでゴミ箱カテゴリへ移動してしまうのでそれ以降気をつけています。まだ全然慣れてなくて、記事を選ぶときについうっかり赤い文字の「ゴミ箱へ移動」を選んでしまい捨ててしまいそうになったりするので注意は必要です。
私だけかもしれませんが、赤い文字をみるとクリックしてしまいそうになる癖があります。
(※ 5から6へ変更したとき、固定ページから投稿ページに変更されているのに気が付かず、新着記事をトップページの一番下に設定するとものすごくページスピードが落ちました。ずらっと記事を延々と並べるタイプはページスピードが遅くなるようです。)
２年後、Gutenberg 用のブロックを追加するACTIONテーマ専用プラグイン、Gutenberg用ブロックプラグイン2をアップデートしました。そして試しにClassic EditorとAdvanced Editor Toolsを停止させてみると私の場合は今年に入ってからブロックエディタを使いこなせるようになってきたので編集画面の崩れもほとんどなく、Advanced Editor Toolsの部分だけ現ブロックエディタでの書き込み推奨になっていたのでその部分だけ書き直ししました。
Classicを停止させた状態でもブロックエディタ上でClassic Editor機能は使えるようです(私の使っているアフィンガー6の場合です)。
どちらのプラグインも停止させた状態でも崩れることがなかったのですが、一応Classic Editorは残してAdvanced Editor Tools (旧名 TinyMCE Advanced)を削除しました。
XML SitemapにGoogle Analytics IDを書き込む欄が増えていたが書き込まないほうが良い？そして削除へ
初心者な私なので、プラグインがアップデートされて自分のテーマに更新しても中身がわかんないんですよね。
しっかりと調べれば良いのですが、ついついしない私。
ある日、XML Sitemapでサイトマップ送信しようとすると、赤くエラーが。
え〜、またなんかしないといけないの？
調べてみると、Google AnalyticsのIDを書き込むスペースができてたことがわかり、急遽IDを書き込んで送信しました。
今までずっとSearch Consoleでサイトマップ送信をしてたので、Google XML Sitemapのほうは使ってなかったんです。
そして、Google XML Sitemapsについて調べているとなんだかIDを書き込まない方が良くてセキュリティも脆弱なので削除した方が良いという情報を見つけました。
詳しくは検索してみてください。
ID書き込んじゃったんだけどどうしよう。でも削除しかできないし。
結局削除して、別のプラグインXML Sitemap and Google Newsに変えました。
ワードプレスを始めた頃にプラグインなしでキャッシュしたくてコピーペーストした.htaccessを編集しなおす
ワードプレスを始めた頃、ど素人な私はプロブロガーさんのブログを見まくり、コピーしまくった過去の.htaccessがありました(この.htaccessの言葉も何のことだか今もわかりません)。
プラグインなしでキャッシュしたくて調べていたんですね。
※私のような超初心者の方は.htaccessの編集は慎重にしてくださいね。間違えるとブログが真っ白になります(私は最初に何度も真っ白に遭遇して慌てたことがありますが今思えばブログを立ち上げた時は見にくる人もすごく少なかったので真っ白になっても問題なかったですね)。
最初は全くわからないので、とにかく検索して上位にあった方の実際にこうしているという.htaccessのキャッシュの部分、IfModule mod_expires.cの一例を全コピーして貼っていました。
そして色々FTP以外の他もいじってましたが他に見直すところがなかったかなあと思い出して.htaccessを久しぶりに見てみました。
すると「ワードプレス キャッシュ プラグインなし」で検索するとキャッシュで最速にする方法が載っていたので、自分のコピーしたものと見比べてみると。
全然違うじゃないですか。
私のは画像のキャッシュ指定が一年後の「access plus 1 year」。上記の検索で上位の方々の書き込みにはfontのキャッシュ指定がないのに私のにはあって全部がaccess plus 1 year。
テキストのキャッシュ指定も全部一年後の設定になっていました(後日調べてみると、キャッシュの設定は１週間から1年間が適切だとわかりました)。
知らないでそのまま前コピーするのはやめとこう
今はやっと、書き込まれている内容がわかってきたところなので書き換えたいところをmacOS用(mac使ってる方の場合)のmiというhtml用のテキストエディタを使ってコピーして、そこで編集したい部分をコピーしてきてmiの上で見比べながら編集したものを私はXサーバーを使ってるので、Xサーバーの.htaccess編集するところにペーストしました。
※コピーペーストされる際は元のテキストをhtml用のテキストエディタに別ファイルにコピーして保存しておくのを忘れないでくださいね。間違えた場合、落ち着いて元のテキストを貼り直すと前の状態に戻せます。
そして速度を測り直すとスマホのページスピード数値の一つInteraction to Next Paint (INP)の部分がオレンジの部分だったんですが綺麗に無くなりました。ちなみにINPがオレンジからなしになってもスマホのページスピードの数値は93から95と言うほどかわりませんでした(ちなみにfontのキャッシュ部分は一年後のままでわざと残しています。どう変わるのか知りたかったのであえて残しました)。
ブログをされている方それぞれのリライトの回数などにもよりますし、人によって設定も違うのでこれが正解というのはわかりませんが、私の場合はリライトが多く画像はそれほど頻繁に変えたりすることがないので、画像は２ヶ月に設定し、text/cssは2週間、text/x-javascriptも2週間に変えました(先程の検索結果の上位の方の意見を参考にしました)。
この後すぐ新記事(画像多め)をアップすると、またINPがオレンジ色になりましたがスマホ速度は96に1上がりました。新着記事をトップページの最初に置いているのですが、そのせいなのかどうかはわかりません。
今のところスマホのページスピードは96が精一杯です。最初の頃は30とか40が普通な私のブログだったので96でも充分合格です(この後Advanced Editor Tools (旧名 TinyMCE Advanced)を削除すると、スマホは94前後から97へと少し上がりました)。
プラグインを19個も入れてるけどスマホ速度は93から97が出ている結果になった
ブログを始めた頃は「プラグインは少なめが良い」と学んでいたので私はなんとか自分で書き込んでチャレンジしたりしていました。
２年後の現在です。
なんと19個もプラグインを入れてるのにスマホ速度は94から97と90台、PCは100が出ています。
この経験をふまえて思うのはやっぱりトップページに広告を置かないことが最短で最速になるのかなあ？と思います。
広告を認知させないように書き換えするのもあるみたいですが、私はそれができないのでトップページには表示させていません。
参考程度に現在入れているプラグイン名を載せておきます。
Ad Invalid Click Protecter
AddQuicktag
Async javaScript
Autoptimize
Classic Editor(停止中)
Code Snippets
Contact Form7
Flying Scripts
Gutenberg用ブロックプラグイン2(アフィンガー6のプラグイン)
Imagify
Invisible reCaptcha
Kattene
Really Simple SSL
Redirection
Site Kit by Google
SiteGuard WP Plugin
WebSub(FKA.PubSubHubbub)
WordPress ping Optimizer
XML Sitemap &Google News
20個目のBroken Link Checkerを追加しました。その理由は・・・・
後日あることが原因でBroken Link Checkerというプラグインを入れました。これで20個目です。
私は自分のブログを実際に見てチェックすることがほとんどなかったのでわからなかったことなんです。
編集画面で編集したい記事に入ると同時にずらずらっと英語でWarning〜の文言が一瞬並んでから編集画面が映るのでなんか変だなとは思ってたんです。
こんな感じで一瞬でる
Warning: array_filter() expects parameter 1 to be array,〜
Warning: array_pop() expects parameter 1 to be array,〜
久しぶりに自分のブログを見てみよう〜
知育玩具のところを何気なく見てみると。
あれ〜！！Warningなんとかとズラっと並んでるじゃないですか！！！
きゃーどうしよう、自分の編集URLも出てるしこれダメなんじゃない？と慌てて気が動転しかけましたが、落ち着いてよく見てみると「kattene」が入ってるのでピンときました。
一度katteneを停止させてみよう
するとWarningが綺麗に消えました。
もしや、アフィリエイトのリンク切れのお知らせを示してるんじゃない？と気がついてBroken Link Checkerを入れた次第です。
カッテネを使っていてリンク切れになると、このような文言がブログのページのトップに出ます。
Warning: array_filter() expects parameter 1 to be array, null given in /home/・・・・・・・・・・・plugins/kattene/plugin.php on line○○(○の中は数字)
Warning: array_pop() expects parameter 1 to be array, null given in /home/・・・・・・・・・・・・・・・/kattene/plugin.php on line
カッテネのリンク切れが多ければ多いほどそのままずらっとブログ上のトップのところに出ます。
20個めで遅くなりそうで嫌でしたが、こんな状態は見たくないので。
Pagespeed insightsで見てみるとスマホは93〜96、パソコンは100でそれほど変化はなかったようです。
40代後半からのワードプレスはハードルが高いなあとつくづく思います。
