トップページ > 記事閲覧
【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/16(Tue) 05:33
投稿者 Yujiro
参照先
(これはきっとPHPのプログラムを書ける人レベルの課題だと思います)

2021年から導入されるというGoogleの新しいランキング指標「CLS」。

まったく悩ましいことですがHAIKでも是非ともこれに取り組まねばなりません。
(現実にすでにPV改善例あり)

今のままのHAIKでもCLSをできるだけクリアしながら新しいページを書くときはできなくはないです。

しかし問題は過去に作った既存のページ。放置しておくと資産価値が低下です。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

これまでに書いたHAIKページではGoogle Search Console で「不良URL」として表示されっぱなし
になるのも気になります。

▼CLS参考ページ
https://www.start-point.net/blog/web/html/cls/

▼CLSをテストできるページ
https://developers.google.com/speed/pagespeed/insights/

超かいつまんで言えば・・・

「ページ内の画像サイズ指定がないと、CLSのスコアが悪くなる」

=======================
HAIKの画像扱い 現状の問題点
=======================

レスポンシブなページが勝手に書けるようになってから、画像のひとつひとつにその「サイズ指定」
をすることはなくなりました。

しても良いですがほとんど必要がなくなって楽だなあと。なので・・

&show(画像ファイル名,オプション,画像の説明) 

このオプションに画像サイズ(%)など入れる例は少ないのではないでしょうか。

ところが! 新しく導入される評価指標である「CLS」では「画像サイズ」を明示することが必須
です。

以下に、&show のオプションで画像サイズ指定有無によるHTML記述結果の違いを記します。

+++++++++++++++++++++++++++++
テスト画像 test.jpg 元のサイズは720x405
+++++++++++++++++++++++++++++

1)サイズ無指定  &show(test.jpg,,テスト画像);
--------------------------------------------------------------------------
表示結果
<img src="swfu/d/test.jpg" alt="テスト画像" title="テスト画像" class="">

(CLSダメ出し)


2)サイズ「100%」を指定 &show(test.jpg,100%,テスト画像);
-------------------------------------------------------------------------
表示結果
<img src="swfu/d/test.jpg" alt="テスト画像" title="テスト画像" width="720" height="405" class=" qhm-plugin-show-keep-ratio" style="width: 720px; height: auto;">

(これで見事にCLSの画像部門をクリア。テスト済み。)

これはどうも、plugin/show.inc.php がオプションの有無を判定し、元画像のwidth、 height、
そしてclassを書き出す仕組みのようです。(推測)

================
実現したいこと
================
サイズさえ指定すればCLSの画像に関する判定は完全にクリアできます。

新しいページを書くときはとりあえず 100% というオプションを書けばよし。

しかし、既存のページにある &show 全てにこれをするのは現実的ではありません。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
そこで、

ユーザーのサイズ指定がない場合、自動的に実際の画像サイズが img の要素に書き込まれるように
ならないものかと。

要はオプションが「Null」ならそれは100%指定とイコールだよと。(いやnullではダメか)

plugin/show.inc.php  に手を加えてなんとかならんものでしょうか。

【追記】ロゴ画像について(HAIKページ左上の)

ロゴ画像の使用は任意ですが、使う場合には上の&showでは対応できません。

その代わりに navbar-brand というclass が存在するのでそれを#beforescript{{ で書き換え、使うロゴ画像の
サイズを工夫したりでCLSをクリアできます。(実証済み)
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/20(Sat) 15:51
投稿者 Yujiro
参照先
【&show について、外部からの画像読み込み&画像サイズ指定のコツ】

&showで外部から画像を呼び込むとき、オリジナルでもいしまるさんコードでも
画像サイズをHTMlに吐くことはできません。(そりゃ仕方ない部分あり)

そこでユーザーが「○○x○○」の形式で画像サイズを指定することでサイズをHTMlに吐くようになる。

