はてなブックマーク

Firefoxでは、Preload Scannerという呼称ではなく、Speculative Parserと呼称されています。 Shallow Parsing Preload Scannerは、Shallow Parsing(浅いパース処理)という手法を使います。 Shallow Parsingシャローパーシングとは、文法解析の一種であり、構文解析の表層的なレベルで行われる解析手法です。 Shallow Parsingは、文法構造を完全に解析する深層解析（Deep Parsing）とは異なり、文書やコードの全体的な構造を理解しようとはせず、特定の情報やパターンを効率的に抽出することに焦点を当てています。 WebブラウザのPreload Scannerにおいては、Shallow ParsingがHTMLドキュメントの表層的な構造を迅速に解析する役割を担っています。 Preload Scann

DOMツリー最適化でブースト！ 高速・効率的なWebページへの鍵を握ろう 2023年4月24日 著者: 竹洞 陽一郎 はじめに 今回は、Webパフォーマンスの基礎となる、HTMLの解析において特に重要なDOMツリーについて解説します。 HTMLのDOMツリーは、多くの人が用語として知っているでしょう。 しかし、木構造の複雑度がCSSやJavaScriptなどの後続処理の時間計算量に大きな影響を与えることについて、十分理解している人は意外と少ないかもしれません。 この記事では、DOMツリーがどのように構築され、その複雑度がWebパフォーマンスにどのような影響を及ぼすかを説明します。 また、効果的なDOMツリー最適化の方法や、それによって得られる恩恵についても触れていきます。 Web開発者は、これらの知識を活用して、より高速で効率的なWebページを提供することができるでしょう。 今回の記事で扱

これらを、先程のheadとbodyの構造図にマッピングしてみます。 HTMLにおけるheadとbodyの構造での各ファイルのマッピング この構造図から、幾つかの事が自明となります。 1. CSSやJavaScriptはheadに書くべきである CSS CSSは文書装飾の役割を果たすため、データではなく、メタデータです。 従って、bodyの中に記載すべきではないです。 HTML Living Standardでは、CSSをhead内に記載すべきである旨を明示的に記述しているわけではありません。 代わりに、style要素に関する記述があり、style要素はメタデータコンテンツであることが示されています。 4.2.6 The style element JavaScript JavaScriptは文書機能の役割を果たすため、データではなく、メタデータです。 従って、bodyの中に記載すべきではな

パフォーマンスチューニングの基礎:プロファイリング 2023年4月3日 著者: 竹洞 陽一郎 はじめに Webパフォーマンスチューニングは、WebアプリケーションやWebサイトのパフォーマンスを向上させるために実施される最適化手法の一連です。 効果的なパフォーマンスチューニングを実現するには、正確なプロファイリング情報が欠かせません。 フロントエンドの品質管理では、プロファイリングを利用して時間消費別のパレート図を作成し、最も時間を消費している部分から改善を開始します。 パフォーマンスチューニングに詳しくない方向けに、Lighthouseが利用できます。 ただし、実務におけるパフォーマンスチューニングでは、Lighthouseだけではボトルネックの特定が難しいことがあります。 これからWebパフォーマンスチューニングを始める方や、現在Webパフォーマンスチューニングに取り組んでいる方には、

能動的に脱IEを押し進める 2021年1月21日 著者: 竹洞 陽一郎 皆さんのWebサイトには、IEを使ったアクセスがどの位ありますか？ それなりの数のIEでのアクセスがあり、IEを利用しているユーザを無視できず、頭を悩ませるWeb担当者も多いでしょう。 そこで、Microsoftが用意しているIEからEdgeへの自動転送の仕組みをご紹介します。 Microsoftが用意したIEを利用した際のEdgeへの自動転送の仕組み Microsoftは、2020年11月13日にMoving users to Microsoft Edge from Internet Explorerというページを公開し、登録申請をすれば、ユーザがIEを使って自社サイトにアクセスしても、Edgeで自動的に開く仕組みを用意しました。 自動転送の仕組みが動作すると、以下の説明文が画面上に表示されます。 自社の登録したサイ

