レ点腫瘍学ノート

Top / pukiwikiカスタマイズ箇所

2024

pukiwiki

1f01565007.jpg

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

PHP 8.2に移行

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

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

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

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

未ログイン状態で編集アイコンなどを非表示

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対策のダイエット

meta descriptionなどの削除

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

スキンのCSS圧縮

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

構造化データの簡素化

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

pukiwikiのjsonld.inc.phpプラグインは簡単にpukiwikiにJSON-LDの構造化データを追加することができて重宝していましたが、短縮URLプラグインを使っているとパンくずリストのURLが正しく表示できず困っていましたので、ここに改変内容を記載しておきます。jsonld.inc.phpと短縮URLについてはこち

JavaScriptの遅延読み込みの削減

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

Google Analyticsを設置するとPagespeed Insightのスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込み(lazyload)するようにしてスコア低下を回避します。

その他

loading="lazy"のネイティブ化(非JavaScript化)

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が発生する問題をご覧ください。

lazyload(画像の遅延読み込み)するためにlazysizes.jsを使うとスペースホルダーによりCLS (Cumulative Layout Shift)が発生する問題に関して記載するページです。このサイトも遅延読み込みのためにlazysizes.jsを使ってスペースホルダーを使うとCLSが発生する問題について長らく悩まされてき

CDNの積極的使用

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

CDNとは CDNとはContent Delivery Networkの略称で、自分のサイトを公開しているサーバーとは別の高速なサーバーにキャッシュを分散しておいておいてウェブ配信を高速化・効率化する用途などで使われます。サイトの高速化と効率化 CDNのサーバーは世界中に効率よく配置されておりコンテンツの配信速度を高速化できる

画像のwebp化

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

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

JPGやPNGなどの画像をWEBP形式にすることによってファイル容量を減らすことができ、ひいては通信速度の向上によりPagespeed insightsのスコアの改善を期待することができます。しかしWEBP画像は現時点ではSafariに対応しておらず iPhoneやiPadやMacのSafariも2020年秋のアップデートからWEBP

公式プラグインの微修正

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

pukiwikiのrefプラグイン(ref.inc.php)はページに画像を貼り付ける時に重宝します。このプラグインに少し手を入れることでwebp fallbackを実現したりしていました。しかし、画像のサイズを取得する設定にしているとこのプラグインは若干重いので、ローカルサーバーの画像を表示するときは相対パスに変換することで若干速

自作プラグインの微修正

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

pukiwiki プラグイン はてなブログの「ブログカード」は魅力的でPukiwikiにも導入したいと思い、自分で見よう見まねでプラグインを作成して個人用のPukiwikiで利用していましたが、せっかくですのでこの外部のOGPを取得してブログカードとして表示するPukiwikiプラグインを公開することにしました。外部のOGPを取得
PukiwikiにTwitterの単体のツイートを埋め込むだけのプラグインです。ツイートが読み込めないときのフォールバックを設定できます。遅延読み込みにも対応しています。
サムネイル用にページタイトルを取り込んだ画像を出力してくれるPukiwikiプラグイン ひとまず作成しました。ページタイトルと日付を利用して、このようなpng画像を出力してくれます。自分自身のサイト用に作成した段階なのでフォルダやパラメータなどの微調整は未実施です。ダウンロード GitHubのページからダウンロードして、

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

サーバー設定(将来的にLiteSpeed?)

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

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


Amazon | 【Amazon.co.jp限定】ロジクール ワイヤレスマウス トラックボール 無線 M575S Bluetooth Unifying 5ボタン トラックボールマウス ワイヤレス マウス windows mac iPad 電池寿命最大24ケ月 M575 ブラック 国内正規品 | Logicool(ロジクール) | 家電&カメラ
【Amazon.co.jp限定】ロジクール ワイヤレスマウス トラックボール 無線 M575S Bluetooth Unifying 5ボタン トラックボールマウス ワイヤレス マウス windows mac iPad 電池寿命最大24ケ月 M575 ブラック 国内正規品が家電&カメラストアでいつでもお買い得。当日お急ぎ便対象商品は、当日お届け可能です。アマゾン配送商品は、通常配送無料(一部除く)。
https://amzn.to/3F046BR

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

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

お名前:


*1 https://w3techs.com/technologies/segmentation/ce-http3/web_server

更新日:2024-03-29 閲覧数:128 views.