「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN（Content Delivery Network）を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も（ネットワーク的に）近いサーバにキャッ
Making dev.to insanely fast
It makes me smile when someone raves about how fast this website loads, because that's no accident. We put a lot of effort into making it so. It is the sort of thing that usually goes unnoticed, but when your readers are developers, there's a better chance they notice and appreciate it. I have written about this in the past, but it's worth re-examining because these ideas are always evolving. From
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
テクニックではなく、今、本気で取り組むべきWebパフォーマンス
民法債権法改正が国会で成立し、品質保証が請負やサービスなど、全てに適用されるようになります。私達が、普段、商品や食品に対して品質保証を求めるように、Webサイト制作や、Webサービスにも品質保証が要求されるのです。「自分達を損害賠償から守るために品質保証をしなくては」というよりも、「自分達の仕事の価値、提供するサービスの価値を高め、差別化するための品質保証」として積極的に活用しませんか？今まで、「テクニック」として語られる事が多かった「Webパフォーマンス」ですが、「品質管理」として本気で取り組みませんか？ このセッションでは、Webサイト制作や、Webサービスの現場で、DevOpsの三本柱の一つである「品質保証」を実行していくために必要な、Webパフォーマンス管理・改善に必要な基礎知識を解説します。 HTML5 Conference 講演資料
Google、JPEGを35％小さくできるエンコーダー「Guetzli」をオープンソースで公開
Web高速化を目指すGoogleが、JPEGファイルを従来の方法より35％小さくできるというエンコーダー「Guetzli」をオープンソースで公開した。エンコードに時間とメモリがかかるが、完成したファイルは軽い上に画質も従来より高いとしている。 米Googleは3月16日（現地時間）、従来よりJPEGサイズを約35％小さくできる新エンコーダー「Guetzli」（グエツリ、ドイツ語で「ビスケット」のこと）をオープンソースで公開したと発表した。GitHubで公開されている。 Guetzliで画像をJPEGにすることで、画像を多数使うWebサイトの読み込みを高速化できるとしている。手法的には同社が2013年に公開した汎用データ圧縮ライブラリ「Zopfli」と近く、新しい画像フォーマットを必要としない。また、「WebP」や「RAISR」とは異なり、圧縮を高めるためにクライアント側を変更する必要がない
Webサイトの表示速度高速化の考え方| PerfData
確実な高速化に必要な基本原則を知る 2017年3月７日 著者: 竹洞 陽一郎 「Webパフォーマンス改善」「Webサイト表示速度高速化」と検索すれば、色々な記事が見つかります。 その中の幾つかを、実際に試された事がある方もいらっしゃるでしょう。 「やってみたけど、速くならない」 高速化できなかった場合、その原因を知りたいと思いませんか？ 今回は、高速化を確実に成功させるための、高速化の考え方、勘所を解説します。 高速化とは計算量を減らす事 Webサイトの高速化手法は、色々なものが紹介されています。 その具体的な方法は、一旦脇に置いて、抽象化して考えてみましょう。 Webサイトの高速化とは、本質的には、計算量を減らす事なのです。 私達がWebサイトをPCやスマートフォン、タブレットなどで閲覧するとき、それらの端末のCPUは計算をしています。 端末が動作するというのは、「何かを計算している」と
日本の新聞サイトから学ぶパフォーマンスの現在
パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez） 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com） 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44% 低下した（Telegraph） サイトパフォーマンスを向上することで、ユーザープロフィールのインプレッションとスクロール率が上がった（Instagram） ショッピングサイトではパフォーマンスが 2 秒改善することで、離脱率が半分にまで減った（Radware） SEO にも
SVGをdata URI schemeに変換するとき文字化けしないように必要なこと - 聴く耳を持たない(片方しか)
現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。 例えば、AppleのサイトではロゴにSVGを使っています。 https://www.apple.com/jp/iphone/ そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。 data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。 こうした使われ方も多いことから、data URI schemeを簡単に作成でき
身につけておきたいWebサイト高速化テクニック #5｜リクエスト数削減テクニック01：インラインイメージ編 | DevelopersIO
5，インラインイメージのメリット・デメリットと注意点 5.1，メリット インラインイメージを使うことで画像自体のHTTPリクエストが発生しません。 例えばファイルサイズの小さな10個の画像を読み込んでいるとします。それらすべてをインラインイメージ化することで10回のHTTPリクエストを削減できます。 データサイズが37％増加するというデメリットはありますが変換前のデータが数MBでもない限りHTTPリクエストが減らせることの方が有益です。 5.2，デメリット IEの古いバージョンでは使えない Base64エンコードによりデータサイズが約37％増加する HTMLやCSSに直接埋め込むため画像を変える度に差し替えが必要（ツールで改善可能） data URI schemeで埋め込まれたデータはキャッシュされない 同じデータを複数箇所に表示したい場合、それぞれの場所に埋め込む必要があるためインライン
世界で通用するエンジニアになるための高度な技術記事（英語） - Qiita
英語サイトでは、日本語のサイトでは絶対に手に入らないレベルの記事がわんさか読めます。今日はCodeProjectよりシステム構築をする上で知っておくべき深い知識を解説した記事を3行要約と共にご紹介します。 C#と.NETの記事 C#や.NETのかなりディープな記事たちです。日本語ではあまり見かけない深い部分まで知れます。 ■高パフォーマンスなクラスのデザイン方法 Performance Considerations of Class Design and General Coding in .NET - CodeProject ・クラスvs値型のメモリ使用の詳細 ・値型のGetHashCodeとEqualメソッドをオーバーライドする ・シールドクラスによりVirtualメソッドを避ける ・インターフェースのDispatchについて ・ボクシングを避ける ・for vs foreachはfo
ページ表示速度をPhantomJSで計測してZabbixに記録する - Qiita
Webページの表示速度って大事ですよね。Googleの検索順位にも影響が出るっていうし、なによりユーザが見たいと思った時に、遅くてなかなか見られないというのは単純に機会損失になります。じゃあ表示速度を早くしようとなるわけですが、そこらへんはわりとベストプラクティスみたいなのが語られまくってますね。 ちょっと古いですが僕が昔か書いたWebフロントエンド表示速度、最速化手法まとめみたいなのとか。 で、早くする技工的なものは良いんですが、一番大事なのは計測すること。これですね。普段、どれくらいの表示速度で、揺らぎがあるのかないのか、どこかの時点で遅くなっていないかなどを把握する必要があります。 サイト表示速度の監視 サイトの表示速度を計測してくれるナイスなサービスがいくつかあります。 pingdom newrelic ruxit HAPPY APPS ALERT BOT Status Cake
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
DNSプリフェッチでウェブページの読み込み速度をスピードアップ
[対象: 上級] この記事では、「DNSプリフェッチ」という仕組みを利用してウェブページの表示速度を高速化する方法を解説します。 DNSプリフェッチとは 上級者向けの記事なのでDNSが何かの説明は省きます。 DNSプリフェッチを利用すると、外部ドメイン名（ホスト名）の名前解決（DNSルックアップ）を事前に強制できます。 ユーザー（ブラウザ）がそのドメインにアクセスする前にすでに名前解決が完了しているので、読み込み時間の短縮を図ることができるのです。 DNSの名前解決にかかる時間は平均して200ミリ秒とわずかですが、モバイル回線では無視できる長さではないかもしれません。 またときとして1秒以上かかることもあり、遅延による表示速度の低下の防止に役立てられます。 DNSプリフェッチは、ページの読み込みと同時に実行されまたCPUやネットワークへの負荷が低いため、そのほかの処理を遅らせてしまう心配も
ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得 | ゆっくりと…
zenback の読み込みコードが非同期化され、かつ 平均20%+の速度アップが図られた そうで、ユーザーとしては嬉しい限りです。 zenback に限らずソーシャルメディアの導入は、必然的に外部サービスを多用することになります。どのサービスも、スクリプトや画像、トラッキング用コードなどのリソースを、その特性に合わせて 2〜4 程度のホスト／ドメインに分散させているのが普通です。 こういった分散化は並列に読み込みめるリソース数を増やし、クッキーのあり／なしを区別できるので高速化に寄与します。が、利用するサービス数が多くなると、いわゆる「DNS ルックアップ」にかかる時間が無視できなくなり、さすがにデメリットの方が目立ってきます。 例えば本サイトの場合、最終的に25以上の異なるホスト／ドメインから 有象無象 のリソースを読み込んでいるのですが、「DNS ルックアップ」の合計だけで1秒を超える
AjaxなページもPhantomJS, CasperJS, SpookyJSでいい感じにクローリングできるようにしてSEOする
ajaxなページもクローラーに読ませたいですよね。 そこでPhantomJS, CasperJS, SpookyJSです。 簡単に説明するとこんな感じ casperJSをNodejsから使えるようにするやつ こういうことをしたい クローラーがアクセスしてきた時だけ、アクセスしたURLをSpookyJSサーバーに投げて、SpookyJSがそのURLにアクセスし、DOMを取得してからクローラーに返すってことをしたらよさそうです。 SpookyJSをインスコ SpookyJSはもちろんphantomJSとcasperJSに依存してるので、まずはこの２つをグローバルに入れる必要があります。 npm install phantomjs -g npm install casperjs -g 必ず -g オプション！ 次にプロジェクトのディレクトリで npm install spooky これしたら、O
SlimerJS | Pen
SlimerJSをさわってみたメモ。 Windows、Linuxも対応しているみたいですが、普段使ってるMacOSでやりました。 SlimerJSってなに？ PhantomJSやCasperJSのようなヘッドレス・ブラウザのように、スクリプトからFirefox、Xulrunnerを操作できます。(ヘッドレスとしても使えるみたいです。) Laurent Jouanneauさんという方が開発したそうです。(Githubはこちら) 完全ではないですが、PhantomJSと同じようなコードで動かすことができます。PhantomJSはWebkitベースですが、SlimerJSはそのGecko版みたいな感じっぽいですね。 ファントム→キャスパーときて、スライムという、あれな流れのような感じでしょうかねー。。。 インストール まずは、こちらからダウンロード。 Macの場合、なかにあるslimerjs
WebDriver and BrowserMob Proxy
The execution of web pages generally involves three tasks: fetching resources, page layout and rendering, and JavaScript execution. Apart from these, sometimes websites need to track user behaviors so they need many third party integrations and this may affect page load time. Also, we can have different problems like javascript, instability, etc. We can filter all these things using BroserMob Prox
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページを1秒以内に表示するための最新技術、そしてSEOの未来（テクニカルSEOの復権 最終回） | Moz - SEOとインバウンドマーケティングの実践情報
Selenium Webdriver Java - Generate HAR after Click
Post a bounty on ariya/phantomjs!