専門家ブログ

私達の知見を共有します

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パフォーマンス入門: HTTPヘッダその2

2018年5月22日

前回の記事では、基本的なHTTPヘッダについて、それらがどのように実装されているかについて、確認しました。
ヘッダはページのパフォーマンスに様々な形で影響しますが、デジタル体験に対して良くも悪くも影響する、3つの要素があります。

Webパフォーマンス入門: HTTPヘッダ

2018年4月13日

Hypertext Transfer Protocol (HTTP) は、Tim Berners-Leeによって、1991年に初めて導入されました。
最初のバージョンであるHTTP/0.9は、クライアント・サーバ間の、データ伝送の助けとなるように設計されました。
このプロトコルは、TCP接続において、リクエスト・レスポンスモデルで動作しますが、長年にわたって改善や機能拡張が行われ、進化してきました。

Webパフォーマンス入門: ページサイズの計測 (全体のダウンロード容量)

2018年4月9日

このシリーズでは、最も重要なパフォーマンス指標の中から、いくつかご紹介していく予定です。
リアルタイムデータを解析し、パフォーマンスの高いWebサイトと低いサイトを比較していきます。
ベストプラクティスを詳しく解説し、デザインや内容に妥協することなくWebサイトを最適化したい方の一助としたいと思います。

Webパフォーマンス入門: ページサイズの最適化

2018年1月22日

Webパフォーマンスは本当に重要なのでしょうか?
本当に、Webサイトのパフォーマンスを最適化するための時間と労力に対して投資する必要があるのでしょうか?
もしこれについて今も議論しているのであれば、真実を得るためのお手伝いを致しましょう。
Webサイトの最適化は直に速度・パフォーマンスを向上させ、それにより直帰率が低下し、コンバージョンが上昇します。
つまり、そうです、Webサイトの最適化は重要で、特にサイトからの収益を上げたいのであれば尚更です。

Webパフォーマンス入門: 画像のチューニングのヒント

2017年12月5日

ビジュアルコンテンツは、モダンなWebサイトにとって、なくてはならないものであり、最もミニマリスト志向のWebサイトデザインですら、完全なエンドユーザ体験のために、シャープで綺麗な画像に頼っています。
スマートフォンからタブレット、ノートPCからデスクトップPCまで、近年はスクリーンサイズが多様になり、高品質な画像を用いて、正しく、あらゆるviewportで表示できるようにすることが重要になりました。
ぼやけていたり、解像度の低かったりする画像では、Webサイトのデザインがみずぼらしく見えてしまい、最終的にはエンドユーザ体験に対してマイナスの影響を与えます。

Webパフォーマンス入門: JavaScriptの最適化

2017年11月27日

JavaScriptは、Webアプリケーションを再定義しました。滑らかなレスポンシブデザインの、動的なWebサイトの時代の到来を告げています。
それは開発者の間で多くの支持を集め、jQueryやAngularJSのような、人気のあるライブラリーやフレームワークは全てJavaScriptで構築されています。
(訳注: Angularの現行バージョンは、正確には主にTypeScriptで構築されています。)
JavaScriptが、現状存在する様々なライブラリーを用いて提供する、無限のデザインの可能性は、Webアプリケーションの開発において欠くことのできないものとなりました。

Webパフォーマンス入門: SSLとWebセキュリティ

2017年10月25日

インターネットは、拡大し続けるデータの倉庫です。そのデータには、公開されているデータと、権限を持った人のみがアクセスできる(少なくともそうなっているべき)、個人的なデータや機密データの両方が含まれます。
ハッカーがこのデータを盗聴・改竄する方法は数多くあり、WorldWide Webはデータの安全性を保証できませんので、あなたがデータが安全に伝送・保存されていることを保証しなければなりません。
ネットショップや銀行サイトの顧客はハッカーの標的になりやすいため、かつてないほどにデータの暗号化が重要となり、サイバー攻撃の第一防御壁としての役割を担うようになっています。

Webパフォーマンス入門: クリティカルレンダリングパス

2017年9月15日

Webサイトの成功は、ユーザのデジタル体験と直に比例します。
テクノロジーの時代においては、色々なことを知っている消費者、競争力のあるターゲットマーケティング、そして速度が重要です。
ユーザはWebサイトが素早く読み込まれることを期待しています。
ユーザが素早くWebページを閲覧できるほど、デジタル体験は良いものになります。

Webパフォーマンス入門: リダイレクト

2017年9月1日

Webサイトはもはや単なるシンプルなHTMLページと静的コンテンツだけのものではありません。
様々な機能を備え、コンテンツは一定間隔で更新される、動的なインターフェースへと変貌したのです。
Webサイト管理者は様々なテクニックを用いて、ユーザが、ページやコンテンツの最新バージョンを見ることができるようにします。
新しい機能がサイトに追加されている時や、Webページのリソースが新しい場所に移動した際には、ユーザにそれらのページにアクセスされたくはないと思います。
アクセスを防ぐには、Webページのリダイレクトを用います。送信されたHTTPリクエストを、サイト内の他の場所にリダイレクトして、ユーザ体験がシームレスになるようにできます。

Webパフォーマンス入門: 動画の最適化

2017年8月29日

Web ページのコンテンツには、リッチテキストの HTML、画像、動画、その他のメディアが混在しています。
マルチメディアコンテンツは全体のページサイズを大きく増加させ、Web ページのパフォーマンスに対して直に影響します。
これは動画を埋め込むことがベストプラクティスに反するということではありません。
どのような種類のページコンテンツであっても、あらゆるパフォーマンス上の問題を克服するように調整できるのです。

Webパフォーマンス入門: APIの監視

2017年8月16日

APIは私達が繋がり続けるために重要な役割を果たしているため、APIの可用性だけではなく、パフォーマンスについてもメンテナンスしていかなければなりません。
APIの監視をする際、API とアプリケーションの統合からパフォーマンスの問題まで、考慮すべき観点がいくつかあるため、一般的な、稼働時間しか報告してくれないような監視の方法は望ましくありません。

民法債権法改正に伴う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	?