ブログ制作について何にもわからなかった主婦がわからないまま突っ走って現在、迷走中・・・・。
記事の最後にプラグインなし、ブロックエディタで簡単につくる目次の作り方(アフィンガー6向け)を載せています
最初はルクセリタス を使用
立ち上げて当初は無料テーマ「ルクセリタス」を使っていました。
私のような全くのド素人でも気がつくと結構サクサクと検索結果が良くなっていき、表示速度もスマホは80超え、PCは100近い数字をだし、見てくださる方も増えてきて喜んでいましたが欲も出てくるもので
「もっと自分の好きなデザインにしたい、画像をきれいにしたい」といろいろプラグインを入れるようになっていきました。
ネット上に溢れているブロガーさんの情報を片っ端からわからないまま読み漁り、読んだままその通りに。
でもだんだんと不具合が出てきておかしくなってきたので、
またここはド素人。「有料テーマならより快適に作れるかも。」と安易な気持ちでアフィンガー5を購入。
そして今度こそもっと快適に自分の表現できるように作れるかな？と思ったら・・・・・・。
アフィンガー 5を購入
不思議ですね〜、反比例してどんどん最悪な方向に。
検索結果も圏外が増え本格的な巣ごもりサイトになり、スピードも遅くて酷い時はスマホの速度が9。
9が出た時はあまりの低速度に気が抜けてしまいましたね〜。
またGoogle Search Consoleのウェブに関する主な指標にあった100以上ずらっと並んでいた緑の良好 URLが0に。
現在はなんとかスピードは40台をウロウロしてます。
→2021年の今はやっと、良好URLが全件緑色でクリアしました。
（PCのほうは速度も75と悪くはないんですけどね。でも今だに良好URLは0です。）
→こちらも2021年は全て良好になりました。なぜ良くなったのかは不明です。
ちなみに同じ有料テーマで作っている方で公式HPにおすすめで載っている方のHPのスピードを測ってみたら・・・・・・。
なんとスマホは26、PCの表示速度も64・・・・・・・・。
家のPCで見ても画面が全部表示されるのに少し時間がかかりました。
（お洒落なHPや凝ったHPを見学しましたが、速度が遅いHPが多かった印象です。）
でも検索順位はその方のHPのサイト名で検索すると24位。
もしかして、表示速度って検索結果とあんまり関係ないんじゃない？？
と思いましたがどうなんでしょうね。不思議です。
PHPなどファイルにも書き込み、調べ尽くして最善の状態になるように毎日毎日苦戦してきたのに。
２年間ブログを作ってきましたが、毎日毎日トラブル連続でした。
どうして、なんで？ということの繰り返しでした
突然わけのわからない状況に涼しい顔をしてエラーを報告してくるので、それに対応するだけでほぼ一日潰れていました。
現在は、なんとか慣れてきました。
ふと気がつくと目の前にエラーがある日々
何気なく目の前にあったメッセージパネルをみにいくと、エラーがいろいろあるじゃないですか〜。
え？
ページのリソースの一部を読み込めませんでした、これはbotがページをどう認識するかに影響する場合があります、問題を解決してbotが全て取得できるようにしてください
今頃やっとメッセージパネルという存在に気がつく私です。
そっか、そもそもbotさんが我が家に入れないように私が設定してしまってるのか〜。
PCに夫が入れてるセキュリティソフトかな？
botさん関係は私がいじるとPCを真っ白、もしくはエラーページを出してしまうのでここは夫に任せようと決めました。
ワードプレス、無料テーマ、有料テーマという言葉を昨年覚えたばかりですが、
初心者には無理です。
精神的にギリギリの状態です。
はてなブログ等にしておけばよかったと正直思っています。
一つだけ良いこともありました。
CSS、html、PHP、Google関連など日々勉強になりごくわずかですが知識は増えています。
最初はシンプル イズ ベストになるように目指していた
サイトのスピードに関してはデザインなど省けるものは省いたり、プラグインを削除したりとしていますがなかなか改善されません。
昨日は「これだけでブログは作れる！検索も圏外から脱出！」「これだけやれば大丈夫！SEO」というような本も買ってその通りにしていっていますが良くなりません。
息子は今まで一切挫折を知りませんが、私は紆余曲折いろいろ体験し挫折しまくってます。
親子でこの両極端な人生は悲しみを通り越して面白いです。
私はブログ作りで「シンプル イズ ベスト」という言葉を覚えました。
悲しいですが、シンプルにすればするほど速度は上がっていくようです。装飾関係、画像など凝るのはもうやめました。
ディベロッパーツールで確認するとSEOは92スコア出てました。アフィンガー5のテーマはSEOは良いようです。
スマホも私にとっては超憧れの黄色い数字、50。まだ一瞬しか出ませんけど常時出るようになったらいいなあ(2021年はスマホでやっと48〜52が出るようになった)。
閲覧時のサイト横幅もGoogle基準の980pxに変更。
ちなみに私が使っているプラグインは、
Autoptimize
表示速度に関するプラグインはこれしか入れてません。
EWWW Image Optimizerは入れるとなぜか遅くなるので省きました。
現在入れている表示速度改善系プラグイン
以前w3 total cache を使っていましたが、アドセンス審査合格の後、広告をはると急激にスピードが低下したので削除しました。
Cache Enablerは設置するだけですごく簡単なプラグインです。コツがあるそうで、一度キャッシュしてからが効果を発揮するみたいです。
実際にGoogleのPage Speedで速度を測る時は、
- Autoptimizeの設定の一番下にある、「変更の保存とキャッシュの削除」を押すか、ワードプレス管理画面の一番上にあるAutoptimizeの「キャッシュを削除」を選んで消す
- ブラウザのキャッシュも削除
- ブラウザから自己HPの表示を消す
- サーバーのキャッシュをする
そこからPage Speedで速度を測ると、スマホは52と上昇。
でも、広告貼ってると速度が上がりにくいです。
エックスサーバーのXアクセラレーターを使う時はキャッシュ系プラグインはバッティングすることが多いので控えた方が良いそうです。サーバーのブラウザキャッシュ設定も時々押して使うと速度が早くなります。
AutoptimizeはXアクセラレーター2と相性は悪くないそうなので使っています。
ランキング系プラグインを変更、そして削除へ
最初はWPPは遅くなると聞いて、ランキングプラグインを変更していました。
WordPress Popular PostsからSimple GA Rankingへ変えていた
プラグインなしで何度かランキング系をいじってみましたが、画面真っ白になったりおかしくなったりするのでやめました。
ランキングの代わりに、「おすすめ」「更新」として読んでもらいたい記事を自分で選ぶようにしました。
今のところ訪問人数の変化に問題はなく、私のサイトもランキング要りませんでした。
ランキングをなくしたほうが幅広く記事を読んでもらえている感じがします。
広告表示を変えてみた
そしてプロブロガーさんのHPをもう少し拝見。
トップページのメインページには広告を貼っていない（サイドバーには貼っている)方が多かったので参考にしました。
サイドバーにGoogle検索を使っていましたが、「検索窓はほとんど使われない」らしいのでアフィンガー5の普通の検索窓に変更。
本当は検索窓も削除したいのですが、私のHP作りが雑多で整理整頓できてないので見る方が探すのが大変かなと残すことにしました。
画像圧縮
画像はPhotoshopでweb用に保存を選んで低画質や中画質の画質に変えて画像の縦横のサイズも変えて保存するようになってから速度が改善されてきました。
その画像をさらに圧縮できそうな時、Squooshを使っています。
Squooshを使うようになってやっと黄色いラインがモバイルでも見れるようになりました。
中に書き込んだりとか書き換えたりしたこともあるのですが、なんせド素人なのですぐ真っ白かエラー表示出るんですよね。
それが怖いので今は中をいじるのはほとんどやっていません。
プラグインもほとんど使ってない物は思い切って削除したりしてます。
→現在はPhotoshopの「web用に保存」を使い、Imagifyでwebp化してさらにSqooshで圧縮できるものはしています。
画像に関しては最近やっとアイキャッチ画像に最適なサイズがわかりました。
PageSpeed Insightsの第三者コードの影響を抑えてください
プラグインAutoptimizeの追加を選ぶとサードパーティのドメインに事前接続するのところに、この第三者コードに挙げられているURLをコピペ。
書き込みましたがあんまり改善されず。うーんなんでかなあと達人HPを見学。
reCAPTCHAを読み込むので遅くなる？
そーなんだ〜とその方の通りに。
お問い合わせのページを利用する時だけreCAPTCHAを読むように書き込むそう。
スラッグ（ページの名前）がcontactでそのまま同じだったので文言をfunctions.php にコピペさせてもらいました。
すると、スマホで初めての86！！
嬉しかったです〜いきなりの86!
あとはプラグインを使わず目次を書き込んだりといろいろ改善しないといけないところがまだまだたくさんありますが、やっとイエローゾーンに常時居れることが増えたので嬉しかったです・・・・・。
しかし。
Autoptimizeの機能を使ってなんとか改善
その後アフィリエイト、Google広告を貼ったり画像も増えてスマホの速度も40台に激減。
もう少し上げたいとプロブロガーさんのHPを検索しまくり、なんとか理解しました。
Autoptimizeの追加のところにある「サードパーティのドメインに事前接続 (上級者向け)」と「リクエストの事前読み込み (上級者向け)」を使います。
事前接続にはドメイン(.comとか)のみを記入。事前読み込みにはドメインだけでなく詳細なアドレス(.com/・・・jsとか)を記入。
事前接続の方はページスピードインサイトの第三者コードに記載されている青いサイト名を右クリックして「リンクのアドレスをコピー」を選んでコピー。
事前読み込みに載せるほうは青いサイト名の下に並んでいる黒い文字のアドレスの方を右クリックして同じくコピー。
（不具合が起きるかもしれませんので試される場合は自己責任でお願いいたします。)
私の場合は事前接続だけ載せても変化なしだったので、事前接続のほうはブロック時間が0以上のものを全部書いて、事前読み込みのほうはCDNのajax.googleapis.com、Google/Doubleclick Adsのgoogletagservices.comだけにしておきました。
これでキャッシュをしてから試してみると、やっとPCは96とか出るようになりましたが、スマホは56です。
でもやっとなんとかスマホが赤色から黄色に安定してきました。
プラグインを次々削除
BackWPup
バックアップはサーバーでとってくれてるので要らないなと削除。FTPでもできるそうですがやり方を覚えていません。（削除は自己責任でお願いいたします・・・・)
Ps auto sitemap
HTMLサイトマップ自動作成するプラグインを削除→functions.phpにサイトマップ用ショートコードのコードを達人HPでコピーさせてもらったものをペースト。あとは固定ページにショートコードを書くだけ。
有料目次プラグイン
削除(購入したのですが極小サイトでは必要なかったです)→テーマにそのままついてる目次タグですぐ設置(簡単なのでぜひそちらを使ってみてください)。
でも現在、私はワードプレスのブロックエディタだけで目次を作っています(アフィンガー6を使っている方向け)。
目次をブロックエディタで簡単につくる作り方(アフィンガー6ユーザーの方向けでプラグインなし)
目次表はテキストを並べただけのものにアンカーリンクを貼り付けても良いのですが、デザイン的に少し綺麗にしたいなとSTNGERの見出し付きフリーボックスを使いました。
編集画面左上の黒い＋を押して、STINGERのところにある見出し付きフリーボックスを選びます。
選ぶと編集画面右側にこちらのものが出ます。
見出し幅というところのレバーを右に変えると100%になります。
すると下のようになります。
見出しテキスト
次に見出しのテキストを目次に書き換えて、アイコンもお好きなものに変えれば目次表の完成です。
出来た目次表の中にブロックエディタの段落の中のリストで書いて、あとはブロックエディタで各目次リストとそれに対応する各見出しにアンカーリンクを使ってそれぞれ指定するだけです。
アンカーリンクの指定の仕方は「ブロックエディタ 目次」で検索してブロガーさんの説明通りにしました。簡単なので一度やってみてくださいね。
目次プラグイン等を削除すると劇的にスマホの速度が上がりました。
有料テーマはアフィンガー5(現在は6)を使っていますが、SEOに関して効果を発揮していると思います。Googleクロームの拡張機能、Lighthouseで数値を測るとスピードは遅いですが、SEOは携帯92点、PC100点とどちらも緑色です。私はGoogleの構造化支援ツール等使ってマークアップ以外特別何もしていませんのでその点はすごくよかったなと思っています。(アフィンガー5にも構造化データ設定があるようです。)
このように以前はプラグインを削除して少なくしようとしていましたが、3年後の現在は16個も入れてます。
後述しているおすすめのこちらの記事に載せていますのでよろしければご覧ください。
