専門家ブログ

私達の知見を共有します

CSSファイルの読込の高速化

2023年5月8日

前回の記事では、Preload Scannerについて説明しました。
Preload Scannerは、Shallow Parsingを用いて、読み込むべきファイルを検出し、バックグラウンドでファイルの読み込みを行います。
このプロセスには、CSSも含まれています。
しかし、Preload Scannerの恩恵を阻む機能を使うと読込が遅延してしまうのです。

Webブラウザのもう一つのパーサ: Preload Scanner

2023年5月1日

前回の記事では、HTMLのDOMツリー構築について解説しました。
DOMツリー構築では、一気呵成に、1行目から最後の行までパースできるのがベストです。
しかし、往々にして、途中の行で止まってしまうのをプロファイリングデータで見かけたことはありませんか？
今回は、そのようなDOMツリー構築を邪魔する処理となる、CSS、JavaScript、画像などの読込をバックグラウンド処理にしてくれる「Preload Scanner」について解説します。

Webパフォーマンスの時間計算量を左右するHTMLのDOMツリー

2023年4月24日

この記事では、DOMツリーがどのように構築され、その複雑度がWebパフォーマンスにどのような影響を及ぼすかを説明します。
また、効果的なDOMツリーの確認方法や、DOMツリーをシンプルにすることで得られる恩恵についても触れていきます。
Web開発者は、これらの知識を活用して、より高速で効率的なWebページを提供することができるでしょう。

Webパフォーマンスチューニングで不可欠なTOC(制約条件の理論)を学ぼう

2023年4月17日

Webパフォーマンスチューニングは、ユーザー体験やビジネス成果に直接影響する重要な要素です。
この記事では、Webパフォーマンスチューニングをデジタルサプライチェーンマネジメントと捉え、処理のリードタイムと歩留まりを意識したパフォーマンスチューニングが大事であるという観点から、欠かせないTOC（Theory of Constraints: 制約理論）について解説します。

HTML文書構造から学ぶフロントエンドのパフォーマンスチューニング

2023年4月14日

HTMLの構造や役割を理解することは、フロントエンドのパフォーマンスチューニングに大いに役立ちます。
この考え方を適用することで、効率的で高速なフロントエンド周りのWebサイトやWebアプリケーションの実現が可能です。

Chrome Developer Toolsでパフォーマンスを最適化

2023年4月3日

Webパフォーマンスチューニングは、WebアプリケーションやWebサイトのパフォーマンスを向上させるために実施される最適化手法の一連です。
効果的なパフォーマンスチューニングを実現するには、正確なプロファイリング情報が欠かせません。
フロントエンドの品質管理では、プロファイリングを利用して時間消費別のパレート図を作成し、最も時間を消費している部分から改善を開始します。

Webサイトの遅延は「人気の証拠」ではありません

2022年3月30日

「タイパ」(タイムパフォーマンス)という言葉をご存じですか？
私は、2022年2月12日の日経新聞「令和なコトバ『タイパ』 Z世代、お金より時間を節約」という記事で知りました。
そう言われてみると、確かに、時短テクニックを紹介するTV番組や雑誌、動画などが大人気です。

一般的に、タイパが良い高速なWebサイトが人気がありますが、世の中には、そのように考えない人もいるようです。

「99.9-刑事専門弁護士-THE MOVIE」とパフォーマンスチューニングの共通点

2022年1月5日

先日、家族で映画館に行き、「99.9-刑事専門弁護士-THE MOVIE」を観てきました。
ドラマの「99.9-刑事専門弁護士」のシーズン1、シーズン2も観てましたが、とても面白いし、深いです。
まだご覧になった事が無ければ、面白いので、是非Paraviなどで視聴してみてください。

ファイルサイズ削減による高速化の効果

2020年6月29日

よくWebサイトの高速化で語られるのは、HTML、CSS、JavaScript、画像のファイルサイズの削減です。
例えば、画像を最適化する、画質を落とす、Gzip圧縮するなどの方法で、ファイルサイズを減らす事が有効という主張をインターネット上で見ます。
実際のところ、ファイルサイズを小さくすることで、Webパフォーマンスの高速化にどの程度寄与するでしょうか?

計測サービスで異なる計算能力

2020年3月11日

Webページの表示速度を計測する時、皆さんは、何を使っていますか?
簡単にボトルネック診断をしたい時はGoogle PageSpeed Insights、WebPage TestやGTmetrixでしょうか？
各種計測サービスにおける、計算能力は全て同じでしょうか？
計算速度は、計算能力に左右されます。
その計測機器の性能が異なると、同じ計算をしても、経過する時間が異なります。
それぞれの計測サービスの計算能力を知っておかないと、数値を見て判断するときに、誤った解釈をしてしまいます。

