サイトの表示高速化のためにPage Speed Insightsを利用しましたとさ。

はいどうもマッスルハンターです。

とにかくサイトの表示は速い方が良い。そう信じて疑わないけど、何をすればいいのかわからない。

そんなあなたは是非こちらを利用しましょう。

Page Speed Insights

こちらに高速化したいサイトのURLを送信すれば分析してアドバイスをくれます。

1回やれば言われるまでもなく次からできる事もありますのでまずは見てみると良いでしょう。

私の場合はただ作っただけで全く気にしてなかったゴミのようなページがあったんでそれで試して下記を改善しました。

1.レンダリングを妨げるリソースの除外

この「画面の最初の描画のために必要な情報に絞る」というのがとても重要なようです。

javascriptやCSSの読み込みを非同期で行ったり、最初の描画に必要なCSSをインラインで設定したりしろとのこと。

私の場合はhead内で読み込んでたcssがこれに該当してたので「rel="preload" as="style"  onload="this.onload=null;this.rel='stylesheet'"」を追加したところ改善しました。

javascriptの場合はasyncやdefer属性で解決できます。

参考

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

https://web.dev/defer-non-critical-css/

2.適切なサイズの画像

これはフリー素材を拾ってきたままあげてて、無駄にでかい解像度だったので下記のフォーマットと合わせて修正しました。

3.効率的な画像フォーマット

最近はjpegにも種類があるようでして、JPEG2000やJPEGXRなんていう次世代フォーマットがあるようです。jpegではありませんが、同じくgoogleさんの提唱する？webpも助言に含まれていたので、既にインストール済みだったGIMPでWEBPに変換しました。

ただ、この画像フォーマットについてはブラウザの対応状況の問題もあるかのような雰囲気も無きにしも非ずです。

その中で下記を見るとwebpはおおむね大丈夫そうなのかと思いました。

対象とするユーザーによって考える必要がありそうです。

https://caniuse.com/?search=WebP

あまり中身のないページだったため以上を改善しただけでモバイル90、PC95までスコアがあがりました。

めでたしめでたし。

このサイト明るすぎて目が痛い！って時に使うディスプレイの設定を変えずに画面を暗くするブックマークレット。

たぶん需要はほとんどない、いやむしろ全くないと思う無駄スクリプトのご紹介です。

本スクリプトご紹介する前にブックマークレットというものについて軽く説明しておきます。

ブックマークレットというのはブックマークの機能を利用してURLのとこにjavascriptなどの？コードを入力しておくことでブックマークを利用するかのように、スクリプトを手軽に実行できる裏技的なものです。

例えばどんなことができるのかというと

• 通常はリピート再生できないYouTube動画をリピート再生する
• YouTubeの動画ページで起動すると、通常はない｢ダウンロード｣ボタンが出現します。

とかできるようですね。

もっと詳しい説明と上記のようなブックマークレットのご紹介はこちらのサイトにありました。

このようにブックマークレットも誰かが配布してくれてたりするので、こんなのできないかな～？って思ったら探してみてもいいかもしれません。

もちろん自分で作っても良いでしょう。

さてそれでは今回のスクリプトはこちらです。

下記をドラッグアンドドロップでブックマークバーに追加すれば使えるはず！

暗転

スクリプトの中身としては下記になります。

javascript:
if (document.getElementById('ranaRuta')) {
  document.getElementById('ranaRuta').remove();
} else {
  let d = document.createElement('div');
  d.id = 'ranaRuta';
  d.style.cssText = 'top:0; left:0; width:100%; position: fixed; height:100%; background-color:black; opacity:0.5; z-index:10000; ';
  let b = document.getElementsByTagName('body')[0];
  b.insertBefore(d, b.firstChild);
}

（あ、なんかすげえ見づらいけど、ま、いいか）

真っ黒だけど半透明なdivで画面全部覆ってだけです。

divで覆ってしまうので画面内のボタンとか押せなくなります。

もう一度使うと元に戻りますので戻してから操作してください。

下記のcssの部分をいじれば色をかえたり、明るさを調節できますね。

top:0; left:0; width:100%; position: fixed; height:100%; background-color:black; opacity:0.5; z-index:10000;

一体なんのためにつくったのか、それは画面が明るすぎると目が痛いけど、ディスプレイの設定をいちいち変えるのが面倒だからです。

Firefoxアドオン開発-設定値の保存

ドラゴンクルセイド2F用アドオン開発日記でございます。
事前審査も通りましたんで絶賛？テスト公開中です。

チャットの自動読み込みと税金の自動徴収を設定値を保存できるようにいたしました。
その際に「アドオンの設定を保存する方法」を学んだのでメモしておきます。

Preferences-MDN ←に書いてある事ほぼそのままなんですけど、ブランチ取得してsetなんちゃら、getなんちゃらメソッドでやるだけです。

// "extensions.myext" ブランチを取得
var prefs = Components.classes["@mozilla.org/preferences-service;1"].
getService(Components.interfaces.nsIPrefService);
prefs = prefs.getBranch("extensions.myext.");

nsIPrefBranch には設定の取得・設定のための 6 つのメソッドがあります。getBoolPref(), setBoolPref(), getCharPref(), setCharPref(), getIntPref() そして setIntPref() です。

// nsIPrefBranch 経由の設定操作
// branch を取得する方法は一つ上の章を読んでください
var value = prefs.getBoolPref("accessibility.typeaheadfind"); // 取得
prefs.setBoolPref("accessibility.typeaheadfind", !value); // 設定

prefs.getBranch()の時に最後のドットを忘れて10分くらいハマりました。はい。

規定値の設定は「/defaults/preferences/*.js」だそうで、
そこに
pref("extensions.extensionname.preferencename", false);
って感じで書いてやれば勝手に読み込んでくれます。

やってみると非常に簡単なんですけど、MDNのページ読んでると難しそうに見えました。
扁桃炎でちょっとボケてるのかも・・・。