head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
Page Speed Insightsで0点→96点に上げるために当店がやったこと
GoogleのSearch Consoleがアップデートし、ページの読み込み速度が表示されるようになりました。 また、速度測定サイト「Page Speed Insight」もリニューアルしました。(けっこう前ですけど) Google検索の順位を見ても、読み込み速度が重視されていることが分かります。 Googleがスピードアップデート(Speed Update)を導入、2018年7月からページ表示速度をランキング要因に | 海外SEOブログ そんな中、当店トップページの読み込み速度を測定してみると、 なんと ゼロ点! (恐ろしくてスクリーンショットは残していません……) そんな状況で上位に入っている当店サイトをちょっと誇りに思いながら、一週間ほど空き時間を使って改修しました。 ※2020/10/10更新 いったんは96点～97点まで上がったのですが、Search Consoleの新項目「ウェ
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
『WordPressでスタイルシートを遅延読込させる方法』
下記2ページを見れば分かる話だが、未来の自分が面倒なのでまとめておく。 CSSを非同期ロードする最も簡単な方法WordPressにスタイルシートを読み込むwp_enqueue_styleの使い方まず、HTMLソースをにらみつつ、遅延読込させたくない外部CSSタグを探して、IDをコピーする。 下記の記述にある「parent-style」や「child_theme」の箇所に、コピーしたIDを貼り付けて、末尾の「-css」を削除する。 function addasync_enqueue_style( $tag, $handle ) { if (( 'parent-style' == $handle ) || ( 'child_theme' == $handle)) { return $tag; } return str_replace( ' media=\'all\'', ' media="pr
WordPressプラグイン「Jetpack」を有効にした際に読み込まれるCSSやJavaScriptを無効化（削除）する方法｜今村だけがよくわかるブログ
WordPressプラグイン「Jetpack」を有効にした際に読み込まれるCSSやJavaScriptを無効化（削除）する方法 WordPressで作ったWebサイトの表示を高速化させるために「不要なCSSやJavaScriptを読み込まないように設定する」なんてことはよく聞きますね。 今回は、WordPressプラグイン「Jetpack」に焦点をあてて見てみました。 読み込まれるCSSとJavaScriptJetpackを有効にすると、下のようなCSSやJavaScriptがデフォルトで読み込まれます。 CSS<link rel='stylesheet' id='jetpack_css-css' href='https://www.imamura.biz/blog/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0' type='te
WordPressのjQuery Migrateを読み込まないようにする方法 | web関連 | 二色人日記。
そもそも「jQuery Migrate」って何？ wordpress側で勝手に用意されてるjQueryのプラグイン googleのデベロッパーツールとかのコンソール上に読み込まれていると以下のように表示されてる JQMIGRATE: Migrate is installed, version 1.4.1 何をしてくれるプラグインかというと 非推奨のコードをコンソールで警告出してくれる 削除・変更された機能や箇所をある程度復元する 廃止されたAPIを復元（製品版） らしい 参考 ▼jQuery Migrate pluginを使ってみる。 http://bashalog.c-brains.jp/13/11/14-142300.php 古いコードなんかがあると警告が出るからそれを修正して警告がでなくなったら外すのがいいみたい。 そもそもコードを触らない人であればいらないと思う。 「jQuery
script タグの外部スクリプトを遅延読み込みする方法 | Design Hack and Slash
画像（img タグ）を遅延読み込み（LazyLoad）するプラグインと同じように、外部スクリプト（script タグ）を遅延読み込みする方法です。 具体的には、JavaScript で提供されている広告タグや、各種ブログ パーツを、ページのレンダリングをブロックしないように配置する方法です。厳密には画像の遅延読み込みとは異なりますが、遅い外部スクリプトを貼らなければならない場合、いわゆる UX（ユーザー エクスペリエンス）の改善に劇的な効果があります。 フレンドリー アイフレーム（Friendly iFrame） 簡単に説明すると、対象の外部スクリプトを呼び出す部分だけを別の HTML ファイルにしてサーバーにアップロードし、iframe タグで その HTML ファイルをページに埋め込みます。 例えば、i-mobile というアドネットワークの広告タグの場合は以下になります。 広告タグ用
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
WordPress：Gutenberg用CSSの読み込みを削除する方法 | NxWorld
Gutenbergを使用しておらず、フロントページのhead内から不要なファイル読み込みを削除したい場合は、wp_dequeue_style()を用いてfunctions.phpに下記のように記述することで関連するCSSの読み込み部分を削除することができます。 add_action( 'wp_enqueue_scripts', 'remove_block_library_style' ); function remove_block_library_style() { wp_dequeue_style( 'wp-block-library' ); } style.min.cssだけでなくtheme.min.cssも読み込まれており、そちらも削除したければwp_dequeue_style( 'wp-block-library-theme' );を追記すれば削除できます。
[Plugin Load Filter]で特定ページのみプラグインを読み込む設定が可能に【競合回避やサイト高速化にも効果アリ】
Plugin Load Filterのインストール 公式のプラグイン配布サイトはこちらになります。 https://ja.wordpress.org/plugins/plugin-load-filter/ 星4.9の評価が付いてますね。 プラグイン新規追加ページの右上の検索窓に「Plugin Load Filter」と入力すると、表示されますのでこちらをインストールして有効化してください。 Plugin Load Filterの設定・使い方 Plugin Load Filterの使い方はとても簡単で、ざっくりと表現すると設定したいプラグインの項目にチェックを入れて保存するだけです。 最初は項目の見方とそれぞれの単語の意味について多少の理解が必要ですが、基本的には10分もかからず理解できる内容となっています。 フィルター設定 下の図1は設定画面ホームとなるプラグインロードフィルター設定画面で
![[Plugin Load Filter]で特定ページのみプラグインを読み込む設定が可能に【競合回避やサイト高速化にも効果アリ】](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c5a320590fcb80c2efcaf950400231f32963944/height=288;version=1;width=512/https%3A%2F%2Fdis-play.net%2Fwp-content%2Fuploads%2F2019%2F04%2Fhost-sorter-1479497-unsplash.jpg)
【瞬殺】WordPressのcomment-reply.min.jsをロードしないようにする【パフォーマンスアップ】
最新機種でVlogの思い出を撮影しよう！ [ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
WordPress4.4以降からhead内に挿入されるようになった不要なタグ「Embed」を削除。 - ONZE
先日WordPressがアップデートされて「Version 4.4」がリリースされました。 いくつかの新しい機能が追加されましたが、今回から採用された「Embed」は比較的新しいシステムなのでご存じない方が多いと思います。 この機能は、他のウェブサイトで「oEmbed」に対応している記事を、自分のブログに埋め込み可能になるもので、WordPress4.4 以降からは記事のURLを貼るだけで簡単に引用表示できます。 なお「Embed」機能で引用表示される情報は以下のとおり。 アイキャッチ画像タイトル抜粋テキストサイトロゴサイトタイトルコメント数共有ダイアログまた「Embed」対応のために、WordPress4.4にアップデートすると<?php wp_head(); ?>のときに下記のコードが自動で挿入されるようになります。 <link rel='https://api.w.org/' hre
Gutenbergブロック用のデフォルトスタイル（wp-block-library-css）を読み込まないようにする方法 | WEMO
WordPress5からブロックエディター（Gutenberg）が導入されました。 これに合わせて、WordPressコアに標準搭載されている各ブロックのデフォルトスタイルが記述されたCSSファイルが自動的に読み込まれるようになっているようです。 実際には以下のようなlinkタグが出力されていることが確認できるかと思います。 head内に追加された記述を確認してみる <link rel='stylesheet' id='wp-block-library-css' href='//example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.2' type='text/css' media='all' />
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
wp_headの不要なコードを削除する方法をまとめました
wp_headで出力されるコードには不要なものがたくさん含まれています。また、使う必要のないファイル（WordPressに入っているjQueryやWordPressプラグインのCSS）がwp_headを通して読み込まれてしまいます。 今回はこれらの問題を解決する方法を紹介します。 wp_headの役割 wp_head関数は、headタグ内に表示するためのさまざまなコードを出力します。これらのコードは、wp-includes/default-filters.phpで設定されています。 また、WordPressプラグインの中には、wp_headアクションを使ってCSSやJavaScriptを出力するものがあります。これらのプラグインはwp_head関数を削除すると正常に動作しなくなります。そのため、テーマを自作する際にはheadタグ内にwp_headを記述する必要があります。 コメントのフィー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Disable All External Requests in Jetpack WordPress Plugin