リセットCSSは使わない。jQueryもJavaScriptも不要。もっと軽く速く簡単に

公開日:   最終更新日:2019/12/21

このブログは、エックスサーバーというレンタルサーバー上に、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をたたき出しています。

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


応援ありがとうございます→ にほんブログ村 士業ブログ 社会保険労務士(社労士)へ

スポンサーリンク

関連記事-こちらもどうぞ

コメント一覧

  1. どらみ より:

    Firefoxでの表示の確認はお任せください。
    大丈夫ですv

    ルクセリタスのるなさんのサイトではページスピードがパソコンもモバイルもオール100点。

    どうやったらそんな化け物のような数字が出せるのか・・・
    うちなんて、もうボロボロ(笑)
    あまり気にしないことにした。
    ↑ これがなぜ木にしないことにした
    と変換されるのか!w

    • その他登録の社会保険労務士 その他登録の社会保険労務士 より:

      おお、ありがとうございます!
      これで、ほぼすべてのブラウザ制覇ですね(他に何かありましたっけ?)。

      あと、どらみさんのサイトで、たまに画像が表示されない謎が解けました(笑)。
      でも再読み込みすれば表示されますし、じゅうぶん早いから大丈夫ですよ(私のPCが遅いだけ、とも言います)。

      以前、ワードプレスも入れずにindex.htmlだけのサイトを作ってみたのですが、それでも点数は99の99。
      やっぱり、ただ軽量化するよりも、高速化の仕組みをガンガン取り入れた方が早いのですね。
      ここと同じテーマを使っていた別のサイトのテーマをルクセリタスに変えたら、いとも簡単に点数が上がってしまいました。

      それでもこのサイトでは初志貫徹。理解できない高速化よりも、更なる軽量化をめざしてがんばります!
      (ある日突然ルクセリタスに変わっていたら、見て見ぬふりでお願いします(笑)。)

  2. 通りすがり より:

    リセットCSSについて調べていたところこちらの記事にたどり着きました。

    一点だけ気になる点を指摘させてください。
    javaではなく、JavaScriptかと思います。

    修正いただければと思います。

    • その他登録の社会保険労務士 その他登録の社会保険労務士 より:

      ご指摘ありがとうございます。
      さっそく修正しました。

      お恥ずかしい限りです^^;