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
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
Google検索結果の変化から読み解く「SEOの未来」 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ つい先日、モバイル検索でのレイアウト変更が発表されました(ソース)。ランキングアルゴリズムと同様、Googleは検索結果のレイアウトを常に変化させており、SEO担当者としては必然的に注視すべき領域となります。 今回の記事では、ここ最近の変更とそれから導き出される見解を、ニール・パテル氏が披露してくれています。SEOの未来とは、いかに。 SEOについて考える時、また、ここ5年間での変化について考える時、あなたは何を思い浮かべるだろうか？ 「Googleの検索結果での高順位獲得が困難になった」ということではないだろうか。 しかし、自然検索結果からの流入獲得が困難になったのは、なぜだろうか。 多くのS
「モバイルファーストインデックス」の真実！ MFI対応ノウハウとオウンドメディアにおけるユーザー体験最適化を徹底解説 | Web担当者Forum
Webサイトへの流入増加に欠かせないSEOを考える担当者にとって、昨年11月にGoogleが発表した「モバイルファーストインデックス（MFI）」は、SEOを根本から見直さなければならないほどの大きなトピックなのではないだろうか。 この記事では前半で、モバイルファーストインデックス導入後、GoogleはWebサイトをどう評価するのか、SEOはどう変わって、どこが変わらないのかを説明する。さらに後半では、Googleが推進しているユーザー体験最適化（SXO）について、UX視点によるコンテンツプランニングを解説する。 ユーザーの変化に合わせて、Googleも変わるモバイルファーストインデックス導入でSEOはどう変わるのかいつまでに対応するべきなの？構造化データマークアップはどうすればいいの？モバイル版は一部のコンテンツを非表示にしているが影響はあるの？コンテンツの続きを読むためにアプリのインスト
【これだからSEOは滅亡寸前？】注意すべき、SEOに不親切な3つのトレンド
毎週多くの人が、SEOはすでに終わっているという記事をインターネットに投稿しています。 しかしこの記事ではSEOがすでに終わっていると宣言するよりはむしろ、SEO産業が結局滅びるかもしれない3つの理由と、準備しておけることについて見ていきましょう。 1.新しい広告 Googleは新しい広告フォーマットで絶えず実験を行っており、実際にオーガニック検索結果よりも優れたユーザー体験を提供しています。広告がより良いものであるほど、オーガニックリスティングに捕われることがほとんどなくなるでしょう。 PPC広告がオーガニック検索結果よりも優れたUXを提供する場合の例は何でしょうか？ ・車探し: これは、車のレビューや詳細、ディーラーなどに関するオーガニックリスティングをクリックしている多くの人々に対して、シンプルなインターフェイスによるSERFs内でGoogleがたくさんの関連情報を直接提供している比
CSSがサイトの読込速度の遅延原因かも？見直すところは大きく3つ！ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
CSSがサイトの読込速度の遅延原因かも？見直すところは大きく3つ！ 2015.01.23 2020.12.17 技術 CSSもページ表示速度を落とす要因になります 「なんだか自分のサイトのページの表示速度が遅いなあ…」そうしたお悩みをお持ちの方は多いのではないでしょうか。 もしかしたら、CSSが原因の1つになっているのかも？CSSを見直す良い機会かもしれません。 ブラウザはページ内容を表示する時レンダリングを行っています。 レンダリングとは、データ（今回の場合だとHTML）に書かれている情報を解析し、その通りにディスプレイに表示させることを指します。 外部CSSはこのレンダリングをブロックしてしまうリソースの1つで、運用方法によっては、これが原因でページ内容を表示するのが遅くなることがあり得ます。 どこを、どうやって改善するといい？ CSSをインライン化する セレクタを見直す HTTPリク
Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
Googleの検索のアルゴリズムにおける検索結果の順位に影響を与える200+個の要因、コンプリートリストを紹介します。 量が多く翻訳するのに一週間かかりましたが、興味深いことが多々あり、とても面白かったです。 Google's 200 Ranking Factors: The Complete List 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 毎日のように海外のまとめ記事を無断転載してアクセスを稼いでいるあのブログの注意喚起を海外のブロガーから聞きます。問い合わせや削除依頼しても対応無しっていうから、たちが悪い。 ドメインによる要因 ページレベルによる要因 サイトレベルによる要因 バックリンクによる要因 ユーザーのインタラクションによる要因 アルゴリズムによる要因 ソーシャル シグナル ブランド シグナル サイト内部のスパム
身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | DevelopersIO
第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の
ウェッブサイトの表示速度を測定するフリーツール集 | ゆっくりと…
コンテンツの充実を図る、アクセシビリティに気を配る、サイトのレスポンスを上げる、どれをとってもまだまだのこのサイト。WordPressテーマinoveのカスタマイズを契機にCSS Spriteという技術を知ってから、まずはこの技術をもっと使ってレスポンスを上げよう！と考え、HTTPリクエストの削減効果と応答速度の変化を定量的に計ることができるツールを集めてみました。 一口にサイトの応答速度を計るといっても、予め何を計るべきかを決め、ツールが一体何を計っているのかを知っている必要があると思います。そこでクライアント〜サーバー間の回線速度は抜きに、 サーバーがWordPressのPHP処理を開始してからHTMLを生成し終えるまでの時間を計る。これにより処理負荷の重いプラグインの改善を図る。 ブラウザ（＝ユーザーエージェント）がHTML・CSS・Javascript・画像データなどをリクエストし
グーグルがJavaScriptを本格的に読んで実行するようになった! など10+4記事 | 海外&国内SEO情報ウォッチ
「検索エンジンはJavaScriptを実行できない」と一般的に言われていたが、グーグルに限って言えばそうとは限らない。 というのも、グーグルは、以前から行っていたような簡単なJavaScriptのクロールよりも、さらに進んだ形でJavaScriptを実行してその結果を解釈するようになっているようだ。そう、ブラウザで見るのと同様な状態で。 公式ブログで次のように語っている。 Google は現在、最新のウェブ ブラウザに近いコンテンツの表示、外部リソースの追加、JavaScript の実行、CSS の適用を実現しています。 ここ数か月間、Google のインデックス登録システムは、かなりの数のウェブページを JavaScript が有効な一般ユーザーのブラウザのようにレンダリングしています。 GooglebotがJavaScriptを理解する力は相当に高まっているようだ。ウェブページの表示に
Microdataなどの構造化データ マークアップについて - kojika17
構造化データ マークアップは、MicrodataやRDFなどを利用して、schema.orgやMicroformatsなどのスキーマを設定する手法です。 構造化データ マークアップを行うことで、Googleのリッチスニペットの露出を高めるなどの効果が挙げられます。 Googleが提供しているツールを利用した構造化データ マークアップの導入方法を紹介します。 今回の目標 Microdataなどの具体的なマークアップの方法にはあまり触れず、ツールを利用して、構造化データ マークアップを行います。 またGoogleの検索におけるリッチスニペットの最適化を目標としています。 リッチスニペット スニペットとは、検索結果の表示される数行のテキストのことですが、さらに詳細な情報を表示したものが「リッチスニペット」になります。 Googleの検索結果でパンくずリストや商品画像、レビューなどが表示されるのを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nibbler - Test any website
まっとうなWebサイトにはSEOなど不要！ 検索エンジンよりもユーザーを思うべし | 生田昌弘の「Web担当者に喝！」
Alexa Web Search
構造化データ マークアップ支援ツール
PageSpeed Insights