とりあえずのメモCocoonの「事前読込みドメイン」を減らした（DNSプリフェッチ）
ついでに、「LiteSpeed Cacheのは、Cocoonの機能と重複する」ということで、Cocoonの事前読込み設定も確認してみました。 DNSプリフェッチ 事前読込みは、「DNSプリフェッチ」と「preconnect」に関係しています...
ホームページ運用
とりあえずのメモ
とりあえずのメモ[Cocoon] LiteSpeed Cacheを改めて使ってみる
PageSpeed Insightsをみると、あとは「サーバーの応答時間」を改善するぐらいです。 以前、サーバーキャッシュを設定したら、更新が反映されなかったり、ページ内のランダム要素が固定化したり、とかえって困ることがありました。 改めて...
とりあえずのメモ[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした
以前に、モバイルフッターメニュー（共有ボタンやいいねボタン）を作ったときにスタイルを追加していました。 その後、Google AdSenseのフッター広告と重なるので削除していました。 ただ、style.cssにそのときのスタイルが残ってい...
とりあえずのメモGoogle AdSenseをページごとに分析するには？【アナリティクスとのリンク】
Google AdSenseでどのページが成果を上げているか分析するにはアナリティクスと連携する必要があります。 Googleアナリティクスの「パブリッシャー広告」で分析するには、AdSense側の設定からリンクしておく必要があります。 「...
とりあえずのメモ[Cocoon] サイトのキーカラーを変更した
濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。 サイトの配色を試行錯誤 元の配色です。 臙脂色を基調した配色。 焦げ茶色をメインにした配色。 それをさらに濃くした配色です。 「ユーザー補助」 「ユーザー補助」の面で...
とりあえずのメモフォームの要素にラベルが関連付けられていません（input#focus_retriever, iframeTracker）[PSI]
PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。 js-iframe-trackerを無効したら解決しました。 ifram...
アカウント試しに YouTubeチャンネルにメンバーシップを設定してみた
YouTubeチャンネルの登録者が 1000人を超えたところで、「収益化」ができるようになりました。 その一つに「メンバーシップ」がありました。価格と内容を決めて申請すると、審査が完了するとできるようになります。 試しに、月490円でコメン...
とりあえずのメモ[CSS] AdSense広告のCLSを改善した
AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。 /** 広告のCLS 改善 * */ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280p...
とりあえずのメモ[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）
PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。 主な原因は、トップページで表示しているカルーセルです。 CSSの calc(...
とりあえずのメモ[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）
PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。 これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけ...
とりあえずのメモ【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。 （Google CDN）jquery.min.js?ver=3.6.1 （Cloudflare...
とりあえずのメモスクリプトとスタイルの遅延読込みのしかた[PSI]（WordPress）
CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。 jqueryは、wp_enqueue_script でフッター読込みに変更しました。 レンダリングを妨げるリソース 久々に PageSpeed Insights（PSI）...
SNS[Cocoon]「pinit_main.js」を削除するには？（Pinterest）
Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。 これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。 CocoonのSNSシェアの ...
とりあえずのメモ[PHP] jetpack.cssを無効化する
Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。 /wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0 これを無効にします。 /** Jetpack...
とりあえずのメモ「カスタム検索（サイト内検索）」スクリプトを除外した（cse.google.com/cse.js）
カスタム検索のスクリプト（cse.google.com/cse.js）が重そうです。 asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。 結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリン...
とりあえずのメモ[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script）
トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。 項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45s...
とりあえずのメモ[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google）
ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。 PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。（「使用していない...
とりあえずのメモ[Cocoon] AdSense配信停止を避けるためログイン時に広告コードをなしにした
管理者が広告を表示するだけでも「厳密にはアドセンス規約違反になる可能性がある」ようです。 なので、念のため ログイン時に AdSenseコードを出力しないようにします。 Cocoonテーマで表示している「広告コード」を管理者に表示しないフッ...
とりあえずのメモ[WordPress] プラグインの更新をしたら「Briefly unavailable」
WordPressのプラグイン更新を実行したら、進捗状況の画面ではなく「一時的に利用できない」というエラーが表示されました。 そのまま 1分ほどしてサイトを表示し直してみたら、問題なく表示できました。 プラグインの更新もちゃんと1つ進んでい...
とりあえずのメモ[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”）
ブログを冊子印刷にして配布しているのですが、一部の画像が印刷されていないことがあります。画像の遅延読込み で失敗しているようです。 WordPress によって自動的に付加される「loading=”lazy”」「decoding=”asyn...
とりあえずのメモ[Cocoon] AMPとPWAをオフにした
WordPressのテーマ、Cocoonのアップデートがあり、2.6.1になりました。興味深いのが、AMP・PWAが非推奨になったことです。 Cocoon設定のAMPとPWA機能を非推奨化しました。 AMP機能を有効化する（非推奨） PWA...
とりあえずのメモ[WordPress] Cookie通知を表示させるようにする【Cookie Notice & Compliance for GDPR / CCPA プラグイン】
サイト内の広告コードなどは、Cookieを利用して閲覧情報を収集しています。法律上、閲覧者に Cookieを利用していることを通知する必要があるようです。 WordPressでは、プラグインによって Cookie通知を表示できます。 今回は...
とりあえずのメモ[JavaScript] showOpenFilePickerがエラーになる（Uncaught (in promise) DOMException）
ファイル読み取りのため、以下のコードをそのまま実行したら動きませんでした。 const pickerOpts = { types: [{ description: 'Texts(.txt)', accept: {'text/*': ['.t...
とりあえずのメモ[phina.js] JavaScript でユーザー端末のファイル入出力をするには
JavaScriptでは、ウェブ上のデータと違ってユーザー端末内のファイルには、直接アクセスできない仕組みになっています。これは、自分で作ったプログラムを検証する場合でもそうです。 そのため、ローカル環境のファイルにアクセスするには、自前の...
Mac[Mac] PC内で検証用ウェブサーバを動かす【php -S】
phina.js のプログラムをローカルで検証するために、ウェブサーバを立ち上げることにしました。 ブラウザでHTMLファイルを開いてもサイトと違う ただのファイルとして html を開いた場合（たとえば「file:///Users/use...