画像をref.inc.phpで貼り付ける時に少し速く

pukiwikiのrefプラグイン（ref.inc.php）はページに画像を貼り付ける時に重宝します。このプラグインに少し手を入れることでwebp fallbackを実現したりしていました。

しかし、画像のサイズを取得する設定にしているとこのプラグインは若干重いので、ローカルサーバーの画像を表示するときは相対パスに変換することで若干速くしています。差はそれほど大きくは無さそうですが…

27行目付近

これは当然TRUEにしておきます。画像ファイルを取得しておかないとlazyloadingがうまく動作しません。

// URL指定時に画像サイズを取得するか
define('PLUGIN_REF_URL_GET_IMAGE_SIZE', TRUE); // FALSE, TRUE

しかしこのサイズを取得する設定をTRUEにするとrefプラグインがかなり重くなるのが考え物です。240行目付近で画像のサイズを取得する場所がありますが、$size = @getimagesize($namesize);の1行で画像サイズを取得しに行くところが意外に重い。特に外部のサーバーの場合はなおさらです。絶対パス（URL）で記載しているが指し示すURL自体はローカルサーバーである場合にはこれを相対パスに書き換えることでいくらかでもpukiwiki全体およびrefプラグインを軽くします。

40行目付近

各種設定項目の下にこのような設定項目も新設しておきます。TRUEにすれば（jpegやpngと同名のwebpファイルがある場合に限り）webp fallbackが動作します。

.htaccessでwebpの振り分けを行うサイトではファイル名はimage.jpg.webpやimage.png.webpとしているところもあるようですが、ここでは普通にimage.webpとしています。

// フォルダにWEBP画像を探してみてファイルがなければfallbackするか
define('PLUGIN_REF_WEBP_FALLBACK', TRUE); // FALSE, TRUE

240行目付近

$nameがpukiwikiの設置されているURL（$script）を含むとき、相対パス化したファイルで@getimagesizeをしています。絶対パスより少し速いんじゃないかと…

if ($is_image && PLUGIN_REF_URL_GET_IMAGE_SIZE && (bool)ini_get('allow_url_fopen')) {
 if(strpos($name,$script) !== false){
  $namesize = str_replace($script, '', $name);
 } else {
  $namesize = $name;
 }
 $size = @getimagesize($namesize);
 if (is_array($size)) {
  $width  = $size[0];
  $height = $size[1];
  $info   = $size[3];
 }
}

350行目付近

下記のようにしてwebp fallbackを実現しています。なお、lazyloadにはlazysizes.jsプラグインではなくnativeのloading="lazy"を使っています。pagespeed insightのスコアは、このnativeのloading="lazy"のほうがわずかに良さそう。

if ($is_image) { // 画像
 if ( PLUGIN_REF_WEBP_FALLBACK ) {
  if(strpos($url,$script) !== false){
   $url = str_replace($script, '', $url); //ローカルサーバーでは相対パスにする
  }
  $urlwebp = pathinfo($url, PATHINFO_DIRNAME ) . '/' . pathinfo($url, PATHINFO_FILENAME ) . '.webp'; //同じディレクトリにwebp画像があるか探す
 }
 if ( PLUGIN_REF_WEBP_FALLBACK && file_exists($urlwebp) ) {
  $params['_body'] = "<picture><source type=\"image/webp\" srcset=\"$urlwebp\"><img class=\"refimg\" loading=\"lazy\" src=\"$url\" alt=\"\" $info></picture>"; //webp画像fallback
 } else {
  $params['_body'] = "<img class=\"refimg\" loading=\"lazy\" src=\"$url\" alt=\"\" $info>";
 }
 if (! $params['nolink'] && $url2) {
  $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
 }
} else {
 $icon = $params['noicon'] ? '' : FILE_ICON;
 $params['_body'] = "<a href=\"$url\" title=\"$info\">$icon$title</a>";
}

あるいは、safariがnativeのloading="lazy"に未対応なのが気になるという方でlazysizes.jsを使う場合は下記のようになります。

