サイト表示速度が遅いのでサイトデザイン変更したけど、本当はLINEモバイルが微妙なのかもしれない

wordpressが難しそうなので、FC2でブログをやっています。

FC2は独自ドメイン取得も安い方だし、テンプレートも充実してて便利なんですが、最近昼とかに4G(LINEモバイルソフトバンク回線)で接続した場合に自分のサイトの表示速度がめちゃくちゃ遅いなと思ってました。
なので、「放置してたけどやってみるか…」と、サイトデザインの変更に乗り出しました。
大学の時、C言語組むのとかめちゃくちゃ苦手だったので本当はやりたくないんですが、見栄えのためなら仕方ない。

PageSpeed Insightsで速度を測定した

Googleが提供しているPageSpeed InsightsというサービスがURLを貼るだけなので簡単でした。安心と信頼と恐怖のGoogleです。

まずは旧デザイン改造版を測定してみました。(改造版とは、よく読まれてる記事を表示するためのランクレットというサービスのhtmlや、アフィリエイトリンクを生成するcssを実装したバージョンのことです)。
微妙な点数。
旧デザイン改造前と比較するとこんな感じ。左が改造前、右が改造後です。
改造で約3割も点数下がってる…。
これの原因はなんとなくわかってて、昔よくわからずいじったコード(今もよくわかってないけど)と、今使ってないカエレバのコードとかが無駄に残ってるからだと思います。多分。

PageSpeed Insightsで他の人のサイトスピードも測ってみた

PageSpeed Insights、結構面白くて、URLさえ貼れば自分のサイトじゃなくても速度が測れます。意外と50点台の人もいますね。

デザインを決める

FC2は公式テンプレート以外に、そういうの組める人がデザインをシェアしてくれているんですが、結構いい感じのがあるんですよね。惜しいなというのもありますが。そこから、最近のデザインでなおかつ改造しやすそうなものを選びます。

今回はAkiraという方のalias-Janeというデザインにしました。
スマホで見てる人が多いと思うのであえてPC版を表示しますが、改造前はこんな感じです。これがまたスマホ版になると配置が変わるから、両方チェックしてデザインを決めます。
最優先はスマホ版がいい感じかどうか。
配置デザインや配置は好み。シュッとしてる。あとは改造するだけです。これがダルいんですが。

改造する

  • ヘッダーの画像変更
無地でいい。
  • ヘッダーアイコンの配置換え及び不要なものを削除
RSSとかここに必要?
  • コメント数表示削除
ほぼ0なのでいちいち表示せんでいい。
  • 文字色変更
黒とかグレーだけでいい。
  • ランクレット
導入はめんどくさかったけど、導入してしまえばコピペでOK。
  • アフィリエイトリンク生成css
カッテネ以外いいのあれば教えてほしいです。コピペ。
  • スマホでお気に入り(ホーム画面に追加)したときの画像
前と一緒。コピペ。
  • ファビコン
PCで見たときのアイコン的なやつ。前と一緒。FC2だといじらなければ🐴のマークが出て、「あ、こいつFC2だ」とバレるので擬態。
  • Googleアナリティクス
</head>の前に貼るだけ。これも導入めんどくさいけど1回やればコピペでOK。
など、1個1個はたいしたことないけど、全部やるの結構めんどくさい。
改造後。いい感じ。

htmlをチェックする

今回初めてhtmlとcssチェックをやってみました。
これまたGoogle chromeのプラグインで、「HTMLエラーチェッカー」というのをインストール。
「50個以上エラーです」と言われたときには萎えたけど、6箇所ほど修正して完璧になりました。閉じてないタグがあって、それを閉じたらす残りすべて解決するやつでした。
Googleに完璧とか言われると照れるな!
てか、意外と自分がいじってない部分(デフォルトのまま)で抜けてるのがあった。テンプレを信用しきっては駄目ということですね。

HTMLエラーチェッカーで他の人のhtmlも見てみた

HTMLエラーチェッカーも他の人のページでも使えて、チェックしてみたら人によりけり。一見ちゃんと見れてるのに、修正が必要な人もいました。

cssをチェックする

cssに関しては、Dirty Markupというサイトにコピペしてチェックしました。けどよくわからん…。
最初はhtmlもこれでチェックしようとしたんですが、よくわからなかったのでhtmlはGoogleに任せた経緯があります。Googleには完璧と言われたやつを貼っても、Dirty Markupでエラーで返ってくるし。
cssのチェックは諦めました。まあ普通に閲覧できるしいいんじゃないでしょうか。

再度PageSpeed Insightsで速度を測定した

新デザイン改造版を再びPageSpeed Insightsで測定しました。
まあ及第点、合格でいいんじゃないでしょうか?

まとめ:結局LINEモバイルが微妙なのでは

早速ページの読み込みが遅い昼時に自分のページにアクセスしてみたんですが、この通りです。

30秒経ってもページが表示されません。遅過ぎでは?接続したシチュエーションはLINEモバイルソフトバンク回線、場所は岡山の割と街の方、時刻はお昼の12時過ぎです。
同じ条件でよく見てるブログも開いてみたけど、読み込みは終わるのに画像がところどころ表示されなかったりして、「サイト表示速度とは?」となりました。多分表示が遅いページは画像がデカいんだと思う。
あーこんだけサイト表示速度で引っ張っといて、LINEモバイルが問題かもしれません。新たなSIMを検討してもいいのかも。
でも久々にデザイン変更して面白かったのでよしとしよう。

おまけ:新たな試み、「タグ」の導入

デザインとかサイト表示速度には直接関係ないけど、新デザインでは「タグ」を導入してみました。

見る側のメリットはおそらく以下2つ。
  • タグを見ればブログ書いてる人の趣向がなんとなく分かる
人のブログを見て思ったんですが、タグは固有名詞だから、カテゴリーの中の何が好きなのかがパッとわかりやすいですよね。「それそれ!それの情報がほしい!」みたいな人に有益だなと。
  • 特定のキーワードについて関連した記事がタグでまとまる

当たり前ですが。Twitterでもハッシュタグという文化があるし、ブログでも特定のキーワードに関連した記事がバッとまとまって表示されるのがいいなと。

書く側のメリット。
  • カテゴリーで分類できない、小カテゴリー的扱いができる
ずっと小カテゴリー的な機能欲しいなと思ってましたが、タグが解決してくれました。
僕の場合だと「買ってよかったもの」とか、「ゆるく語る」などのカテゴリーがあるんですが、タグを導入することで「何系のものを」買ってよかったのか、「何について」ゆるく語るのかがわかりやすくなりました。縦軸と横軸が交差する感じが気持ちがいい。
そして改めてタグ化すると、「このタグが付けれる記事もっと書きたいな」とか思うわけです。最近ハマってるジンとか、10年以上やってるランニングとか、もうちょっと記事にできるのではないかと。
以上です。