decoding="async" VS loading="lazy"

2019年12月19日

Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。
その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。
画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の詳細と、その違いを解説します。

SEOで重要なクローリングのためのWebパフォーマンス

2019年4月17日

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

AMP(Accelerated Mobile Pages)の表示速度を検証する

2019年3月25日

Googleが推奨しているAMP (Accelerated Mobile Pages)をWebパフォーマンス(表示速度)の高速化として採用している方も多いでしょう。
実際に、AMPはどのくらいの表示速度なのでしょうか？
AMPのページを計測して、分析してみました。

民法債権法改正に伴うWebサイト制作・開発の契約のポイント

2017年6月27日

今回は、Spelldataの顧問弁護士で、横浜ステーション法律事務所の代表弁護士である紺野晃男先生に、今回の民法改正がWebサイトの制作の請負や、Webサービス提供に関してどのような影響があるのか、専門家の立場から解説の記事を書いて頂きました。

Speed Indexとは何か?

2017年5月5日

弊社で販売しているWebパフォーマンスの計測・監視サービスCatchpointの4月のアップデートに、Speed Indexの対応が入りました。
Speed Indexは、Googleが開発や計測サーバの展開を支援しているオープンソースのWebサイト計測Webpage Testに、2012年4月に追加された指標値です。
Webページがどれだけ迅速に表示されて、可視化されたかを表すもので、数値が小さい程、良い値となります。

表示速度の遅延で歪むWebアクセス解析

2017年3月30日

Google Analytics、Adobe Analyticsなどを使って、Webサイトのアクセス解析をする重要性は、今や広く認知されています。
ウェブ解析士のような民間資格も広く認知されており、20,000名を超える人が受講しているそうです。
ページビュー、滞在時間、直帰率、コンバージョン率など、様々な指標値を駆使してWebサイトのコンテンツの改善を行います。
しかし、そのデータは、本当に信頼できるデータなのでしょうか？
因果関係を狭い範囲で捉えてしまうと、データは、人を思わぬ間違いへと導いてしまうのです。

時間帯と年齢で変わるWebの表示速度感覚

2017年3月21日

Webサイトの表示速度の重要性が、日本でも、徐々に認知されてきています。
世界基準では、「表示開始が0.5秒、表示完了が2秒以内」が目標値です。
この目標値を「速すぎる」と思われますか？
実は、時間帯や年齢によって、時間感覚は異なることが、科学調査から分かってきているのです。

量子コンピュータが拓く世界

2017年3月15日

2017年3月13日に開催された、株式会社KADOKAWAが運営するMITテクノロジーレビューのMITTR Emerging Technology Conference #2に参加してきました。
今回のテーマは、「量子コンピューターは社会をどこまで変えるのか」。
カナダの量子コンピュータ会社D-Waveが採用した、「量子アニーリング方式（量子焼きなまし法）」を提唱された東京工業大学教授の西森秀稔先生が講演されました。

Webサイトの表示速度高速化の考え方

2017年3月7日

「Webパフォーマンス改善」「Webサイト表示速度高速化」と検索すれば、色々な記事が見つかります。
その中の幾つかを、実際に試された事がある方もいらっしゃるでしょう。
「やってみたけど、速くならない」
高速化できなかった場合、その原因を知りたいと思いませんか？
今回は、高速化を確実に成功させるための、高速化の考え方、勘所を解説します。

新しいモバイルサイト表示速度の業界指標

2017年3月1日

2017年2月、Googleのthink with Googleというデータ分析に基づく知見を公開しているサイトに「Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed」(モバイルページの速度の新しい業界指標にどのくらいあなたは近づいているのかを知ろう)という記事が公開されました。

Instantインスタント GratificationグラティフィケーションとWebサイト表示速度

2016年12月8日

You know, I find I'm becoming more and more impatient these days. Waiting a couple of extra seconds for a page to load when I'm surfing the Web seems like an eternity.

(ところで、近ごろ私はますますせっかちになっているようです。ネットサーフィンをしている時に、ページを読み込むまで待つ2、3秒という余計な時間が、果てしなく長く感じられるのです。)

Redirect	?
App cache	?
DNS lookup	?
TCP Connection	?
First Byte Download	?
DOMContentLoaded	?
Load	?