dobusarai/blog

WebP Converter for Mediaというプラグインを導入した。jpeg, pngなどの画像フォーマットだとGoogleさんのpagespeed insightsで猛烈に点数を下げられるようになったからだ。SEOとかに全くこだわりはないのだけど(誰も見てないし)、レンダリング速度にはこだわりがあってテーマをスクラッチから作ったので……。

プラグインをインストール直後に設定 -> WebP Converterをクリック。直後にエラー。あーそういえばhttpdで強制的に読ませたりなんだりする処理なので、nginx側でも設定が必要。それはこの辺りに書いてありました。
https://wordpress.org/plugins/webp-converter-for-media/#%0Aconfiguration%20for%20nginx%0A
私は<web_root>/blog/にWordPressを配置しているので、上の設定(nginx.conf)にあるパスの先頭に"/blog"を付与しています。systemctl reload nginxでリロードするとエラーは消えます。

プラグインの設定はデフォルト。既存画像も全て変換するため、Force convert all images againにチェックを入れて、Regenerate Allボタンを押して実行。おわり。

https://www.dobusarai.net/blog/realforce-91ubk-s/
このエントリは画像が数点あるので82点だったのだが、プラグイン導入後に94点になりました。というか、残りは不要なJavascriptの削除っぽいのだけど、このblogってJQueryもなにも全てのJavascriptを排除してたような気が……。って、あんたかよ！

/gtag/js?id=UA-126…-1(www.googletagmanager.com)

https://developers.google.com/speed/pagespeed/insights/?hl=JA&url=https%3A%2F%2Fwww.dobusarai.net%2Fblog

WebP必須ってこと？pictureとかで振り分けるのダルすぎ！というか元凶のsafariとかいうウンコブラウザをどうにかしてから言え！

と思ったらversion14(今が何なのか知らん)でついに対応するそうな。そうしたら全部WebPに変換してスコアチェックしようかな。なんかIE11も対応するっぽいよ。

追記
IE11も対応するってどこかで読んだ気がするけど、sourceを見つけられなかった。酔ってるからかな。もういいでしょ、捨てよう！IE！

クロム開発ツールだと、auditが消えLighthouseって名前になってるけどいつからなんだろ。

https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=https%3A%2F%2Fwww.dobusarai.net%2Fblog
うーんこの。

Techエントリならqiitaとかに書けばいいんじゃないの？的な。ネタはあるのだけれど、もう色々と精査するのも面倒で。googleのアクセス解析も半年以上見ていないけれど、個人ブログというか個人サイトの需要って相当クオリティが高くないと無いのじゃないかしらっていう。

AWS + C#みたいな、そこらへんの技術はqiitaに書きますね。多分。アカウントは取得済みなんです。覚えていたら。マークダウンに馴染みがないので、そこもダルいのですけれど。lambda(C#)とか、PHP(Phalcon 3.4 -> 4.x)とか、FeliCa読んで云々とか。超絶ニッチな需要がありそうなネタがあるのだけど、なーんかめんどくさいのよなー。書くのが。覚えていないけれど、この糞ブログに載せているコードは確実に動くはず。エラー吐かずに動いてからエントリ書いてたからね。確か。

「これが最先端だぜ！」みたいのはないけど、実運用でもっと楽したいなーみたいのをあれこれ試行錯誤していたので、そういうのを書ければ。酒飲んでない日に。

以前、職場でこの手の話が出たので自分でも実装してみたのだが、WordPress環境では試していたなかったのでやってみた。テーマから書き直したので随分と殺風景なデザインになったが、99点(analytics入れてると100点無理ゲーっぽい)になったのでまあいいだろう。とはいえ、早速新規で上げた画像の最適化コマンド(シェルで書いたやつ*後述)を実行したらモバイル97点、PC100点だったりするのでなんとも言えない。

テーマ

Bonesというブランクテーマをベースにしていたのだけど、オワコンというか公式が閉じてしまったので_scoreをベースに書き直した。死ぬほどシンプルなサイトになったけどな。昔はマテリアライズとかいうやつで書いてみたのだけど、デザインなのにjs必須だったのでうーんって感じだったのだが。とにかくデザインにjs使わない、cssは最小にってことでwater.cssをベースに作り直した。あと不要なjsを読み込まないように、テーマのheader.phpに書いた。

// disable script
wp_deregister_script('jquery');
wp_deregister_script('wp-embed');
wp_deregister_style('wp-block-library');

if (!(is_admin())) {
    // emoji disable
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
}

テーマのfunction.phpで絵文字を読み込まないように改修。

nginx

    gzip on;
    gzip_types text/css text/javascript application/javascript application/json application/xml application/font-woff image/svg+xml;
    gzip_vary on;
    gzip_proxied any;

httpの部分に上記、serverの部分に下記。

        location ~ .*\.(html|jpg|jpeg|gif|png|css|js) {
            expires 180d;
        }

まあ普通。俺はサードパーティ製のプラグインが信用出来ないので、WpToTwitter(投稿時にtwitterに投げるやつ)以外は一切入れていないのだけど、何かの役に立てば。

その他

*1
wordpressの新しいエディタ考えたやつは頭が悪すぎる。めんどくさいんだよ死ねボケ。テキストをそのまま書かせてくれよ。知らない人にはわからないし、わからないほうがいいけど、ホントに酷いのよこれ。