t_wの輪郭

『t_wの輪郭』を目出し記法に対応『t_wの輪郭』に購読する機能を追加『t_wの輪郭』をAutoPagerizeに対応させる『t_wの輪郭』の編集時刻をマウスホバーすると閲覧数を表示『t_wの輪郭』にTwitterアカウントへのリンクを追加『t_wの輪郭』にMeta Language タグを追加『t_wの輪郭』のコードを、構文ハイライトする『t_wの輪郭』の検索結果にタイトル設定『t_wの輪郭』の検索フォームをスクロールに追従させるCookie許諾ボタンのデザインを変える『t_wの輪郭』に共有機能を追加『t_wの輪郭』のDOS対策『t_wの輪郭』にデライトへのリンクを追加『t_wの輪郭』の見た目を調整『t_wの輪郭』にPWAを設定『t_wの輪郭』の輪郭に編集日時を表示『t_wの輪郭』に<title>を設定『t_wの輪郭』をダークモードに対応させる『t_wの輪郭』のページャーの値をタイトルに表示『t_wの輪郭』にMeta Description タグを追加『t_wの輪郭』でTwitterの引用をちゃんとしたい『t_wの輪郭』で、tweet埋め込みの文字が大きすぎるtweet埋め込みをもっといい感じにする『t_wの輪郭』の背景色調整『t_wの輪郭』に全文検索機能追加記事が一定数閲覧されたらTwitter APIで自動的にTwitterへ投稿見出しタグを修正『t_wの輪郭』をGoogle Adsenseの審査に出す『t_wの輪郭』において、内容が無い前景を消すのではなく、リンクを無効化して表示『t_wの輪郭』をKaTeXに対応させるリンクをマウスオーバーで輪郭の内容をツールチップとして表示bot.txtで有力な検索エンジン以外を除外『t_wの輪郭』の検索機能を改善『t_wの輪郭』で実施したい作業『t_wの輪郭』をOGPに対応させるTwitter共有ボタンにハッシュタグを追加『t_wの輪郭』にfaviconを設定する『t_wの輪郭』へのデプロイを高速化する『t_wの輪郭』でTwitterの引用が横に並ぶ『t_wの輪郭』の頁間を移動する釦にrel="prev"/"next"属性を付与『t_wの輪郭』にプッシュ通知機能を追加知番無し輪符対応t_wの輪郭 を高速化

t_wの輪郭 を高速化

2022/8/21 16:19:00

2022年8月21日

複数回発行されているSQLクエリを1回にまとめることで高速化を図った。
結果としてはDOMContentLoadedが600ms程度から550ms程度になり、僅かに高速化された。

リンク先のコンテンツ量が乏しいリンクと前景を無効化する処理を、アクセスされた時ではなく事前に処理するようにした。
DOMContentLoadedが550msから130msに高速化された。満足のいく結果になった。

2022年8月10日

若干サイトがもたつく気がする。度重なる機能追加で重たくなった可能性がある。実行速度の測定をしてみる。
開発環境でhtmlが渡されるまでを測定してみたところ、以下の結果となった。
開発環境:162, 145, 156, 153, 150 [ms]→平均153.2 [ms]

サーバー側のプログラムを触ってみたがそれほど高速化できなかった

Amazon Mobile Popoverの読み込み待ちで描画が遅れている。削除した。

そろそろCDNが使いたくなってきた。ただ、CDNを使うとサーバーまでアクセスが届かないので

一旦の対応としてGoogle AnalyticsをCookie無しでも動くようにした。

2022年5月4日

ローカルで動かしているときは問題ないのに、サーバで動かすとリソース(特にfavicon.svg)の取得に謎の待機時間が生じていた。600msとかの待機時間が発生していた。

nginxの設定でlimit_req_zone
limit_req_zone $binary_remote_addr zone=limit_req_by_ip:10m rate=1r/s;
にしてしまっていたのを、
limit_req_zone $binary_remote_addr zone=limit_req_by_ip:10m rate=10r/s;
に変更した。

