編集

F-light テーマの各種計測結果

2023/10/06
アイキャッチ

当サイトのトップページの 2022年8月12日 20時頃の計測結果です。(計測時のバージョンは v1.0.1)

F-light テーマは徹底的に最適化処理が施されているので、どんなツールで計測してもほぼ満点です。

PageSpeed Insights

PageSpeed Insights

なんと、jQuery が入っているにも関わらず、モバイル100点!

PC

psi

Mobile

psi2

Light House

Measure page quality

lighthouse

唯一の指摘箇所

Lighthouse で唯一 100点取れなかった要因はこれ。デフォルトのサブブランドカラーの tomato (#ff6347)と白文字 (#fff) のコントラストが悪いとの指摘。まあこれくらいは大目に見て下さい(^^;

lighthouse2

GTmetrix

GTmetrix | Website Performance Testing and Monitoring
gtmetrix

W3C

HTML

The W3C Markup Validation Service

地道にエラーの原因を潰していっても <html> に含まれる Blogger の独自の属性のせいで、どうしてもエラー0には出来ないのですが、JetTheme のコードで回避方法がわかりました。

以下のように赤文字のタグを追記すれば他のテーマでも適用できますのでお試しあれ。

<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>

ソースコードがこんなにスッキリしました。

html
↓↓
html2
html3

CSS

正当なCSSです!
css