このブログは、エックスサーバーというレンタルサーバー上に、WordPressを走らせています。
WordPressで作ったサイトで、何をどう表示させるかを決めるのが「テーマ」です。
このテーマ、自分にピッタリなものがなかなか見つからず、見つからないなら作ってしまえばいい、と考えました。
しかし、イチから作る技術は、私にはありません。

ということで多くの方と同じく、既存のテーマを自分なりにカスタマイズして使っています。

「超軽量」テーマを目指す。使わないものはいらない

カスタマイズのベースは、無料テーマの中でも評判のいい、Gush2 を使っています（作者様、ありがとうございます）。
サイズが比較的小さい（ファイル数も少なく、内容がシンプル）ことが、このテーマに決めた理由です。
ひとつ前のバージョンである、Gush の方がさらにサイズが小さかったのですが、初心者の私には必要な機能を加える方が難しかったため、機能豊富な Gush2 から不要な機能を削っていくことにしました。

現時点で行ったカスタマイズは、大まかにいうと下記の通りです。

• SNS機能の削除（連携も拡散も）
• タブレット表示の削除（PC表示とスマホ表示の二択）
• 広告ウィジェットの削除（広告は.phpに直接配置）
• PC表示とスマホ表示のメニューを統一
• フッターウィジェットの削除（使いません）
• その他、表示の細かな調整

しかしここまでカスタマイズしても、Googleさんの PageSpeed Tools「Analyze your site performance」でのスコアは、最高点でも満足のいくものではありませんでした。

• モバイル　Poor　63 / 100
• パソコン　Needs Work　75 / 100

やっぱりここは、「Good」と呼ばれたい

広告を貼っているせいもあるのでしょう。
Googleさんの推奨事項を、素直に聞き入れていないことも大きいのでしょう。
いくらGoogleさんに、
「このページは最適化されていないため、ユーザー エクスペリエンスが低い可能性があります。以下の推奨事項を優先的に適用してください。」
と言われても、

・理解できていない「圧縮」に頼りたくない
・評判の良くない、キャッシュのためのプラグインは使いたくない
・読みにくくなるから、CSSの縮小もしたくない

ということで、八方ふさがりです。
仕方なく、ここで大きな決断をすることにしました。

リセットCSSを使わず、表示をブラウザにゆだねる

リセットCSSとは、各ブラウザがデフォルトで持つCSSをリセットするために用いるCSSのことです。
現在使っている Gash2 にも、CSSの冒頭に「リセット」という項目があります。
これは、ブラウザ本来の表示をリセットした上で、こちらの意図する表示スタイルを定義していくためのものです。

このリセットCSS、こちらが意図した表示を提供できるという意味では便利なのですが、これが本当に正しいことかは疑問です。
ユーザーが、ChromeやFireFox、IEといったブラウザのどれを使っても、同じ表示になってしまうことは、良いことなのでしょうか。
そのブラウザを気に入って使っているユーザーに対しては、「ブラウザのデフォルト表示で済ます」という選択肢もあるはずです。

ブラウザのデフォルトCSSを活用するということは、こちらのCSSで用意する量を減らすことにもつながり、お互いに「良かった良かった」ということになります。

ChromeとIE11、それに iPhoneでうまく見えればそれでいい

表示をブラウザに依存させるためには、対象になるブラウザを絞る必要があります。
Chrome、IE11、iPhone（Mobile Safari）、この三つのブラウザで、うまく表示されるように調整していきます。
単純に、私の環境ですぐに確認できる三つがこれらなのですが、これらでほぼ十分でしょう。

たまに時間のあるときに、Microsoft Edge と Android でも見ておくことにします。
FireFox は、わざわざインストールしてまで見る必要はないでしょう。
シンプルで簡単なCSSにしておけば、どんなブラウザでもそれなりに表示されるはずです。

jQueryは必要ない。というよりJavaScriptも使わない

修正の途中で、右下の「TOPへ」戻るボタンも気になってきました。
確かに常に表示されていて、押すといつでもページの先頭に戻れるすぐれもの。
なおかつ、巻き戻しアニメーションのように、滑らかに最上段まで連れてってくれるのですが、はたして必要なのでしょうか。

最近の個人のブログには、どのサイトにも当たり前に存在しますが、そもそも私は押したことがありません。
PCならスクロールバーで戻りますし、一番必要になりそうなスマホでは、そもそも表示されません。

記事を読んでる途中でも戻れるというのは、ユーザーフレンドリーにも見えますが、「つまらない記事ですいません。いつでも戻っていいですよ」と言ってるみたいにも見えます。
記事の最後やフッターに、「ページTOPへ戻る」というリンクがあれば十分です。

また、この機能だけのために、jQueryを読み込んでいるみたいですし、そもそもJavaScriptを使っているのもこれくらいです。
ここは、ついでに削除しておきましょう。

そうしてついに、「Good」！

頑張りました。
再び、Googleさんの PageSpeed Tools「Analyze your site performance」でのスコアを見てみましょう。

• モバイル　Needs Work　83 / 100
• パソコン　Good　86 / 100

まあ、十分納得のいく数字です。
しかし私の別サイトでは、同じくWordPressで、同じように広告を貼りながらも、モバイル96、パソコン97で、Good・Goodをたたき出しています。

最終的には、これを目指すことにしましょう。

スポンサーリンク