今回行った事を簡単に書きます。

テーマ入れ替えの目的

大きな理由としてはデザイン面です。

旧デザインで使用していたテーマは下記のテーマ、TCDのOOPS!です。

元々このサイトは更新頻度とかを考えておらず、投稿ページ機能も何か新作情報がある時しか更新することを考えていなかったので1枚のページ、ランディングページとしてのデザインを重視してました。

しかし最近は徐々に趣向が変わってきまして、投稿ページ、ブログの更新が増えてきました。（色々と試したい事があって）

OOPS!はランディングページ向けのサイトテーマなのでブログ更新を頻繁に行うサイトと言うより、どちらかと言うと固定ページ内容の方を充実させる方向だと思います。

OOPS!のデモサイトを見ればわかると思いますがブログ更新内容はサイトの下、フッター部分あたりに表示される構造となっており、現状の方向性と乖離してて良くないよなぁ？と思いまして。

もう一つはウェイジェット内に情報を満載する等のページ価値を高めるテクニックが使えなかった事にあります。

OOPS!はフッターウィジェットをトップに表示させるとかが出来なかったんですよね。タグマネージャーや人気のある記事一覧、等は載せられなかったのです。

今回採用したWordPressテーマ

入れ替えるテーマの選択肢は色々考えたのですが、OOPS!同様のTCD販売のテーマ、ROCKを採用しました。

ROCKはトップページのヒーローイメージの自由度はOOPS!に劣るのですが、ブログ更新を主とする場合は見た目と機能性を良いバランスで両立可能なテーマです。

ヒーローイメージの箇所は任意の投稿ページのキャッチを表示させることが出来るので、まぁこれまでも似たような内容しかここには表示させてなかったのでほとんと影響無しです。

恐らく最大の良さは大量の投稿ページをそれぞれのカテゴリごとわかりやすく分類して表示させられる点なのだと思います。現状このサイトにカテゴリー数も投稿数もそれほど無いのでアレなのですが。

最新の投稿内容をたくさんトップに表示できるのがこのテーマの良い所の１つですが、今の所気に入っている点としてはフッターウィジェット、サイドバーウェイジェットです。

まだフル活用してませんけどトップ、投稿、固定のそれぞれに別々のウェイジェットを設定できるので情報的に無駄のない構成が出来るようになりました。

サイト速度について

サイト速度については基本的には使用している画像のサイズと複雑なcss、jsを使用しないことが効果的なのですが、TCDのテーマはどのテーマも共通して高いデザイン性の代償としてこの点にやや問題があります。

ROCKのデモサイトはメニュー等に複雑な機能を多く使っている事もあり、速度的には今ひとつとなってます。↓

色々と考えたのですがこの対策としては一部の機能は使用をそもそも諦める、というのが1番楽だったので5150のサイトではメニューに関する特殊表示機能、読み込み時のアニメーション、フッターに最新記事を載せるスライダー、といった機能を使用してません。

機能を一部使用しなければその他についてはデフォルトでも優秀な構造なようで、特に改善ツールを入れなくてもまずまずの数字を出せるようです。↓

逆にAMP等を入れると様々な不具合や速度低下が起こり、色々検証したのですが何も入れず画像類の圧縮程度に留めるのが無難そうです。

とりあえずしばらくこれでサイト運営を行っていこうと思います。

当面の予定は新しい記事投稿と並行して大昔のhtml直打ちでやってた頃のコンテンツなどをWordPressの方に引き込んだりといった、「これまで面倒でやってなかった事」をやったりしようと思います。

めんどくさいんだよなぁ…。でもやらないとなぁ…。

前々から「このサイト読み込み遅いなー…」と思ってたのですが、「トップに動画使ったりしてるからなのかなー…」と諦めてました。

しかし最近わかったのですが、そうゆう事ではなく全然改善できるみたいなんですね。

出来るのであれば、勉強がてらやってみよう！！！と思い立ち速度改善の大海原へ漕ぎ出したってわけですよ。

速度改善のメリット

単純に自分のストレスが減るのもありますが、検索エンジンからの評価が高まり検索順位が上がりやすくなります。

SEO対策というやつですね。

一般的にはコンテンツ、記事類を充実させることがSEO対策という感じなのですが、検索エンジンの仕様ではコンテンツとサイトスコア（速度を含む）の平均値を評価点とするようです。

つまりコンテンツ充実させるだけではダメらしい。

