以前から、無駄なHTMLタグやCSSが多くあり、それがサイトを重くする要因となっていることが気になっていたためです。
Vaster2という軽量テンプレートを元に修正やカスタマイズを行い現在に至っています。
Bloggerをお使いの方が、スムーズにカスタマイズできるようまとめておきたいと思います。
Vaster2の配布元
http://toumaswitch.com/vaster2/参考サイト様まとめ
アドセンスをモバイル向けにする方法
http://fft-0064.blogspot.com/2017/07/bloggervaster2_6.html#chapter10アドセンスの遅延読み込み
https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html月別アーカイブの修正方法
http://kuttsun.blogspot.com/2017/07/vaster2_31.html月別アーカイブ等を別のページにする
http://outcloud.blogspot.com/2016/09/add-extra-page.htmlデフォルトのCSSを読み込まない方法
http://holidaybuggy.blogspot.com/2017/03/bloggerbundlecss.htmlhttps://reblogcus.blogspot.com/2017/07/blogger-v2headcss.html
ただし、デフォルトのCSSを読み込まないと、デザインが崩れたり、動かない機能があったりします。
デフォルトのJavaScriptを読み込まない方法
https://www.bugbugnow.net/2018/08/blogger.htmlこれによりコメント欄の返信機能が使えなくなります。
返信等の不要な表示は、display:none; で消しておきましょう。
最終更新日追加
https://sutasutashiki.blogspot.com/2018/01/Blogger-lastupdated-lastmodified-datapost-lastUpdatedISO8601.htmlテンプレートのバージョンアップを行うことで、Javascriptを使用せずに最終更新日を追加するもできます。（対応は大変ですが）
https://www.bugbugnow.net/2019/06/Upgrade-Blogger-widget-version2.html
コメント返信のカスタマイズ
http://kinncya-heta-yoko.blogspot.com/2017/08/vaster2-comment-customize.html目次を自動生成
https://more-popular-blogger.blogspot.com/2016/09/blogger-customize-table-of-contents.htmlhttps://spoontofork.blogspot.com/2018/06/blogger-create-a-table-of-contents.html
Blogger のコメントフォームを読み込まない
https://www.bugbugnow.net/2018/08/blogger-comment-Improvement.htmlBloggerの読み込み速度がかなり改善されます。
コメントが0件の場合と、コメントが1件以上ある場合でコードが分かれているため、2箇所変更します。
ただ、コメントフォームを読み込まないと返信が効かないため、javascriptなどで改善するか、先にコメントフォームを表示させるようユーザに促す必要があります。
headタグ内のカスタマイズ
https://www.nagahitoyuki.com/2018/08/i-decompose-blogger-data-tags-all-head-content-for-customization-in-the-head-of-my-blogger-blog-template.htmlhttps://www.bugbugnow.net/2018/07/bloggerhttphttpscanonical.html
Blogger 独自タグで困ったら
https://bloggercode-blogconnexion.blogspot.com/p/bienvenue-sur-blogger-code.htmlBlogger 画像カスタマイズ
https://www.freshtechtips.com/2018/09/edit-customize-blogger-blogspot-images.html備忘録
IEで、background-colorが透明になる
rgb(255,255,255)をrgb(255,255,255,1)にする。モバイルで、画像が右側にはみ出る
aタグにmarginが自動で入るため、以下のCSSを追加し打ち消す。.separator a{
margin-left: 0em!important;
margin-right: 0em!important;
}
Firefoxでmoreタグの前にAdsenseが表示されない事がある
jqueryが動かない現象がありました。 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
asyncを入れていたためでした。レンダリングブロックにならないよう、</body>タグの後に入れるのが良い。
</body>
(略)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#MBT-google-ad').insertBefore($('a[name="more"]'));
});
</script>
トップページの記事数が少ない事がある
各記事でmoreを入れ忘れているのが原因。https://blogger-nav.blogspot.com/2018/10/blogger_17.html#:~:text=Blogger%E3%81%AB%E3%81%AF%E3%80%81%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8,%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82
Font Awesomeを高速読み込み
ページを開いたときにFont Awesomeのアイコンが表示されるデザインのため、preload や loadCSSで高速読み込みを行う。
https://firstlayout.net/load-css-asynchronously-with-loadcss/
現在は、以下のサイト様のようにSVG形式で直接書いています。
https://sutasutashiki.blogspot.com/2019/04/replace-fontawesome-web-icons-with-svg-inline.html
TOPページのような同じSVGを何度も使うページでは、以下のようにするとHTMLサイズを減らせます。
以下をBodyタグの直後などに書いておく。
<b:if cond='data:blog.pageType in {"index" , "archive"}'>
<svg class='svg-symbol' display='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<symbol id='fa-clock' viewbox='0 0 512 512'>
<path class='st0' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/>
</symbol>
</svg>
<svg class='svg-symbol' display='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<symbol id='fa-tags' viewbox='0 0 640 512'>
<path class='st0' d='M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z'/>
</symbol>
</svg>
以下を使用する箇所に書く。<svg class='fa-clock' viewBox='0 0 512 512'><use xlink:href='#fa-clock'/></svg> <svg class='fa-tags' viewBox='0 0 640 512'><use xlink:href='#fa-tags'/></svg>
Blogger で WebP を使用する
BloggerでWebPを使用する方法を記載しました。
kusoneko.blogspot.comBlogger で オフスクリーン画像の遅延読み込み
Bloggerで、Lozad.jsを使用して、画像の遅延読み込みをやってみました。
kusoneko.blogspot.comBlogger用ブログカード作成ブックマークレット
ブログカード作成ブックマークレットをBlogger用に改造してみた
Blogger用にブログカード作成ブックマークレットを改造してみました。画像サイズ・WebP化・画像キャッシュ期間の変更を盛り込んでいます。
kusoneko.blogspot.comjQueryからの脱却
テンプレートにjQueryをべた張りしており、HTMLサイズの大きかったことから、jQueryを使用しないネイティブなjavascriptに変更しました。目次の自動生成と広告の移動は対応しました。
コードを変更するにあたり、以下のサイトが参考になりました。
https://wemo.tech/2101
Googleフォーム＋reCAPTCHAで問い合わせフォームを設置
固定ページにGoogleフォームを埋め込み、reCAPTCHA v3でスパム対策をしました。埋め込み方法とGoogleフォーム上のボット判定は、以下のサイトが参考になりました。
https://www.imuza.com/entry/2020/08/16/154209
reCAPTCHA v3については、以下のサイトが参考になりました。
https://aw1.jp/web/google-recaptcha-v3-2/
私は、スコアが0.5以上を人間として判定し、メールを送信するようにしました。
return JSON.parse(resp).score; if(resp >= 0.5)以下のサイトは、Movable Typeの物ですが、参考になるかもしれません。
http://www.minimalvideo.com/weblog/minimalvideo/2021/01/recaptcha-v3.html