TOP ブログについて FC2ブログカスタマイズ備忘録 ~SEO対策編~

FC2ブログカスタマイズ備忘録 ~SEO対策編~

Comments (2) 最終更新日:2021-04-20

2020_09_28_04
いらすとやの素材初めて使ったがwwwwwww

ごめんなさい今回もアラドのお話はお休みで、このブログのターゲット層にはまったく需要がないブログ整備の話です(´*`)

ここのところ毎日HTMLとCSSいじくってはもういじるところないやろwかーーらーーのーーーーここ変えよう…(´・ω・`)ってのをずっと繰り返してます🐙
マジで沼が深すぎる…趣味で自分のブログいじるのは楽しいけどこれ仕事にするのはほんと無理だな・・・・

今回したカスタマイズは大きく分けて「SEO対策に関わるカスタマイズ」と、「ビジュアルに関わるカスタマイズ」です。
この記事ではSEO対策に関わるカスタマイズについてお話します。


1ヶ月くらい前にLighthouseというwebページのパフォーマンスを測定できるツールがあることを知りました。
Lighthouseについてはこちらのページで詳しく解説されています。

Google Lighthouseとは?Google公式ページエクスペリエンス測定ツールの使い方

この記事では「Google Lighthouse」の概要と、その使い方について解説しています。Google Lighthouseのデータを使いこなし、Webページの読み込み速度やパフォーマンス、SEOを意識したWebページ制作にぜひ役立ててみてください。

怖いもの見たさでこのブログを審査してみると・・・
2020_09_28_01

ウーーーーーーーンひどいw
バッチバチにテンプレートを自己流カスタマイズしまくって、PNG画像も使いまくってるため、覚悟はしていたものの評価低すぎw

んで、友達からアドバイスもらったり、自分でいろいろ調べて対策した結果なんとかここまで持って来れました。
2020_09_28_02

performanceの数値は揺れまくって調子悪いと45~いいと60↑って感じです。
最初の倍くらいスコア上がった!!他の項目は100点までもってけた!!がんばったぞ!!!

やったこととしては、このくらい。
  • lazysizesの導入と画像の圧縮
  • 重要じゃないスタイルシートを</body>直前で読み込む
  • トップページに置いてあるコンテンツや使ってないscriptなどの見直しと断捨離
  • imgタグやaタグの見直し
  • 配色の見直し

参考にした記事とか

lazysizesの導入と画像の圧縮
画像圧縮ツールは友達から教えてもらったやつ。とても使いやすい。

最初なんかうまく読み込めてない…?と思ってたら、導入するべきライブラリ自体を間違えてた。
jQuery Lazy Loadの方を使っちゃってたので、lazysizesに変更。ちゃんと動いてるみたい。
background-imageで表示してるものも遅延読み込みすることができた。
あと、ぼっちんさんの記事で紹介されてたSearch and Replaceがめっちゃ神懸ってる。

lazysizes を使って背景画像を遅延読み込みする方法!(レスポンシブ対応) - やくだつブログ

