WPのテーマをSANGOからSTORKに変更し、カスタマイズしました

SANGOが遅い

2日間、SANGOをCSSでカスタマイズしていました。
やっと納得のいくデザインになったと思い、GoogleのスピードツールPageSpeed Insightsでテストしてみました。
結果はPCでたったの9。カスタマイズしていない親テーマでも結果は変わらず。

不具合を特定するのにも時間がかかりそうなので、テーマを変更することにしました。

いくつかのテーマを試した結果、STORKとStudiopressのGenesisで良い結果が出ました。
元々のデザインが良くて、カスタマイズが簡単なSTORKを選びました。

PHPとCSSでカスタマイズ

STORKは人気のテーマなので、多くの人が利用しています。
オシャレなSTORKの良さを残しつつ、他の人と違うイメージに仕上げようと思いました。

SNSボタン

ディフォルトのSNSボタンが気に入らなかったので、PHPとCSSで作りました。
Twiter、Facebook、はてブの3つに絞りました。
さりげない印象になり、サイトの読み込みスピードが上がりました。

フォント

サイト全体のフォントの種類やサイズ、色を変えました。
読み込みスピードが遅くなるので、Googleフォントの使用を止めました。

見出し

h2とh3の見出しが縦に長かったので、Paddingを使って短くしました。

ディフォルトのアイキャッチ画像を設定

アイキャチを登録しない場合、ディフォルトのアイキャッチ画像が表示されるようにしました。
気軽の投稿できて、サイトに統一感が出ます。

その他

検索窓、タグクラウド、カテゴリ名のデザインを修正しました。
シンプルで見やすく、オシャレを目指しました。
オシャレって自分で言うと、なんだか負けな気がします。

読み込みスピードを改善

PageSpeed Insightsでのスコア評価はMediumでした。最低でもGoodを出そうと修正しました。
Webサイトの表示速度は、離脱率やGoogleの評価に影響します。

画像圧縮と非表示

シンプルなプラグインEWWW Image Optimizerを使いました。
投稿ページでのアイキャッチ画像を非表示にして、軽くしました。

CSSとHTMLを最適化

プラグインAutoptimizewを使いました。日本語で表示されるので、分かりやすいです。

その他

読込順序の変更やgzip圧縮をしました。AMPは表示が崩れるので、使うのをやめました。
キャッシュに関しては、WPXサーバーを使用しているのでサーバー側で設定しました。
キャッシュ系のプラグインを使うと、不具合を起こすリスクがあります。

最終的には

最終的なスコアは、PCで93、モバイルで86になりました。
Googleアナリティクスやアドセンスを入れているので、この辺りが限界かもしれません。

GTmetrixでも90%辺りのスコア。

あとは書くだけ

基本的なデザインが出来て、SEOやスピード対策が完了しました。
いろいろな分野に精通したり、文章やデザインの勉強をしたりして、より良いサイトに仕上げていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です