例)&show(https://test-123.com/swfu/d/test.png,512x384,テスト画像);

※外部読み込みのサイズ指定では「○○%」は使えない。(そりゃそうか)

==============
画像リンクの留意点
==============
オプションで画像リンクの「linkurl=」を使える。
ただし画像サイズを同時に書くとき、順番の制約がある。

「画像ファイル名(URL),linkurl=https://・・・・,画像サイズ,画像の名前」 とすること。

プラグインによってはオプション各要素の順番が自由なものがあるので注意。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/18(Thu) 05:44
投稿者 Yujiro
参照先
時間が経つにつれ、show.inc.php がデフォで img src= に画像サイズを吐かない仕様なのが
おかしい、と思うようになった。能力はあるのに。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/17(Wed) 21:54
投稿者 Yujiro
参照先
うみほしさん

HAIKの場合、ユーザーが自分で打ち込んで何らかの画像サイズ指定をしなかった場
合、書き出されるHTMLに width も height もない、というのがプログラムの怠慢
なのか、仕様なのかわからんですね。

そもそもが show.inc.php は自動的にサイズを書き出すファンクションを持ってい
るために余計にわからんです。

HTMLを書くにあたってどちらかと言えば「サイズ指定をしておくのが吉」とある
のは確かで、かつての代表的なサイト書きAPPであるDreamweaverなどはユーザー
がサイズを指定するまでもなく自動化されてサイズを書き出していました。(これがデフォ)

また、レスポンシブの時代に突入して実表示の画像サイズは可変となってしまい、
これによってユーザーによる画像サイズ指定は意味を持たなくなったと思いました
が、実はそうでないということですね。

ブラウザは「読み込まれようとしている画像の元のサイズを先に教えてくれよ」
ということですね。

なるほどその方がレスポンシブもやりやすいわけだ。

15年以上前にDreamweaver で書いたページのCLSを調べたら、HAIKよりスコ
アが良かったっす。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/17(Wed) 19:53
投稿者 うみほし
参照先 https://umihoshi.com
私のサイトではほとんどの場合%指定していますので、問題は少ないかもしれませんが、いしまるさんの書き換えコードを試してみました。
画像のキャッシュを削除して再表示してみたところでは、今のところ表示の異常は出ていません。

これがスコアにどう反映するかはまだ分かりませんが。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/17(Wed) 08:10
投稿者 いしまる◆vOmCuTAP2Tw
参照先
Yujiroさん、ありがとうございます。

HAIKを利用したサイト、個人的には、不特定多数の方など
大勢の人から見てもらうことを意識していないのですが、
勉強になりました。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/17(Wed) 04:45
投稿者 Yujiro
参照先
いしまるさん、ありがとうございます。

本当に素晴らしいです。

実用にほぼ耐えるコードをいただきました。
現在すでに実稼働のサイトで動かしています。

今のところの気づいた点を揚げておきます。

1)画像の横幅指定は不要と思われます

450行目近くの・・

// vvvvv 2021-03-17 vvvvv
if ($args[0]=="_size") {
$style = 'style="width: 100%; height: auto;" ';
}
// ^^^^^ 2021-03-17 ^^^^^

width に何らかの数値指定があると、ページデザイン時に意図した表示にならないケースが出てきます。
例えば、100%とするとその画像の実サイズが表示エリアより小さい物は全てがエリアいっぱいの拡大表
示となるからです。

私は width を削り、height: auto だけを残して使っています。


2)URL指定の画像読み込みではサイズの出力がなくなる

以下のような書き方だといしまるさんコードがスルーされるようです。
(アドレスは自サイト内外を問いません)

