レ点腫瘍学ノート

pukiwikiカスタマイズ箇所/2024 の履歴の現在との差分(No.3)


#author("2024-03-29T11:43:12+09:00;2024-03-29T09:25:43+09:00","default:tgoto","tgoto")
#author("2024-04-24T11:46:52+09:00;2024-03-29T09:25:43+09:00","default:tgoto","tgoto")
&tag(pukiwiki);

#ref(https://oncologynote.jp/img/1f01565007.jpg,nolink)
#ref(https://oncologynote.jp/img/1f01565007.jpg,nolink,eager)

当サイトは''Pukiwiki 1.5.4''を使用していますが、主に''pukiwiki高速化・軽量化''のための微修正を加えています。Wordpressなどと比べた時のpukiwikiの大きな強みの一つはその動作の軽さで、当サイトでも以前は非表示にしていたページ下端のconvert timeを表示するようにしました。ref.inc.phpが無いページでは0.010秒、ref.inc.phpがあるページでは0.020秒以内の描画を目標にしています。

#contents

* PHP 8.2に移行 [#a8546e67]

サーバー設定をPHP 8.0からPHP 8.2にしました。pukiwiki 1.5.4の公式対応はPHP8.1までしか明言されていませんが、PHP 8.2でも特に動作の不具合は起こっていないようです。

PHP 8.2よりさらに大幅に高速化したPHP 8.3がすでにリリースされていますが、[[pukiwiki本家サイト>https://pukiwiki.sourceforge.io/]]がスパム攻撃のためにほぼ更新停止しており、今後PHP 8.3やPHP 9.xへの対応がどうなるのかは気がかりです。

* 当サイトで取り入れている非公式pukiwikiプラグイン [#vdb58c8e]

サイトのメンテナンス性を考慮して外部プラグインは増えすぎないようにしていますが、いくつかの非公式pukiwikiプラグインを取り入れています。

- [[akismet.inc.php>https://oncologynote.jp/?f39dac16f2]] + recaptcha.php (v2)
- [[attachref.inc.php>https://pukiwiki.sourceforge.io/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%2Fattachref.inc.php]]
- [[ecache.inc.php>https://pukiwiki.sourceforge.io/?自作プラグイン/ecache.inc.php]]
- html.inc.php([[Internet archive>https://web.archive.org/web/20220901022118/http://pukiwiki.sonots.com/?Plugin%2Fhtml.inc.php]])
- htmlinsert.inc.php([[Internet archive>https://web.archive.org/web/20220901022118/http://pukiwiki.sonots.com/?Plugin%2Fhtmlinsert.inc.php]])
- [[jsonld.inc.php>https://oncologynote.jp/?69e89e3479]]
- [[ogp.inc.php>https://oncologynote.jp/?12173bf026]](自作) + opengraph.php
- [[sitemap.inc.php>https://ikamonster.github.io/pukiwiki-sitemap/]]
- tag.inc.php ([[Internet archive>https://web.archive.org/web/20220901022118/http://pukiwiki.sonots.com/?Plugin%2Ftag.inc.php]])
- [[tweet.inc.php>https://oncologynote.jp/?b723fa4260]](自作)

* 未ログイン状態で編集アイコンなどを非表示 [#p45c4a05]

https://pukiwiki.sourceforge.io/?%E8%B3%AA%E5%95%8F%E7%AE%B1/5484

pukiwikiの $auth_user を取得することでログイン状態を判定できることが判明したので、未ログイン状態では編集アイコンなどを非表示にするようにしました(当サイトは管理者しか編集しないので)。ログインするにはログインページのURL直打ちしてログインする運用にしています。pukiwikiのアイコンを非表示にすることで、普通のブログっぽい見た目を実現できるようにしています。

 <?PHP if (!empty($auth_user)) { ?>
 隠したい部分をここにはさむ
 <?PHP } ?>

*過剰なSEO対策のダイエット [#z8f69250]

** meta descriptionなどの削除 [#c5b89eab]

もはやSEOにはあまり効果がないと言われるmeta descriptionやmeta keywordを、ページによって削除しました。tag.inc.phpなどのプラグインが挿入するmetaタグは残しています。

** スキンのCSS圧縮 [#o605cd85]

pukiwikiのCSSは''外部スタイルシート''を読み込むよりも pukiwiki.skin.php の <head> に直接記述するほうが動作が速いので、当サイトでは外部スタイルシートを使わずにpukiwiki.skin.phpに記述していましたが、これをCSSの視認性を損なわない範囲でminifyして読み込みデータ量を若干削減しました。

** 構造化データの簡素化 [#u14a5e7e]

''JSON-LD''で構造化データを示しておくとGoogleのbotなどにサイトの情報を伝えやすくなりSEOにも有利だとされていますが、ページ情報のわりにJSON-LDの分量が目立つので若干表示量を減らして簡素化しました。JSON-LDについては[[jsonld.inc.phpの短縮URL対応>pukiwikiカスタマイズ箇所/2021/jsonld.inc.phpの短縮URL対応]]も参考にしてください。

#ogpi(https://oncologynote.jp/?69e89e3479)

** JavaScriptの遅延読み込みの削減 [#j11629f6]

JavaScriptの多くで強制的に読み込みを遅らせるようにしていましたが([[参考ページ>pukiwikiカスタマイズ箇所/2021/Google Analyticsの遅延読み込み]])、asyncやdeferなど通常のJavaScript遅延読み込みで対応可能なものはそちらを使うようにしました。効果に大差ないわりに記述量が増えてメンテナンス性が悪いなどの理由からです。

#ogpi(https://oncologynote.jp/?680303ba45)

* その他 [#i9fd73e8]

** loading="lazy"のネイティブ化(非JavaScript化) [#j461cfe1]

FirefoxおよびSafariなどのブラウザも画像遅延読み込みの''loading="lazy"''にネイティブ対応したことでほぼ全ての主要ブラウザが網羅されたと判断して、画像読み込みをJavaScript(''lazysizes.js''プラグイン)ではなくloading="lazy"で遅延読み込みさせるように対応しました。主にref.inc.php やogp.inc.php やスキンでの変更になります。

当サイトでは他のJavaScriptも最小限しか使っていないため、lazysizes.jsを使用しなくなったので''jsdelivr''の読み込みも不要になりました(jQueryはもともと使用していません)。WEBフォントも使わず、2021年ごろに取り組んでいたAMP対応も全て廃止済みなので、外部から読み込むライブラリはほとんど無い状態にしており、これによりpagespeed  insightでもほぼ100点を維持しています。

lazysizes.jsプラグインを使用しなくなってもlazysizes.jsプラグインのために講じた''CLS(Cumulative Layout Shift)''対策は有効なので、引き続きpagespeed insightでのCLS、すなわち遅延や見込みに伴うレイアウトの崩れのスコアは0を維持することを目指しています。詳しくは[[Lazysizes.jsを使うとCLSが発生する問題>日記/2021年/3月8日/Lazysizes.jsを使うとCLSが発生する問題(解決済)]]をご覧ください。

#ogpi(https://oncologynote.jp/?16f4ac0c0a)

* CDNの積極的使用 [#u756f73d]

当サイトでは以前からCloudflareによるサイト高速化を行っています。Cloudflareは随時新機能が追加されており、無料で使用できる機能も多数あります。画像やスクリプトファイルはCDN経由で読み込むようにすることでサイトを軽量化することができます。

#ogpi(https://oncologynote.jp/?30974ad92d)

* ecache.inc.phpの利用 [#nde0874c]

Pukiwikiの描画をキャッシュ化しておくことでPHPにさせる処理を軽量化できます。トップページなど更新頻度に対して表示回数が多いページを丸ごとecache.inc.php化しておくと効果的です。なお、オリジナル版はPHP 8に未対応なので「はいふん」氏によるPHP 8対応の改造版(v1.6)が必要です。

* 画像のwebp化 [#v17d5f0b]

jpgやpngの画像はwebpも扱えるようにしておき、pictureタグで両方を読み込めるようにしておきます。macOSとiOSのSafariが2020年11月にwebpに対応したことで主要ブラウザのほとんどはwebp画像を読み込めるようになり(もはやInternet Explorerに配慮する必要性もほとんどなくなり)、webpは積極的に取り入れる方がサイト軽量化にとっても有用です。

Cloudflareの有料プランなどでは自動webp化してくれるオプションもあるようですが、当サイトは現状ではローカルで[[WebP converter>https://apps.apple.com/jp/app/webp-converter/id1522368690]]を使って一括webp化した画像を画像フォルダに手動でアップロードしています。

#ogpi(https://oncologynote.jp/?5b041d2a93)

** 公式プラグインの微修正 [#f5259b55]

ref.inc.phpはpukiwikiのデフォルトのプラグインの中では動作が遅いプラグインですが、''@getimagesize''周りなどに手を入れることで高速化できます。詳しくは[[画像をref.inc.phpで貼り付ける時に少し速く>pukiwikiカスタマイズ箇所/2021/画像をref.inc.phpで貼り付ける時に少し速く]]をご覧ください。

#ogpi(https://oncologynote.jp/?88619a062d)

** 自作プラグインの微修正 [#af557c61]

自作プラグインのいくつかで不安定な挙動を示していた部分などを微修正しました(グローバル変数でなくて良いのにグローバル変数を多用していた部分の適正化など)。

#ogpi(https://oncologynote.jp/?12173bf026)
#ogpi(https://oncologynote.jp/?b723fa4260)
#ogpi(https://oncologynote.jp/?c8b17a2679)

JavaScriptを使って過剰に遅延読み込みさせていた部分も、通常のasyncやdeferで対応するのと大差ないパターンでは構造を簡素化しました。サイト転送量の削減を優先しています。

** サーバー設定(将来的にLiteSpeed?) [#kbad9c54]

これ以上に高速化に関わりそうな因子として、当サイトはApache 2.4上で動作していますが、これをnginx、あるいはさらに高速なWEBサーバーと言われているLiteSpeedに置き換えれば、特にTTFBの短縮などが期待できるかも知れません。HTTP/3に対応したサイトの約35%がLiteSpeed上で動作しているとも言われています((https://w3techs.com/technologies/segmentation/ce-http3/web_server))。

今まで使用しているバリューサーバー(安いプランはすぐに制限がかかるので少なくともスタンダードプランである必要があります)はApache 2.4しか対応していないので、サーバー移行は今後の課題です。

#navi(pukiwikiカスタマイズ箇所)
#ogp(https://amzn.to/3F046BR)
#pcomment