[lazysizes](https://github.com/aFarkas/lazysizes "lazysizes") を使用してレスポンシブ対応しながら背景画像を遅延読み込み(lazyload)する方法です。

公式で用意されているプラグインとして [ls.unveilhooks.js](https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/unveilhooks/ls.unveilhooks.js "ls.unveilhooks.js"...

レイジーロード(画像遅延読み込み)のクラス付与を複数でもクリック一発で行う簡単な方法

弊記事は、既にFC2ブログにて 画像遅延読み込み(lazyload=レイジーロード) を採用しているブロガーさん向けの記事になりますので、これからレイジーロードを覚えてみようと言う、ちょっと初心者さんには向かない記事になるかと思います。

従って「レイジーロードって何? 美味しいの?」と言う解説記事ではありませんのでご承知ください。

さてさて、FC2ブログの記事編集欄 (ここでは 旧投稿画面 をサンプルにします) に、...

PNGイメージをオンラインで圧縮する

PNGイメージを透過付きPNG-8フォーマットにするPNG圧縮最適化ツール。


重要じゃないスタイルシートを</body>直前で読み込む
レンダリングブロックってなんだよ~~~から始まり、対策用のjsとか入れようとしたけど、なんかシンプルに解決できた。
ページ全体を形成するデフォルトスタイルシートはheadで読み込んでます。
これも後ろで読み込んじゃえ!!ってやったら、ページ開くと一瞬CSSが適用されなくなってしまった…
重めのスタイルシートが多かったのでこれはかなりperformanceの向上に影響した気がする。

CSSファイルを内ではなく 直前で読み込む - Qiita

Webページの表示は少しでも高速化させたいですね。
そのために我々はいろいろな方法を使いミリ秒単位の短縮化を頑張るわけですが、そのテクニックの一つをメモします。
Webサイト表示高速化の一つの方法として、レンダリングをブロックさせるC...


imgタグやaタグの見直し
imgタグはalt要素つけろ!!とかそんなんだった。
別タブで開いたほうが便利そうなリンクは「target="_blank"」で別タブで開くようにしてるんだけど、これってあんまりよくないらしいね!!初めて知った!!

aタグのrel=”noopener noreferrer”の意味とは?SEO的にどう?|まろりか

この記事ではaタグのrel属性のnoopenerとnoreferrerについて解説します。 SEOへの影響やWordPr


項目の断捨離と配色の見直しについてはビジュアルに関わるカスタマイズの方でお話します。

自分の現在のこだわりとして、Font Awesomeとwebフォントは外せないし、jQuery使いたいし、画像もいっぱい使いたいので、今後詰めていくとしたらここらへんをどう軽くできるかだなあ(´ε`;)
重かったとしてもこだわりとして外せない要素なのでperformanceについてはここらへんで妥協するしかないのかもしれない。


そもそも、ブログのパフォーマンスとか気にし始めたのは、こちらの記事を読んでからでした。

自分のブログのスマートフォン表示速度に関心を持ちましょう

Yahoo!ブログ等からFC2ブログへ引っ越して来られたブロガーさんですと、今まで馴染んでいたブログシステムと全体的な操作性がガラっと変わってしまう為に、様々な場面に困惑して「 いろいろと違いすぎてて、FC2ブログって使いにくいなぁ 」とか 「 なんだぁ、FC2ブログって難しすぎて使えないじゃん δ(⌒~⌒ι)とほほ... 」と惑い「 とりあえず、もう1つ別のブログサービスにアカウント作って様子を見てみようか 」と考える方も...


いやね、いくらモバイルファーストな風潮だといっても、PCのオンラインゲームがテーマのブログなんだからPCから問題なく見れればええやろ~~wwって思ってたんすよ。
でもここ数ヶ月の私のブログに来てくださった方が使っているデバイスを調査したら、PCからの人とスマホからの人ざっくり半々くらいなんですよねw(゚o゚)w
2020_09_28_03

これは無視できないぞ、ってわけで今回頑張ったわけです。
もともと変に完璧主義なところがあるのもいけなかった・・・

今回のカスタマイズで、しっかり理解できてないところも多いのでまた修正することになりそうではある。。。
特にスタイルシート関係とlazy load関係・・・

完全趣味、しかも辺境ジャンルのブログでここまでする必要性があるのかっていったらほぼないだろうねえ(´-`)


言い換えればね、それだけいまアラドでやることないんだよ!!!!!!!!!
(今日もストライカーXは出ませんでした。)
記事のURLをコピーする

応援待ってます

ちょこにOFUSEする

こんな記事書いて欲しいなどの要望はこちら

リクエストBOXの使い方

リクエストを送る

\Share!!/

更新順
カテゴリ:[ ブログについて ]

Comment

全てのコメントは管理人が事前にその内容を確認し、承認した上での掲載となります。






管理者にだけ表示を許可する

No Subject

伝言板がプライバシーエラーって出ます!
使う人いるか分かんないけど一応報告!
2020-09-28-19:50 名無しの司令官 [ 返信 ]

ちょこ

Re: 名無し さん

うおお報告ありがとうございます!!
使う人いないっぽいし掲示板下げようと思います!!!
ここエラー出るとか、画像表示されない!!とかコメント貰えるととても助かります~~~!!
2020-09-29-04:36 ちょこ [ 返信 ]