ホームページ運用

[Cocoon] ブログカードを編集するとURLだけが表示されるようになった?(Cocoon 2.6.3.2) とりあえずのメモ

[Cocoon] ブログカードを編集するとURLだけが表示されるようになった?(Cocoon 2.6.3.2)

最近、過去に入れていたリンクがCocoonのブログカードになっていないことがあります。ブログカード内を編集したタイミングで、ブロックのHTMLの整合性が崩れるようです。いったん、「書式を削除」して、行頭の余分な空白を消し、改行しなおすと元に戻せます。ブロック内の改行の扱いが<p>から<br>に変更になっているようです。WordPress 6.3にアップデート後の仕様変更によるもので、Cocoonの最新版(Cocoon 2.6.3.3)では、対応されました(追記:2023年8月...
[CSS] 印刷時にラベルボックスの一部だけが別のページになるのをどうにかしたい とりあえずのメモ

[CSS] 印刷時にラベルボックスの一部だけが別のページになるのをどうにかしたい

メモ。ラベルボックスの見出しラベルボックスの内容こんな感じで、ラベルボックスのラベル部分と内容部分が別のページに印刷されてしまうのが気になります。たぶん、CSSのpage-breakみたいなのがあった気がする。
[WordPress] “x-litespeed-cache: miss”になっている とりあえずのメモ

[WordPress] “x-litespeed-cache: miss”になっている

サイトのレスポンスヘッダーを見ていたら、「x-litespeed-cache: miss」と標示されました。LiteSpeed Cacheがうまく動作していないのかと思いましたが、キャッシュ削除の直後だっただけでした。サーバキャッシュが見つからない(x-litespeed-cache: miss)?前回はこちら。gzip対応を確認するときにサイトのヘッダー情報を見ていたら、「サーバキャッシュが見つからない(x-litespeed-cache: miss)」と言う表記が気になり...
サーバで gzip圧縮できているか確認した(cPanel, LiteSpeed, mixhost) とりあえずのメモ

サーバで gzip圧縮できているか確認した(cPanel, LiteSpeed, mixhost)

Pingdomで改善提案に「gzip圧縮」があったので、設定を確認しました。設定方法がいまいちよくわからなかったものの、Gzipサイトのチェッカーで確認したら すでに有効になっていたようでした。LiteSpeed Cacheプラグインを無効にして計測し直したら、gzip圧縮の項目スコアが下がっていました。一応、効いているみたいです。勉強にはなりました。gzip圧縮できている?前回は、Pingdomのテストで「gzip圧縮」を提案されました。まず、大事なことは ページが gzi...
Pingdomのサイト速度テストと今後の課題 とりあえずのメモ

Pingdomのサイト速度テストと今後の課題

PageSpeed Insightsの改善点がなくなりました。さらに Pingdomでテストすると、gzip圧縮とキャッシュ有効期限の設定の改善提案がありました。TTFB(Time to First Byte)PageSpeed Insightsのパフォーマンスが 98 になりました。主な改善点もなくなりました。PageSpeed Insights(chiilabo.com 2023/07/22)7月上旬に実施したサイト微調整の結果が出ています。レポートを見ていると、「TTF...
[Google AdSense] GDPRメッセージを作成しないといけないの?【Google 認定のCMP】 インターネット小話

[Google AdSense] GDPRメッセージを作成しないといけないの?【Google 認定のCMP】

Google AdSenseの画面上部に「GDPRメッセージを設定するように」赤い通知が表示されました。簡単に言うと、EUのプライバシー保護規制があるので、広告配信サイトで「同意」確認の表示義務が強化されたようです。AdSenseの同意確認では、どんなメッセージでもよいわけでなはく、Googleの基準を満たす必要があります(Google認定のCMP)。とはいえ、日本国内のアクセスがメインなら直接の影響は少ないです。欧州・英国からのアクセスに対して、AdSense広告が非表示に...
とりあえずのメモ

[WordPress] 印刷時に管理者バー分の余白があるのが気になる(admin-bar)

管理者としてログインしているときに印刷モードでレンダリングを表示すると、上部に余白がついているのがきになりました。この余白は、html タグについているようです。どうも、管理者バーの分だけ画面全体を下にずらすのが目的のようです。WordPressのソースコードを検索すると、この余白が _admin_bar_bump_cb で設定されていることがわかりました。function _admin_bar_bump_cb() { $type_attr = current_theme_s...
[Cocoon] 広告位置でAdSenseのモバイル広告サイズが違う? とりあえずのメモ

[Cocoon] 広告位置でAdSenseのモバイル広告サイズが違う?

モバイル広告のサイズは広告コードの入れ方で変わります。自動広告だと広告スペースの位置や大きさを認識して自動的にサイズを決めます。モバイル対応のレスポンシブ広告にするには、「オート」ではなく広告ユニットを設定します。本文中などだと逆に大きく表示されました。モバイル広告のサイズと広告コードAdSenseのコードの入れ方によって、モバイル広告のサイズが違うことに気づきました。左は、Cocoonの「広告」設定で挿入した広告で、右 2つは、Cocoonの「広告」ウィジェットで挿入した広...
PageSpeed Insightsのスコアを上げるためにしたこと(2023年7月) とりあえずのメモ

PageSpeed Insightsのスコアを上げるためにしたこと(2023年7月)

トップページの PageSpeed Insightsのスコアを上げるために、いろいろ試みました。結果、モバイルでも ほぼ100点のスコアにすることができました。PageSpeed Insightsの項目を見て、手当り次第 対処法を探していきましたが、振り返ってみると優先順位があることに気づきます。WordPressサイトの高速化では「幹」から「枝葉」の順番に検討していくとよいとわかりました。WordPressサイト高速化の大きな考え方そのページに必要ない要素をなくす見えない要...
[アナリティクス] 「このプロパティの設定は完了していません」の赤い警告を消したい(UA→GA4) とりあえずのメモ

[アナリティクス] 「このプロパティの設定は完了していません」の赤い警告を消したい(UA→GA4)

Google アナリティクスの上部にある赤い警告が気になります。移行タスクに「完了とする」をチェックしていくことで非表示にできました。Google アナリティクスの上部にある赤い警告Google アナリティクスにログインしたら、赤い警告が上部に表示されました。レポートなどに切り替えても表示され続けるので気になります。このプロパティの設定は完了していません。接続済みの UA プロパティで無効にしている場合を除き、元のユニバーサル アナリティクス(UA) プロパティに基づいて設定...
「CDN」とは?(サイト高速化) インターネット小話

「CDN」とは?(サイト高速化)

「CDN(Content Delivery Network)」は、サーバ負荷を分散させて、インターネット上のコンテンツを高速に配信する仕組みです。CDN は世界各地にサーバを分散させて設置した大きなシステムです。コンテンツを配信するときに、アクセスするユーザーに近いサーバから送信してダウンロード時間を短縮します。
サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon] とりあえずのメモ

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。Largest Contentful Paint を速めるのに、ちょっと効果がありました。項目FontAwesome 5FontAwesome 4パフォーマンス9294First Contentful Paint1.9 秒1.8 秒Largest Contentful P...
WordPressの jQuery を jsDelivr に変えてみたけれど(CDNとパフォーマンス) とりあえずのメモ

WordPressの jQuery を jsDelivr に変えてみたけれど(CDNとパフォーマンス)

WordPressのjQueryの読込みを高速化するために、CDNの jsDeliver に変更してみました。しかし、結果としては ほとんど違いは出てきませんでした。WordPressデフォルトのGoogle Cloud CDN 自体がすでに高速なCDNだったようです。jQueryがメインスレッドをブロックしているChromeの開発モードでパフォーマンスを見ていたら、「第三者コードの影響を抑えてください」という診断が目につきました。jqueryライブラリの読み込みに時間がかか...
とりあえずのメモ

「最大コンテンツの描画」のRender Delayを減らす(Largest Contentful Paint)

LCP(Largest Contentful Paint)の数値を改善できないか、「Render Delay」に注目してみました。使っていないアイコンフォントを軽量化したら、少し改善しました。項目前後Largest Contentful Paint2,900 ms1,760 msRender Delay2,250 ms1,020 msLargest Contentful Paint の Render Delay が大きい気がする「Largest Contentful Pain...
とりあえずのメモ

Cocoonの「事前読込みドメイン」を減らした(DNSプリフェッチ)

ついでに、「LiteSpeed Cacheのは、Cocoonの機能と重複する」ということで、Cocoonの事前読込み設定も確認してみました。DNSプリフェッチ事前読込みは、「DNSプリフェッチ」と「preconnect」に関係しています。ドメイン名からIPアドレスを求める処理(DNSの名前解決)にかかる時間は平均して 200ミリ秒と言われています。要は、アクセスしそうなドメインの IPアドレスを事前に調べておくことです。Webブラウザーやアプリケーションにおいて、リンクで指定...
[Cocoon] LiteSpeed Cacheを改めて使ってみる とりあえずのメモ

[Cocoon] LiteSpeed Cacheを改めて使ってみる

PageSpeed Insightsをみると、あとは「サーバーの応答時間」を改善するぐらいです。以前、サーバーキャッシュを設定したら、更新が反映されなかったり、ページ内のランダム要素が固定化したり、とかえって困ることがありました。改めて調べてみたら「LiteSpeed Cacheの不具合の少ない設定方法と使い方 | マニュオン」での解説がわかりやすかったので、LiteSpeed Cacheのプラグイン設定に再挑戦しました。ただ、結果としては パフォーマンススコアが「85」→「...
[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした とりあえずのメモ

[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした

以前に、モバイルフッターメニュー(共有ボタンやいいねボタン)を作ったときにスタイルを追加していました。その後、Google AdSenseのフッター広告と重なるので削除していました。ただ、style.cssにそのときのスタイルが残っていたので削除しました。後で、CSSを戻せるようにメモ。style.css.mobile-menu-buttons .fa-line:before { font-family: "icomoon"; content: "\e915"; positi...
Google AdSenseをページごとに分析するには?【アナリティクスとのリンク】 とりあえずのメモ

Google AdSenseをページごとに分析するには?【アナリティクスとのリンク】

Google AdSenseでどのページが成果を上げているか分析するにはアナリティクスと連携する必要があります。Googleアナリティクスの「パブリッシャー広告」で分析するには、AdSense側の設定からリンクしておく必要があります。「パブリッシャー広告」に「データがない」Google Analyticsで AdSenseを分析するには「パブリッシャー広告」の項目を見ます。しかし、初期状態では「データがありません」と表示されています。Google アナリティクス リンクを追加...
[Cocoon] サイトのキーカラーを変更した とりあえずのメモ

[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。サイトの配色を試行錯誤元の配色です。臙脂色を基調した配色。焦げ茶色をメインにした配色。それをさらに濃くした配色です。「ユーザー補助」「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。パッと見でも、文字が読みやすくなったと思います。CSSでのカスタムカラー追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color...
フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI] とりあえずのメモ

フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI]

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。js-iframe-trackerを無効したら解決しました。iframeTrackerは、リンククリックを計測するためのjQueryプラグインです。フォームの要素にラベルが関連付けられていませんPSIで「input#focus_retriever」にラベルがない、と表示される。フォームの要素にラベルが関連付けられ...