head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Googleがrel=nofollow属性の扱いを変更。sponsored属性とugc属性を新たに導入
[レベル: 上級] rel="nofollow" 属性の扱いを Google は変更しました。 従うべき命令としてではなく、手がかりのためのヒントとして利用するようになります。 また、nofollow の派生型として、link タグと用いる 2 種類の rel 属性を新たに導入しました。 nofollow 属性の扱いを変更 rel="nofollow" 属性が付いたリンクを Google はこれまでランキング要因としては利用していませんでした。 PageRank を渡すこともないしアンカーテキストも評価しません。 そして、nofollow 属性を命令 (Directive) として Google は扱い、必ず従ってきました（nofollow リンクが評価されている状況があるという分析もあるけれど、公式見解では nofollow リンクはランキング要因から除外されることになっている）。 今後
スマホやRetina対応するためのイメージタグの記述方法 - by Takumi Hirashima
スマホやRetina対応するためのイメージタグの記述方法を紹介します。 例えば、パソコンとスマートフォンで画像を切り替えて、かつRetinaディスプレイ対応をしたい時に便利な方法です。 基本的なイメージタグの記述方法 Retinaディスプレイに対応するためのイメージタグの記述方法 スマートフォンでは別の画像を表示したい時のイメージタグの記述方法 基本的なイメージタグの記述方法 まずはイメージタグの基本的な記述方法を紹介します。 <img src="example.jpg" alt="example" > イメージタグには、画像URLを指定するsrc属性以外にも特徴的な属性がいくつかあります。 src=”” ソース 表示する画像のURLを指定します。 alt=”” オルト 画像の代わりとなるテキストを指定します。 title=”” タイトル 画像の補足的な情報を指定します。 指定した内容は、
Google検索結果に表示される説明文などの詳細なコントロールを可能にする新仕様が発表
by 422737 Google検索の検索結果画面には、単に関連のあるウェブサイトのタイトルやURLが表示されるだけではなく、ウェブサイトの内容を説明するテキストなども表示され、ユーザーが適切なウェブサイトを発見するために役立てられています。そんなGoogle検索結果に表示されるコンテンツの内容について、ウェブサイトの運営者がより詳細にコントロールするための、新たな仕様が発表されました。 Official Google Webmaster Central Blog: More options to help websites preview their content on Google Search https://webmasters.googleblog.com/2019/09/more-controls-on-search.html Googleの検索結果にはコンテンツのテキストな
ホーム - Doruby
最新のテクノロジーを学ぶ 世界中の人々が最新のテクノロジーを見つけたり、学んだりする環境を提供しています。最新テクノロジーに精通した世界トップクラスのライターやエディターが、様々なコンテンツを発信しています。 Dorubyが大切にしていること テクノロジーに情熱を持っているプロフェッショナルたちが、テクノロジーについて紹介するだけでなく、それを実際に体験したことをもとに、本当に重要なことを読者の皆さんにお伝えします。何百もの記事やコンテンツを発信し、将来なくてはならない技術や最先端技術について解説しています。 レビューの仕方 当社は、商品をレビューする記事やコンテンツも発信しています。商品をレビューするのは一度きりではなく、長期にわたって観察し、評価内容を定期的に更新・アップデートするようにしています。 テクノロジーを専門としたライターで構成されるグローバルチームを結成し、公正なテスト基準
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス