Preload Scannerを前提にしたCSSにする 2023年5月8日 著者: 竹洞 陽一郎 はじめに 今回から、複数回にわたり、CSSに関する解説を連載していきます。 前回の記事では、Preload Scannerについて説明しました。 Preload Scannerは、Shallow Parsingを用いて、読み込むべきファイルを検出し、バックグラウンドでファイルの読み込みを行います。 このプロセスには、CSSも含まれています。 しかし、Preload Scannerの恩恵を阻む機能を使うと読込が遅延してしまうのです。 CSSの読込とCSS Object Model CSS Background Imageによる遅延 CSS Background Imageとは、CSS（Cascading Style Sheets）の機能の一つで、HTML要素の背景に画像を設定する際に使用されるス

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ページを提供することができるでしょう。 今回の記事で扱

Webパフォーマンスを次のレベルへ！制約条件の理論を活用して本当の意味での「ボトルネック」を特定 2023年4月17日 著者: 竹洞 陽一郎 はじめに Webパフォーマンスチューニングは、ユーザー体験やビジネス成果に直接影響する重要な要素です。 この記事では、Webパフォーマンスチューニングをデジタルサプライチェーンマネジメントと捉え、処理のリードタイムと歩留まりを意識したパフォーマンスチューニングが大事であるという観点から、欠かせないTOC（Theory of Constraints: 制約条件の理論）について解説します。 制約条件の理論(TOC: Theory of Constraints)とは Theory of Constraints（制約条件の理論）は、イスラエルの物理学者であり経営コンサルタントのエリヤフ・ゴールドラット氏によって開発された経営哲学で、組織やプロセスのパフォーマ

これらを、先程の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パフォーマンスチューニングに取り組んでいる方には、

事実は一つだが、真実は人の数だけある 2022年1月5日 著者: 竹洞 陽一郎 先日、家族で映画館に行き、「99.9-刑事専門弁護士-THE MOVIE」を観てきました。 ドラマの「99.9-刑事専門弁護士」のシーズン1、シーズン2も観てましたが、とても面白いし、深いです。 まだご覧になった事が無ければ、面白いので、是非Paraviなどで視聴してみてください。 弊社のお客様である、IDOM様のオフィスが、斑目法律事務所のオフィスとして撮影で使われています。 私も打ち合わせなどで、ちょくちょくお伺いしているので、オフィスのシーンは観ていて、「あそこ！あそこ！」とはしゃぎたくなります。 聖地巡礼って、そういう気持ちになるんでしょうか。 弁護士 深山大翔みやまひろとが追い続ける「事実」 主人公の弁護士 深山大翔は、ドラマでも、映画でも、ひたすらに「事実」にこだわり、「事実」の解明に泥臭く取り組み

能動的に脱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で自動的に開く仕組みを用意しました。 自動転送の仕組みが動作すると、以下の説明文が画面上に表示されます。 自社の登録したサイ

性能品質の可視化の幕開け 2021年1月15日 著者: 竹洞 陽一郎 皆様、新年あけましておめでとうございます。 新型コロナウィルス感染拡大に伴い、世の中が大きく変わりました。 まずは、皆様が、無事に2021年の大晦日を迎えられるように祈願しております。 地方分散の時代へ 今までの東京一極集中が崩れて、地方へと企業や人が移転していく中で、地方自治体の役割が大きくなり、地方分散の時代へと突入したと思います。 地方への分散を可能にしたのは、インターネットの存在と、情報通信技術です。 昨年は情報通信技術を活用した企業が大きく業績を伸ばしました。 よくアメリカ企業で働いていた日本人の間では、「働くなら給与の高いアメリカ企業、住むなら日本」と言われていました。 それが日本の場合は、「稼ぐなら東京、住むなら地方」でした。 東京での給与額はそのままに地方に移転できるのであれば、当然、生活の質が高い地方に

回線高速化による高速化の収穫逓減 2020年6月29日 著者: 竹洞 陽一郎 よくWebサイトの高速化で語られるのは、HTML、CSS、JavaScript、画像のファイルサイズの削減です。 例えば、画像を最適化する、画質を落とす、Gzip圧縮するなどの方法で、ファイルサイズを減らす事が有効という主張をインターネット上で見ます。 実際のところ、ファイルサイズを小さくすることで、Webパフォーマンスの高速化にどの程度寄与するでしょうか? 伝送速度 1秒間にどの位のデータを送る事ができるのかを、伝送速度(Transmission rate)と云います。 日常会話では通信速度と云ったりしますが、国際規格としてはビットレート(Bit rate)と云います。 これは、単位時間あたりの通信できるbit数を表したものです。 しかし、日常、私達が使うファイルサイズの単位はbitではなく、byteです。 で

※5G対応AndroidモデルのLG V60とGalaxy S20を追加しました。(2020/7/3) ※GoogleのリファレンスモデルとなるPixel 4 XLを追加しました。(2020/7/4) ※GoogleのリファレンスモデルとなるPixel 5を追加しました。(2021/3/26) ※AppleのiPhone 12 Pro Maxを追加しました。(2021/3/26) 考察 この結果で注目して欲しいのは、GoogleのLighthouse、PageSpeed Insight、TestMySite、などの性能が非常に低いという点です。 そして、Galaxy A20のような安価なAndroid端末は、それらよりも性能が低いという点も注目して下さい。 さて、あなたは、どこに基準を置きますか？ iPhoneでしょうか? それともAndroidでしょうか? iPhoneユーザをターゲット