まぁ…このサイトはそうゆう目的のものとは言えないので効果は期待してないのですが手を出しやすそうなのでやっていきます。

速度計測ツールについて

色々とあるのですが

PageSpeed Insights

GTmetrix

の２つを使います。

どちらもURLを入れて読み込ませるだけでサイトを速度や構造を数値化してくれます。

あと改善可能な点を指摘してくれる。便利！！

現在使っているレンタルサーバーについて

このドメインでホームページ始めた時からずっとですが、ロリポップを使ってます。

スタンダードプランで、PHPバージョンは7.3のモジュール版です。

安いサーバーなので速度面は多分あんまり良くないと思います。

現在使っているWordPressテーマについて

TCDのOOPS!という有料テーマを使ってます。

簡単にそれっぽい外見を作れるという理由で選びました。

で、このテーマ外見は良いのですが速度とかそうゆう面はそんなに強くないようです。

公開されているテストサイトを試しにPageSpeed Insightsで計測してみたところこんな感じ↓

パソコンとモバイルとでそれぞれの速度を計測してくれます。

パソコンに強くスマホに弱い模様。

なお、結構ムラがあるので図るタイミングによって数値が多少変動します。

GTmetrixだとこんな感じ↓

PageSpeed ScoreというのはGoogle基準の点数で、YSlow Scoreというのはヤフー基準の点数です。

このテーマはGoogleよりヤフーに少し強いようです。

Fully Loaded Timeの項目がすべてを表示させるのにかかった時間。

数値としては悪くないですが、あんまり良くもない…という感じです。

自分のサイトだとこれよりはるかに点数悪かったのですが、その時の計測データが無いのでとりあえず上記のを基準にして改善していきます。

なお、今回の高速化にあたってテーマphpやcss、functionには手を加えずに数値を出すことを目指しました。

改善するために行った事　①クラウドフレアを導入する

ドメインネームサーバー（DNS）を提供してくれるサービスで、ざっくり言うと負荷を分散させて読み込み速度を改善できます。なんと無料（有料プランも有り）。

導入はそんな難しくないですがサーバー側の設定変更とかがあるので、よく調べてから行った方が良いと思います。

デメリットとしてサーバ地が外国になってしまう事と、キャッシュに関してWordPress上でなくクラウドフレアのアカウント内で処理しないといけない等の手間が増えます。

あとクラウドフレアに障害が起こったりするとダイレクトで影響を受けてしまいます。

企業サイトとかでも利用されてるケースがありますがそうゆうサイトは有料プランにした方が良いと思う。

とりあえずこれを導入しました。

改善するために行った事　②AMP導入

AMP(Accelerated Mobile Pages)はサイトのキャッシュ情報を検索エンジンに記録させ、ページの読み込み速度を早くするためのものです。

パソコンに比べて回線が弱いスマホとかでも快適な読み込み速度を実現するために考案されたそうな。

詳しい仕組みはよく知りませんが導入自体はプラグインだけで可能なようです。

設定も３つのモードから選ぶだけでしたので今回1番簡単な作業でした。

改善するために行った事　③コードの最適化、画像の後読み

css、js等に書き込まれているコードを最適化させる事で読み込み速度を向上させる事が出来ます。

ただこれらについては難しい所があって、あんまり最適化を攻めすぎるとサイトが上手く表示できなくなる可能性もあります。

手動でも出来るのですが便利なプラグイン、Autoptimizeを教えてもらったのでこちらを使用。

今使用しているテーマはインライン化などを行うと表示がおかしくなったり逆に遅くなったりしたので最終的にあんまり攻めない設定にしてます↓

また、このAutoptimizeというプラグインは画像の後読み、「Lazy-load」の機能も備えていたのでそちらも適用しています。

画像の後読みについてはページをとりあえず表示させた後に画像類を読み込む…という挙動をさせる事で、これによって速度数値の一部が改善されます。

改善するために行った事　④画像サイズの変更、圧縮

今まで画像データのサイズに関して無頓着だったのですが、計測ツールからかなり指摘を受けたので手入れをしました。

解像度だけでなく同じjpgでもさらに圧縮が可能だったのでI LOVE IMGというオンラインサービスで画像類を圧縮し再アップロードしました。

結構大きな効果がありました。

その結果…

GTmatrixではGoogle90％、ヤフー95％

speedinsightではモバイル90点、パソコン98点

なかなか良いスコアではないかと思います。