if ($is_image) { // 画像
 if ( PLUGIN_REF_WEBP_FALLBACK ) {
  if(strpos($url,$script) !== false){
   $url = str_replace($script, '', $url); //ローカルサーバーでは相対パスにする
  }
  $urlwebp = pathinfo($url, PATHINFO_DIRNAME ) . '/' . pathinfo($url, PATHINFO_FILENAME ) . '.webp'; //同じディレクトリにwebp画像があるか探す
 }
 if ( PLUGIN_REF_WEBP_FALLBACK && file_exists($urlwebp) ) {
  $params['_body'] = "<picture><source type=\"image/webp\" data-srcset=\"$urlwebp\"><img class=\"lazyload refimg\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"$url\" alt=\"\" $info></picture>"; //webp画像fallback
 } else {
  $params['_body'] = "<img class=\"lazyload refimg\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"$url\" alt=\"\" $info>";
 }
 if (! $params['nolink'] && $url2) {
  $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
 }
} else {
 $icon = $params['noicon'] ? '' : FILE_ICON;
 $params['_body'] = "<a href=\"$url\" title=\"$info\">$icon$title</a>";
}

さらに、これだとCLSがわずかに発生してしまいます。なのでwebpのみdata-srcsetを使わずsrcsetとしておくという逃げ道を取ることもできます…（実はpictureタグの中のwebpはlazyloadしなくてもjpgやpngさえlazyloadしていればCore Web Vitalに悪影響がないっぽい）。

ネイティブの遅延読み込みでeagerも選択できるようにする（2024.3.29追記）

全てのrefで読み込む画像にloading="lazy"を付けているとPagespeed inshightでのスコアが下がり、トップに表示される画像はむしろ遅延読み込みしないようにするように注意されます。そこで、引数にeagerを付けた場合はloading="lazy"ではなくloading="eager"を付けるようにします。

使い方としては、下記のような書き方になります。

#ref(https://oncologynote.jp/img/88619a062d.jpg,eager,nolink)

126行目付近

下記のパラメータを追加

'eager'  => FALSE, // 画像を遅延読み込みしない

365行目付近

遅延読み込みしたくない画像は、eagerと追加することにより遅延読み込みを回避できるようにしておきます。

if ( $params['eager']) {
$lazy = "eager";
} else {
$lazy = "lazy";
}
if ( PLUGIN_REF_WEBP_FALLBACK && file_exists($urlwebp) ) {
$params['_body'] = "<picture><source type=\"image/webp\" srcset=\"$urlwebp\"><img class=\"refimg\" loading=\"$lazy\" src=\"$url\" alt=\"$title\" width=\"$width\" height=\"$height\" ></picture>"; //webp画像fallback
} else {
$params['_body'] = "<img class=\"refimg\" loading=\"$lazy\" src=\"$url\" alt=\"$title\" width=\"$width\" height=\"$height\" >";
}

この遅延や見込み回避を使うときは、以下のように評価します。

#ref(xxxx.jpg,eager)

プラグインの改造は必ずバックアップを取ってから行います。
なお、当サイトのref.inc.phpは適宜修正しながら使っていますので色々と改装していますが、2024.3.29時点のものを置いておきます。

ref.inc.php

2021

親要素のDIVボックス全体にリンク範囲を広げる方法（改良版）親要素全体をリンクのクリック範囲とするのはタイルデザインなどのウェブサイトでは多用する技術です。しかしタイルデザイン全体のどこをクリックしてもリンクにつながるようにするには一工夫が必要で、ネットを見てもいくつかの方法があるようです。方法1 当サイトで始めに使っていたの

lazysizesに伴うCLS解消のその後の顛末

以前はうまくいっていたlazysizes.jsでCLSが生じる問題の対策以前に「Lazysizes.jsを使うとCLSが発生する問題」の記事を書いていました。画像の遅延読み込みを可能にするJavaScriptであるlazysizes.jsを使うと、CLSが生じてpagespeed insightの評価スコアが下がってしまうという問

この記事に対するコメント

このページには、まだコメントはありません。

添付ファイル: ref.inc.php 169件 [詳細]

更新日：2024-03-29 閲覧数：166 views.