*Essence

FC2ブログ共有テンプレートを作成・配布しています。不精なので時々更新。(^^;
Top Page › Tag - Lighthouse

画像サイズを取得し width・height属性を自動で付ける

かつてはimgタグに幅や高さの属性を入れずとも、CSSで表示サイズをコントロールすればOKみたいな流れが主流でしたが、2021年6月中旬から導入された Googleのアルゴリズム「 Core Web Vitels 」の指標 CLS(Cumulative Layout Shift)に影響するという事も有って、記述する重要性(と必要性)が出て参りました。 CLS は「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。 imgタグに width 及び height 属性が明示...

一旦 loading=lazy 外します(意志薄弱でスミマセン)。

実は先の更新(21/10/26)後も悩んでいた件なのです。 → エントリー要約表示のサムネイル画像の変数を変更し loading="lazy" を付けました(全文表示は作業不要)。 DLされた方、改変をされた方には大変申し訳無いのですが、本日要約表示のエントリー画像に付けた loading="lazy" を一旦外してテンプレートの更新をしました。 理由は、loading="lazy" を付ける事によってファーストビューの部...

Lighthouse の Best Practices で100→93になる件について

Lighthouse の Best Practices でスコア100だったのが93になるとコメントで教えてもらったのですが、問題は「Ensure CSP is effective against XSS attacks」が原因では無くって、FC2(やその他HTML内に入れている解析コード等のJS)から貰ってしまう Cookieとサイトデータが原因なのだと私的に考えています。 以下、自分のFC2ブログを GoogleChrome の Devツール > Lighthouse で検証したものです。他サイト他ブログでは結果が異...

link rel=preload とFC2画像URLの -origin とDevツールの warning

訳の分からない長ったらしいタイトルでスミマセン。Google の Lighthouse や PageSpeed Insights で、下記のような項目が出る事が有り、色々テストしてみた事を書き留めておきます。 キーリクエストのプリロード <link rel="preload"> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。 <link rel="preload"> をヘッダー内に記...