Fully Loaded Timeを見るとテストサイトとあんま変わらない…むしろ0.3秒遅いですがファーストビューの速度のおかげか体感的には相当速くなった感じがします。

他にも使用していないのにヘッダーから読み込ませているcssとか色々ありそうなんですけどもはや面倒な領域なのでここいらで手打ちとしようと思います。

結論、結構手間がかかりました

多分現在このサイトは検索エンジン的に優良な内部スコアだと思います。

が、それに至るまでに結構色々と失敗してます。

上記で紹介した以外の方法もあれこれ試した結果、短時間ではありますがサイトが表示されない状態になったりもしました。（FTPから入ってコード直接いじれば概ね何とでもなりますけど）

内部スコアを高めてSEO対策したい！という人はスコア重視のテーマを使用するのが楽で良いと思いました。

外見も動的な感じにしたい場合は頑張る、もしくはプロに頼むしかないですが上記で紹介した方法である程度のスコアまでは攻められるので参考までに。

おまけ

何となく、重いサイトの評価も見てみたいな…と思いメロンブックスのサイトを計測してみました。

引くくらいスコアが悪い……！！！！！！！（でも検索順位は高い）

ホームページ更新録

例によってワードプレスでホームページを作ってます。

これまでテーマに無料テーマを起用し別途CSSに手を加えてカスタマイズして使ってたんですが、内容とあと近年のブラウザサイズ事情に合ってないため変更しました。

今回のは思い切っての有料テーマです。

無料テーマを利用してて分かった事

デザインに関しては有料テーマと無料テーマとでは圧倒的に有料テーマの方が優れてると思います。

一応無料テーマでも頑張ればサイトに合わせた良い感じのデザインにできるんですけど、僕のようなホムペのアマチュアだとかなり時間かかります。

スティンガーみたいにメジャーなテーマだったらカスタマイズ方法に関してネットでもかなり掲載されてるので頑張れるには頑張れるんですが……頑張った割にうまく出来ないんですねー。

ワードプレスを延々格闘しながら「僕はホームページ作りのプロになりたいわけでも何でもないので、これは時間の無駄では…？」と思い始めました。

ホームページやブログの方向性や目的が定まっていない段階でいきなり導入するのはアレなんですが、僕のようにクリエイターとしての拠点にしたいなー、という明確な目的があるなら早いうちに何か有料のを導入する方が早いし完成度高く作れる！と気付いたわけですね。

まぁ、活動１０年経過してるので今更なんですけどね。

有料テーマを利用してみてわかった事

めっちゃ楽。

あまりにも激安だと別ですけど、機材もソフトウェアも新しめの製品というのは手軽に時代に合ったものを作るのに最適ですね。

僕がまだちゃんと慣れてなくて整備が甘いんですけど、何となくで設定してもそれっぽくナウい感じになります。

画像が揃ってさえいればこのサイトのトップページくらいなら３０分程度で作れます。

ブログ系のテーマはもっと簡単なんじゃないかと思います。

ビフォーアフター

これが↓

これになりました↓

ウィジェットが充実している

機能が最初から充実してるので別途プラグインをあれこれ入れなくて良いように出来てます。

1. ブラウザサイズに合わせたレスポンシブ表示切替
2. 表示順の入れ替えが可能なコンテンツビルダー
3. ローディング画面の設定機
4. 主要SNS連携ボタンフル装備
5. 記事ごとに設定可能なカスタムＣＳＳ
6. ロールオーバー機能
7. トップ画像はキャッチ含め３種類を数秒ごとに切り替え可能
8. トップは画像でなくmp4やYouTubeの直リンクで音無し動画を流す事も可能
9. PC,スマホで別のフッター設定機能
10. 広告管理機能
11. 複数のCTA機能
12. コンバージョン測定機能

他にもまだまだあるんですが、デザインだけでなく優秀な機能が備わってます。

完全に僕にはオーバースペックなんですけどね。長期的に見てこれにしました。

ちなみにこのサイトではTCDのテーマを利用してます。

おわりに

途中にも書きましたが、ホームページやブログの方向性や目的が定まっていないうちは無料テーマの方が良いと思います。

しかし目的が定まってそのために何が必要かがわかってきたら思い切って有料のテンプレートを導入した方が良いかもしれません。

とりあえず僕は操作が楽になって時間短縮できるようになっただけでも導入してよかったなー、と思ってます。

大昔にやってたHTML手打ちにはもう絶対戻れないよ…。