秒間1アクセスまでに律速されていたのが、秒間10アクセスまで許容するようにした。
良く調べずに使うからこうなる。


調べてる途中でDBが遅いのかもしれないと思い、CREATE INDEXした。効果はなかった。

『t_wの輪郭』のDDoS対策『t_wの輪郭』がGoogleにインデックスされるようにしたい『t_wの輪郭』で使うテスト用の輪郭を作る『t_wの輪郭』で、<a class="link_to_out"><img...に指定されている画像が読みこめない『t_wの輪郭』で、広告の画像が表示されない。『t_wの輪郭』のサーバーに監視ツールを入れる『t_wの輪郭』でアクセスログをDBに記録『t_wの輪郭』をActivityPubに対応させる『t_wの輪郭』開発録『t_wの輪郭』のCookie利用許諾の改良『t_wの輪郭』の、輪郭の順番を選べるようにしたい『t_wの輪郭』でnginxでキャッシュして高速化する検索された言葉を記録する『t_wの輪郭』で実施した作業t_wの輪郭の毛玉表示『t_wの輪郭』のトップページをいい感じにする『t_wの輪郭』でアクセスログを解析『t_wの輪郭』のCookieの許諾ボタンが、Chromeでは輪郭の裏に隠れる『t_wの輪郭』のバックアップ

 2022年4月30日
 あれあれに書かれているように全文検索が鬱陶しくなるということを検証するためだけに全文検索を実装してみる。
 知名完全一致のみの全知検索が問題ないことは実体験済みだが、全文検索が鬱陶しくなるというのはまだ体験していない。

 実装したものの、クロールをやり直さないといけない作りになってしまった。まあ放置しておけばなるようになるだろう。


 2022年4月30日
 postgresqlのLIKEを使ったが、貧弱なサーバーではやはり重たいらしい。いけるかなと思ったけどいけなかった。いったん全文一致に作り替えよう。良くわかってないけど、そっちならインデックスが効くので処理の負荷が小さいはず。


 2022年4月30日
 Postgresqlの全文検索@@演算子を使うといいらしいので、@@演算子による全文検索に切り替えた。

 結局手動でSNSに共有と、RSSが有力か。
 プッシュ通知を実装してもいいかもしれない。私自身は普段ウェブサイトのプッシュ通知を有効化しないが、有効化してくれる人がいれば強力な通知方法になる。

2022年8月1日

プッシュ通知登録ボタンフォローポップアップに移動させて集約した。

GoneのときにDBから削除するように作り変える。今はエラーのときに削除なので意図せず消えている可能性がある。

2022年7月31日

 プッシュ通知を実装した。記事の閲覧回数が一定以上になったらプッシュ通知される。はずである。試験がしづらすぎてちゃんと動くか検証できるまで大変だった。

 PV数でプッシュ通知する目的としては、以下を満たすためである

  • 読者は更新されるたびプッシュ通知されたくない
  • 読者はよく見られている記事だけを読みたい
  • 筆者の私が良く見られている記事に気付きたい

  • 課題:全文検索にしてあるはずなのに、検索結果に出てこない輪郭がある
  • 原因:@@演算子を使っていた
    • @@演算子は何もせずともインデックスを使用すると誤認しており、LIKEよりも大幅に高速だと誤認していた。
    • @@演算子で全文検索できると誤認していた。
  • 対策:LIKEを使用する。
  • 付記:将来的に検索速度が問題になるようであれば、pg_bigmPGroongaの利用を検討する。

2022年10月18日

実装して本番環境に反映した。

KaTeX公式のInstallationからコピペでOKだった。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-Qsn9KnoKISj6dI8g7p1HBlNpVx0I8p1SvlwOldgi3IorMle61nQy4zEahWYtljaz" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" 
        onload="renderMathInElement(document.body);"></script>

<script>deferがなんなのか分からなくて少し調べた(『<script> タグに async / defer を付けた場合のタイミング』)。