こちらの記事の続きとなります。
書いたばかりなのにいきなり？
それは、かなりひさしぶりのホームページがあるからです。
いらないようで、いらない機能、いわゆる無駄な機能も実装されました。
4K対応のCSSとJavaScriptのファイル
- JavaScriptの実態は、ほぼ jQueryです。
- CSS や JavaScript類はすべて結合されています。
- あくまで、現時点でのファイルサイズです。
サーバーがbrotliに対応しているが、配信に使用されていない br ファイルも作成しています。
-総ソースファイル 97ファイル、956,624bytes
-基本CSS 113,878→min化 71,301→7z+gzip 13,044→br 11,712
-基本JS 116,544→min化 40,995→7z+gzip 17,980→br 16,466
これ以外にページによって動的に読み込まれます。完全全結合は無駄と感じられましたのでやめました。
4K対応のページ画像（テーマ固定）
テーマで固定されているページ画像に、解像度別で提示してみます
（数字は横解像度です）
以下2枚のTOp画像
-1680 - png=863,462→webp=293,326→avif=202,215
-1920 - png=1,037,101→webp=336,410→avif=229,641
-2160 - png=1,351,767→webp=400,722→avif=268,662
-2600 - png=1,883,187→webp=564,320→avif=380,299
-3840 - png=3,538,987→webp=745,352→avif=472,051
以下スマホ用（倍dpi）
-828 - png=732,822→webp=249,378→avif=154,944
-750 - png=527,731→webp=216,034→avif=142,279
↑デザイナーさんから入稿されたこれらの画像、でかいです。大きすぎてSEO心配です。
png=pngquant、jpg=guetzli、webp=cwebp、avif=avifenc 使用
その他svg
-svg 1ファイル 3,011
-svgz 1ファイル 1,238
それではなぜ4Kサイトに本格的に取り組んだの？
今調べたのですが
- googleも
- duckduck go も
- Yahoo Japanも
- bingも
- NHKも
- NTT西日本も
- amazonも
- 楽天市場も
p.s.
- NTT東日本はほんのわずか対応しているようです
- qiitaはほんのわずか対応しているようです
上記大手サイトが対応していない、フル4KのWebページを導入することでした。
身分不相応の4Kディスプレイに対応するサイト制作なわけです。
関係ないが、スクショすらどうして出さないの？
社長の決裁がおりないからです。
主な構築の記録
- 12月末 カンフデータが来て、会議でOKになったのでHTML構築開始
- 12月末 リボ払いで最安値4Kディスプレイを購入
- 1月6日 この日まで正月シカトで無休でがんばれた
- 1月7日 このあたりからHTMLデザインにおいて困難を極め、鬱っぽくなりさぼりはじめる
- 2月20日 このあたりからHTMLの作成を再開した気がする
- 3月中旬 HTMLの開発を終了し、Wordpressに組み込んだ上でWordpress上でHTML開始
- 5月9日 無意味な機能も含み95%が完成した気がする
なお、もともとのテーマもカスタムテーマであり、前任者のfunction.php が大いに参考として役に立ち、無勉強php構築に貢献してくれました。