保護中: URL短縮対応画像遅延読込・画像リサイズプラグイン

  • 2021.02.23
Download

保護中: URL短縮対応画像遅延読込・画像リサイズプラグイン
  • 暫定公開版です(PukiWiki1.5.2及びPukiWiki1.5.3で動作確認済)
  • 本プラグインは次のファイルで構成されています
    • imageフォルダPukiWikiの当該フォルダにファイル内容をコピーする
      • spacer.png:imgタグ用ダミー画像(画像遅延読み込みのためのスペーサー画像)
    • resize_cacheフォルダPukiWikiのルートにこのフォルダを作成する(resize_imageプラグイン用のキャッシュフォルダで中身はない)
    • skinフォルダPukiWikiの当該フォルダにファイル内容をコピーする
      • lazysizes.min.js:画像遅延読み込みを実現するJavaScript(GitHub aFarKas/lazysizes
    • pluginフォルダPukiWikiの当該フォルダにファイル内容をコピーする
      • ref.inc.phpPukiWiki標準refプラグインに画像遅延読み込みと画像リサイズ処理を組み込んで改造したプラグイン
      • resize_image.inc.php:画像リサイズプラグイン
  • 本プラグイン一式を導入することで、次の効果が得られます
    • 添付画像を変更することなくページ表示上の画像を適度にリサイズ(画像・容量)することで、複数画像があるページの通信トラフィックを軽減できる
    • PukiWiki標準refプラグインでの画像リンクは今まで通りリサイズされていない元の添付画像となる
    • 複数画像があるページの画像遅延読み込みが可能(ページ表示の体感速度アップ)
    • resize_imageプラグインで作成したリサイズ画像(デフォルトでWebP品質値70)はresize_cashフォルダに自動でキャッシュされる
    • プラグイン一式の導入のみで既存ページの修正は一切なし(refプラグインが画像遅延読み込み用imgタグを自動で生成し、resize_imageプラグインを自動で呼び出す仕組みのため)
  • resize_imageプラグインを単体のインライン・プラグインとして利用することも可能です
  • refプラグインの設定を変更することで、resize_imageプラグインを利用せずに画像遅延読み込みだけを利用することも可能です
  • 設置と設定に関しては本サイトの記事「SEOとページ表示速度の関係とは?画像WebP化&遅延読込で高速化!」を参照して下さい
  • 本バージョンはオンラインサロン会員(PukiWiki開発応援会員以上)のみの限定公開です(2022年以降にPukiWiki開発基本会員に公開/さらにバージョンアップした際はひとつ前の旧バージョンを無料一般公開する予定)
  • URL短縮ライブラリが導入できない環境用のURL短縮非対応(未導入)版を利用したい場合は、Ver0.4.0aを利用して下さい
  • Ver0.4.0は、しめじ様からのご支援とご要望により開発・公開しております
  • Ver0.3.0からの変更点は次の通り
    • JPEG形式での画像リサイズからWebP形式による画像リサイズに変更することにより、Googleが提唱する「次世代フォーマットでの画像の配信」に完全対応(下記説明画像参照)
    • PukiWiki操作アイコンWebP版を利用することで、PukiWiki完全WebP化が可能
    • 最新のlazysizes.min.js(v5.3.0)を収録
  • Ver0.2.0からの変更点(FacebookのOGP仕様変更対応)は次の通り

PageSpeed Insightsでの従来バージョンと本バージョンの比較説明画像は次の通り。

従来バージョンで私設松本零士博物館「新竹取物語 1000年女王 05巻」ページを計測した結果画像
(3回計測して一番良い値を採用)

本バージョンで私設松本零士博物館「新竹取物語 1000年女王 05巻」ページを計測した結果画像
(3回計測して一番良い値を採用)

本バージョンでのページ計測「次世代フォーマットでの画像の配信」結果(一部)
TwitterFacebookページGoogle AdSense等、サイトで利用している外部サービスの画像だけが引っかかっている状態
バージョン: 0.4.0
公開:2021年2月23日

この記事が気に入ったら
いいね ! をお願いします


ITで何かお手伝いできることはありませんか?

CTA-IMAGE

本サイトでは、外部サービスと連携して「ITの困った」を解決します!

カテゴリの最新記事

Ads Blocker Image Powered by Code Help Pro
広告ブロックを検出しました!

ブラウザの拡張機能を使用して広告をブロックしていることが検出されました。
ブラウザの広告ブロッカー等の機能を無効にするか、dajya-ranger.comドメインをホワイトリストに追加し、「更新」をクリックして下さい。

 

あなたが広告をブロックする権利と自由があるように、当方にも広告をブロックしている人にコンテンツを提供しない権利と自由があります。

更新