&show(https://haik-test123.com/swfu/d/test.jpg,,テスト画像);

以上の通りですがほぼ実用です。

24時間以内に大筋として解決しています。すごいことです。ありがとうございます。

なお、オリジナルのオプションでのサイズ指定「100x100」の書式はもう効かないのですよね。
私自身は一度も使ったことなく問題にはならないのですが。
(450行目近くに入れるコードからwidth: 100%指定を取り去れば、と言う条件)

【訂正】↑↑ オプションのサイズ指定 「%」と「○○x○○」は効きます。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/17(Wed) 00:26
投稿者 いしまる◆vOmCuTAP2Tw
参照先
プラグインを変更して一気にということであれば、
show.inc.php で 58行目あたりの
$args = func_get_args();
の次の行に以下を追加、
// vvvvv 2021-03-17 vvvvv
$sizeSiteiFlag=0;
for($i=0; $i<count($args); $i++) {
if (preg_match('/^\d+x\d+$/', $args[$i], $r)) {
$sizeSiteiFlag++;
}
if (preg_match('/^\d+%$/', $args[$i], $r)) {
$sizeSiteiFlag++;
}
}
if ($sizeSiteiFlag==0) {
for($i=count($args);$i>1;$i--) {
$args[$i] = $args[$i-1];
}
$args[1] = "_size";
}
// ^^^^^ 2021-03-17 ^^^^^


450行目近くの
$params['class'] .= $params['_block'] ? ' img-responsive' : '';
の次に
// vvvvv 2021-03-17 vvvvv
if ($args[0]=="_size") {
$style = 'style="width: 100%; height: auto;" ';
}
// ^^^^^ 2021-03-17 ^^^^^

このBBSの仕組み上、2個以上の半角空白などがまとめられて
表示されて見づらいですが、こんな感じにするとサイズを
「123x234」か「40%」の書式で指定しない場合は、「_size」
オプションを付加した様な事にして動くようになると
思います。style設定は横100%としていますが、追加する
コードの2箇所目の100%の部分の変更は可能のはずです。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/16(Tue) 20:22
投稿者 Yujiro
参照先
いしまるさん ありがとうございます。

まず、これの &show(画像ファイル名,_size,画像の説明)

_size に対して 100x100 など任意な数値を入れることはもとより可能で、
これに対して show.inc.php はサイズ指定のある img src= をHTMLに書き出します。
いしまるさんのおっしゃる通りです。

&show(画像ファイル名,100x100,画像の説明)

これは元の仕様です。これならCLSの判定はクリアされます。
(元の画像の縦横比が崩れようとも)

そこでいしまるさんは、この縦横比崩れを対策するためのclassを書かれたと思います。

<style>
.qhm-plugin-show-keep-ratio {
width: 100%; height: auto;
}
</style>

それは確かにそうなのです。しかし、

そこでサイズの指定にもとより「%」を使っておけば、元の仕様から「qhm-plugin-show-keep-ratio」が呼び出され、
縦横比の崩れない数値のHTMLが出力されます。(もちろんCLSの判定はクリア)

&show(画像ファイル名,100%,画像の説明)  ← 全ての &show にこれを書ければ問題なし。

(これが私の最初の書き込み 2)のパターンです。)

注釈:サイズは指定は100%でなくても良いですが、わざわざ拡大縮小をする必要がないなら100%を記入。

=========================
そこでですね、問題は・・・

これから書くページなら 画像のオプションに 100% を書くことをするでしょうが、(それも面倒ですが)
かつて書いた全ページの&showにこれを改めて書いていられないということです。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

そこで show.inc.php を修正し、サイト全域の&showでサイズ指定がなくとも自動的にHTMLにwidthとheightを
書き出す仕様にできないか、ということです。擬似的にサイズに100%指定と同じ状態が作れたら良いわけです。
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/16(Tue) 19:19
投稿者 いしまる◆vOmCuTAP2Tw
参照先
ちょっと面倒ですが、
以下のような感じにすると多少ご希望の動作に近くなるようです。
「.qhm-plugin-show-keep-ratio」の部分がスキンによって多少
変わったりするのかな?
-----
#html{{
<style>
.qhm-plugin-show-keep-ratio {
width: 100%; height: auto;
}
</style>
}}

&show(画像ファイル名,_size,画像の説明)
Re: 【切実な質問】CLSの改善方法(Googleの新しいランキング要因)
投稿日 : 2021/03/16(Tue) 19:03
投稿者 いしまる◆vOmCuTAP2Tw
参照先
「_size」というオプションがあるようです。
&show(画像ファイル名,_size,画像の説明) 
とすると、「width="3264" height="2448" 」という感じで
サイズが追加されるようです。
同時に、styleの設定が追加されない為か、画像が大きいと
縦横の比が変わって表示されてしまうようです。

- WEB PATIO -