画像の読込処理の違い ページ作成日 2019年12月19日 ページ更新日 2021年3月2日 著者: 竹洞 陽一郎 Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。 その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。 画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の違いを解説します。 decoding属性は、画像のデコード処理に関しての指示をユーザエージェントに明示する属性です。 decoding="async"と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。 記述の仕方としては、以下のようになります。 <img class

インデクシングされなければ検索されない 2019年4月17日 著者: 竹洞 陽一郎 多くの人々が、ユーザがGoogleの検索した時に、自社サイトのページがどれくらいの順位で表示されるのかを気にしています。 そのために、SEO(Search Engine Optimization:検索エンジン最適化)に取り組んでいます。 検索順位のランキングで優位に立つために、Webパフォーマンス(表示速度)に取り組む人々も増えてきました。 しかし、多くの人々は、SEO以前の問題として、Webパフォーマンス(表示速度)の中でも、HTMLのレスポンス時間が遅いとクローリングされない問題を認識していません。 まずは、HTMLを100msぐらいで送出できなければいけないのです。 今回は、SEOの施策としてのWebパフォーマンス(表示速度)対策より、検索エンジンにインデクシングされるためのWebパフォーマンス(表示

実際の性能を知る 2019年3月25日 著者: 竹洞 陽一郎 Googleが推奨しているAMP (Accelerated Mobile Pages)をWebパフォーマンス(表示速度)の高速化として採用している方も多いでしょう。 実際に、AMPはどのくらいの表示速度なのでしょうか？ AMPのページを計測して、分析してみました。 ダウンロード時間 まず、ファイルのダウンロード時間を見ます。 4Gエミュレート(下り30Mbps) AMPのページを15分に1回の頻度で、現在の4Gの下り帯域(30Mbps)で設定して、30日間、15分に1回の頻度で計測したものです。 4Gエミュレート（下り30Mbps）で計測したダウンロード時間 これを30日分の品質として、累積分布関数で見ます。 4Gエミュレート（下り30Mbps）で計測したダウンロード時間の累積分布関数 変曲点は、99パーセンタイルです。 この3

画像を大きく、美しく、しかし軽量に 2017年12月5日 著者: Kameerath Kareem 翻訳: 小川 純平 この記事は米Catchpoint Systems社のブログ記事 Web Performance 101: Tuning Tips for Imagesの翻訳です。 Spelldataは、Catchpointの日本代理店です。 この記事は、Catchpointの許可を得て、翻訳しています。 ビジュアルコンテンツは、モダンなWebサイトにとって、なくてはならないものであり、最もミニマリスト志向のWebサイトデザインですら、完全なエンドユーザ体験のために、シャープで綺麗な画像に頼っています。 スマートフォンからタブレット、ノートPCからデスクトップPCまで、近年はスクリーンサイズが多様になり、高品質な画像を用いて、正しく、あらゆるviewportで表示できるようにすることが重要

高速にJavaScriptを実行するための基本 2017年11月27日 著者: Kameerath Kareem 翻訳: 小川 純平 この記事は米Catchpoint Systems社のブログ記事 Web Performance 101: Optimizing Javascriptの翻訳です。 Spelldataは、Catchpointの日本代理店です。 この記事は、Catchpointの許可を得て、翻訳しています。 JavaScriptは、Webアプリケーションを再定義しました。滑らかなレスポンシブデザインの、動的なWebサイトの時代の到来を告げています。 それは開発者の間で多くの支持を集め、jQueryやAngularJSのような、人気のあるライブラリーやフレームワークは全てJavaScriptで構築されています。 (訳注: Angularの現行バージョンは、正確には主にTypeScr

求められる「品質の明文化」 2017年6月27日 著者: 横浜ステーション法律事務所 代表弁護士 紺野 晃男 今回は、Spelldataの顧問弁護士で、横浜ステーション法律事務所の代表弁護士である紺野晃男先生に、今回の民法改正がWebサイトの制作の請負や、Webサービス提供に関してどのような影響があるのか、専門家の立場から解説の記事を書いて頂きました。 民法（債権法）の改正について 平成29年5月26日、民法の債権法（債権関係）について改正法（以下「改正民法」）が国会で成立し、同年6月2日に公布されました。 改正民法は、一部の規定を除き、公布の日から起算して3年を超えない範囲内において政令で定める日に施行されるということですから、遅くとも3年以内には施行されることになります。 改正民法は、契約関係等について重要な改正を内容としており、契約締結といったビジネス実務の場面に種々の影響を及ぼすこ

顧客体験を「見える化」する更なる指標 2017年5月5日 著者: 竹洞 陽一郎 弊社で販売しているWebパフォーマンスの計測・監視サービスCatchpointの4月のアップデートに、Speed Indexの対応が入りました。 Speed Indexは、Googleが開発や計測サーバの展開を支援しているオープンソースのWebサイト計測Webpage Testに、2012年4月に追加された指標値です。 Webページがどれだけ迅速に表示されて、可視化されたかを表すもので、数値が小さい程、良い値となります。 従来の指標値 ダウンロード完了時間 Webパフォーマンスの指標値として、長年使用されてきたのは、ダウンロード完了時間です。 Webページを構成する全てのオブジェクトをダウンロードし終えた時間を以って、パフォーマンスの指標値としていました。 私が、Akamaiに勤め始めた2006年の当時は4秒ル

1nmは、10億分の1mです。 ウィルスが100nm、分子の大きいものが10nm、原子は0.1nmです。 今後、プロセスルールは、10nm、7nmまで微細化していく事が期待されていますが、技術的な問題より、収益の問題で難しいと言われています。 新しいプロセスルールの工場を建設するには、1兆円の投資が必要となります。 しかし、PCは以前ほど数が売れなくなってしまったので、1兆円の投資をして、より微細化したプロセスルールでCPUを製造しても、投資した金額分の利益を回収するのが難しいのです。 また、プロセスルールが細くなればなるほど、量子力学の法則が支配する世界となります。 量子力学の法則の支配する世界には、トンネル効果というものがあります。 古典力学的には乗り越えられないはずのポテンシャル障壁を、粒子があたかも障壁にあいたトンネルを抜けたかのように通過する量子力学的現象です。 プロセスルールが

確実な高速化に必要な基本原則を知る 2017年3月７日 著者: 竹洞 陽一郎 「Webパフォーマンス改善」「Webサイト表示速度高速化」と検索すれば、色々な記事が見つかります。 その中の幾つかを、実際に試された事がある方もいらっしゃるでしょう。 「やってみたけど、速くならない」 高速化できなかった場合、その原因を知りたいと思いませんか？ 今回は、高速化を確実に成功させるための、高速化の考え方、勘所を解説します。 高速化とは計算量を減らす事 Webサイトの高速化手法は、色々なものが紹介されています。 その具体的な方法は、一旦脇に置いて、抽象化して考えてみましょう。 Webサイトの高速化とは、本質的には、計算量を減らす事なのです。 私達がWebサイトをPCやスマートフォン、タブレットなどで閲覧するとき、それらの端末のCPUは計算をしています。 端末が動作するというのは、「何かを計算している」と

モバイルサイトに「遅延」は許されない 2017年3月1日 著者: 竹洞 陽一郎 2017年2月、Googleのthink with Googleというデータ分析に基づく知見を公開しているサイトに「Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed」(モバイルページの速度の新しい業界指標にどのくらいあなたは近づいているのかを知ろう)という記事が公開されました。 この記事の出だしは、以下のような文章で始まります。 Consumers are more demanding than ever before. And marketers who are able to deliver fast, frictionless experiences will reap the benefits. Glob