お客様のために高速化して直帰率が半減 株式会社ディノス・セシール様は、カタログ、TV、ECをチャネルとして事業展開を行う、老舗の通信販売企業です。 今回は、www.cecile.co.jpの高速化のため、SpelldataのWebパフォーマンスチューニングサービスを導入して頂きました。 プロジェクト・マネージャの中島様、長年セシールのサイトを統括して管理されてきた三木様に、ディノス・セシール様がどうして表示速度を重要視しているのか、パフォーマンスチューニングしてみての感想や、今後のWebパフォーマンスについて展望などをお伺いしました。 業務改革本部 EC推進部 中島 弘輔 様 今回、セシールのサイトの高速化のプロジェクト・マネージャを務められた中島さん。 普段、ご自身がユーザとしてAmazonの快適さに購買意欲がそそられる体験を実感していたので、SEOやCV率上昇の効果を期待して、Spel

裁判ではなく仲裁による解決 2019年12月24日 著者: 弁護士 中島 成 2020年4月1日の改正民法債権法施行まで、残り3か月となりました。 品質、システムにおいては特に非機能要求である性能については、機能要求と異なり揉めやすい項目です。 機能要求は、できる・できないがはっきりしているのに対して、性能などの非機能要求は予め数値目標などをしっかり定めなければ白黒をはっきりさせられないからです。 システムが社会の隅々までインフラとして、日常のツールとして浸透していく現在、システムを巡る潜在的なトラブルは増加しており、改正民法債権法で一気に顕在化されると思われます。 その全てを裁判で解決するのは、費用や時間、労力の面で非効率的であり、また、裁判は人間関係を悪化させ、顧客とベンダーの関係を壊してしまいます。 また、システムを巡るトラブルは、内容が複雑であるため、本当に内容を裁判官に正しく理解

画像の読込処理の違い ページ作成日 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

コードとヘッダ、Webページを動かす二つの歯車 2018年5月22日 著者: Kameerath Kareem 翻訳: 小川 純平 この記事は米Catchpoint Systems社のブログ記事 Web Performance 101: HTTP Headers Pt. 2の翻訳です。 Spelldataは、Catchpointの日本代理店です。 この記事は、Catchpoint Systemsの許可を得て、翻訳しています。 前回の記事では、基本的なHTTPヘッダについて、それらがどのように実装されているかについて、確認しました。 ヘッダはページのパフォーマンスに様々な形で影響しますが、デジタル体験に対して良くも悪くも影響する、3つの要素があります。 キャッシュ 圧縮 セキュリティ この記事では、Webサイトパフォーマンスの最適化にあたり、ヘッダがどのような効果があるかお話します。 ここで

パフォーマンス改善の第一歩 2018年4月9日 著者: Kameerath Kareem 翻訳: 小川 純平 この記事は米Catchpoint Systems社のブログ記事 Web Performance 101: Page Size Metrics (Total Downloaded Bytes)の翻訳です。 Spelldataは、Catchpointの日本代理店です。 この記事は、Catchpoint Systemsの許可を得て、翻訳しています。 このシリーズでは、最も重要なパフォーマンス指標の中から、いくつかご紹介していく予定です。 リアルタイムデータを解析し、パフォーマンスの高いWebサイトと低いサイトを比較していきます。 ベストプラクティスを詳しく解説し、デザインや内容に妥協することなくWebサイトを最適化したい方の一助としたいと思います。 (訳注: この記事は、一連の「Webパ

ヘッダでページの細かなチューニングを 2018年4月13日 著者: Kameerath Kareem 翻訳: 小川 純平 この記事は米Catchpoint Systems社のブログ記事 Web Performance 101: HTTP Headersの翻訳です。 Spelldataは、Catchpointの日本代理店です。 この記事は、Catchpoint Systemsの許可を得て、翻訳しています。 Hypertext Transfer Protocol (HTTP) は、Tim Berners-Leeによって、1991年に初めて導入されました。 最初のバージョンであるHTTP/0.9は、クライアント・サーバ間の、データ伝送の助けとなるように設計されました。 このプロトコルは、TCP接続において、リクエスト・レスポンスモデルで動作しますが、長年にわたって改善や機能拡張が行われ、進化して

重いサイト = 遅いサイト 2018年1月22日 著者: Kameerath Kareem 翻訳: 小川 純平 この記事は米Catchpoint Systems社のブログ記事 Web Performance 101: Page Size Optimizationの翻訳です。 Spelldataは、Catchpointの日本代理店です。 この記事は、Catchpointの許可を得て、翻訳しています。 Webパフォーマンスは本当に重要なのでしょうか? 本当に、Webサイトのパフォーマンスを最適化するための時間と労力に対して投資する必要があるのでしょうか? もしこれについて今も議論しているのであれば、真実を得るためのお手伝いを致しましょう。 Webサイトの最適化は直に速度・パフォーマンスを向上させ、それにより直帰率が低下し、コンバージョンが上昇します。 つまり、そうです、Webサイトの最適化は重