『Curvy』『on-my-way-ALL』『on-my-way』テンプレートで一部追加とLighthouseの検証不能の件について

自主的なHTML追加をお願いしたいテンプレート3点

新作テンプレートの3つが対象です。

Curvy - FC2ブログテンプレート

Curvyテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。 設定ページ...

vanillaice000.blog.fc2.com

On-my-way-ALL - FC2ブログテンプレート

On-my-way-ALLテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。 設定ページ...

vanillaice000.blog.fc2.com

On-my-way - FC2ブログテンプレート

On-my-wayテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。 設定ページ...

vanillaice000.blog.fc2.com

HTML内に

<button class="copy-btn sns-copy-btn" data-clipboard-text="<%topentry_link>">

という部位があります。これを

<button class="copy-btn sns-copy-btn" data-clipboard-text="<%topentry_link>" aria-label="copy URL">

に変更、というよりも aria-label="copy URL" 追加して欲しいんです。これ何かというと、button要素 の役割をもっと明確にする、という意味です。無くても機能やHTMLバリデーションに影響はありませんが、lighthouseでは指摘されます。これ私単純に書き忘れなので、既にご利用の方は申し訳ないんですが自主的に変更をお願いします。公式DLページのファイルは既に修正済みです。

全文タイプのLighthouse検証ができない件について

これもうずいぶん前からです。以下のような文言が出て計測エラーになります。

The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)

簡単に言うと「コンテンツが何も表示されないから計測できませんよ」という意味です。ブラウザをフォアグラウンドにとか書いてあるけれどもこれは可能性を示唆しているだけで実際は無視して良い事柄です。それが原因ではないので。

対処法自体はもうわかってます。今回の新作 全文タイプである『on-my-way-ALL』の場合はスタイルシートに

@keyframes fadeIn{0%,50%{opacity:0}100%{opacity:1}}

という部位がありますので

@keyframes fadeIn{0%,50%{opacity:.1}100%{opacity:1}}

に変更するなど。opacity:0 の値をゼロ以外の opacity:.1 とか .2 とかにすれば検証自体はできるようになります。

今回の3作では、これまで常に記載していたLighthouseスコアの掲載を取りやめています。記事の最終にその旨も記してあります。対処法があるのに何故取りやめたかというと、簡単に言えば検証そのものが不審だからです(笑)

今回の3作のうち2作は要約表示タイプで、残り1点は全文タイプ、そしてこの全文タイプのみが初期では検証不能になります。3作全てに同じアニメーションが付けてあるのに、です。テスターが全文だけ結果を返さない。

えと、何故opacityの値が関わるかというと、このアニメーション指定は「x秒かけてページを表示する」というもので、初期状態は「何も表示しない」という指定です。これをlighthouseが「コンテンツが無い」と結論づけている、と。

でもこれってデザインの手法だからね。先日メイソンリーの記事など書きましたけれども、JSがまだ実行されていない段階でページを即表示したらJS発火後にデザインが再整形されて視覚的に煩わしいなど。そういうのの緩和としてもアニメーションは利用されるわけです。

FC2ブログでメイソンリーレイアウトは厳しい

厳しいといっても可能です。可能ですし技術的に難しいわけでもない。なので『難しい』ではなく『厳しい』という表現。...

vanillaice000.blog.fc2.com

例えばクライアントから「ページをいきなりでなくフワっと表示させたい」という要望が出たとして、その要望を叶えたらlighthouseが「検証できません(しません)」とかおかしいでしょう。10秒も20秒も表示を引き伸ばしているわけでなし。コンマ1秒を変更したところでどうなるというのか。

こういうlighthouseのバカバカしい指摘については過去にも明言しているように「スルーします」という個人的方針です(笑)
えっと、前書いたのは「read more って書くと減点されるけど 続きを読む にすると指摘されない」とかだったと思います。それに何故全文タイプだけ検証を放棄するのか。

まぁ実際は放棄しているわけではないですけどね。全文タイプというのはもともとが オフスクリーンの内容物が多くなる デザインタイプです。要約タイプと比較してファーストビュー『外』 (= below the fold) の内容が多いのが全文タイプの特徴なわけです。そのあたりが関わっているのだろうと。

検証をクリアすることはできますよ。さきほど記した対処を用いれば可能なので。でもそれやって何になる (∵`)
理由あってのアニメーションを否定されてもな。メイソンリーのように『粗隠しならもっと別の方法があるはず』というなら理解できるけども、『ページフワっと』というごく単純な目的なら他に探すべきネタなどないでしょうよ。

というわけで、スコアの数値を私が操ったところで 意味が無い のでスコア非表示という選択を取りました。なので自身のページ改善でlighthouseを利用される際はopacity数値を変更する、あるいはアニメーションを削除する 等の対処を行った上で実行してください。でもそれデフォルトに戻したら結局… ねぇ (∵`)