すたすた式
Blogger QooQ
テンプレートをVaster2からQooQ（list版）に変更したのでほぼイチからやり直すことになりました。
QooQはそのままで十分速いテンプレートです。
しかしBlogger固有の設定・仕様であったり、テンプレートのカスタマイズによってスピードが犠牲になってしまうケースがありました。
なのでPage Speed InsightsやLighthouseで指摘された所を改善していきました。
レンダリングを妨げるリソースの除外としてあったcss_bundle_v2.cssについて調べました
現在はpreloadをつけて運用しています。
preload
[Blogger] css_bundle_v2.cssに関する覚書-すたすた式
cssの抽出については
オンラインツールでcss_bundle_v2.cssから必要な（必要だと思われる）CSSを抽出してみました。-すたすた式
コードハイライトはhighlight.jsを使っています。
すべての記事に必要というわけではないので、特定のラベルに対してだけhighlight.jsを読み込ませてみました。
ラムダ式というのを使って書いてみました。
[Blogger] highlight.jsの読み込みをラベル単位でコントロールしてみました。[QooQ]-すたすた式
[Blogger]ラベル単位でコンテンツの表示・非表示をコントロール[ 広告・Adsense/アドセンス]-すたすた式
AdSenseの読み込みを遅らせることによってPage Speed InsightsやLighthouseのスコアを上げます。
ポリシー的に不安なのと、AdSenseを使っている以上ある程度仕方がないというあきらめ感があるので現在は外しています。
[Adsense Lazy Load] アドセンスを遅延読み込みさせてみました。[Blogger]-すたすた式
[Adsense Lazy load] スマホの時のみアドセンスを遅延読み込みさせる [Mobile only]-すたすた式
Fontawesomeをメインに使っています。
cdnを使わずに<symbol> <use>でSVGを直接テンプレートに書いています。
<symbol> <use>
記事を書いていませんでしたのでかわりに参考にさせていただいたサイトをのせておきます
FontAwesomeをSVGで使用する【JavaScriptなし】 - バグ取りの日々
SVGをuseタグで使いまわす - Qiita
<use>内のxlink:hrefについて
<use>
xlink:href
<use> - SVG: Scalable Vector Graphics | MDN
xlink:href - SVG: Scalable Vector Graphics | MDN
Page Speed Insightsで次世代フォーマットでの画像の配信をすすめられます。
ブラウザやOSの対応状況やシェアをみながら、つかえるところは少しずつ使っていきたいと考えています。
現在は代替画像やスマートフォンのときにのみ表示される画像など、一部画像に使用しています。
[実験] BloggerでWebP形式の画像を使う-すたすた式
<img>に対して積極的にloading="lazy"を使いました。
<img>
loading="lazy"
ブログカードに loading="lazy"等を付けました。-すたすた式
Page Speed Insightsで指摘されていました。
[QooQ] テンプレート内のdocument.write(jsdate)を に置き換えました-すたすた式
デザインの変更、機能の追加を行いました。
HTML,CSS,JavaScriptはweb検索を駆使して試行錯誤しながら書いてみました。
素人なのでとりあえず動けばOKが基本スタンスです。
少し知識も増えたので新しく作ってみました。
Bloggerに最終更新日を表示させる2020 [ for Widget version 1 ]-すたすた式
記事に画像がない場合に代替画像を表示できるようにしました。
[QooQ] 関連記事に代替画像を表示させる-すたすた式
ある程度古い記事に対してメッセージを出すようにしました。（Qiitaにあるような感じ）
[Blogger] 古い記事にメッセージを出す [No jQuery] -すたすた式
特定のラベルのときだけメッセージを出すようにしています
デフォルトのデザインも好きでしたが、ナビゲーションを出すボタンが少し押しづらかったので変更しました。
[QooQ] スマートフォンのときのヘッダーとナビゲーションのデザインを変更してみました-すたすた式
ちょっとだけアニメーションがあったほうがいいかなと思い導入
QooQ スマートフォンの時のナビゲーションをゆっくり開閉させる-すたすた式
トップページがやや寂しかったのでスニペットをつけました
[QooQ]トップページ（ホームページ）の記事タイトル下にスニペットをつけました-すたすた式
位置がちょっと気になったので変更しました。
[Blogger][Vaster2] リンクの下線をさげてみました。[Chromeのみ]-すたすた式
迷走しましたがとりあえず下記に落ち着きました。
サイト内の「結論」や「Windowsの和文フォント」のところ
2020年に最適なfont-familyの書き方 - ICS MEDIA
コード表示のときの等幅フォントは数字の 0 がわかりやすかったconsolasにしました（Windows）
0
以前に使わせていただいていたテンプレートVaster2で導入経験があったのでそれをベースに実装しました。
[QooQ]サイドバーの一番下のウィジェットまたはサイドバー全体を追従させる
できる範囲で対応していければと考えています。
【アクセシビリティ】 記事の行幅、行送りを設定しました [Blogger/QooQ]-すたすた式
カエレバ・ヨメレバのデザインを変更しました。ver.2-すたすた式
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