Resource Hints API でリソースの投機的取得 | blog.jxck.io
Intro Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。 https://w3c.github.io/resource-hints/ 主に以下がある。 dns-prefetch preconnect prefetch prerender 今回は本サイトでこれを適用した話。 投機的なリソース取得 例えば、ログインページの次には、そのサービスのメインページに遷移する頻度が高い。 そして、メインページでは、以下のような追加のリソースが必要になるだろう。 追加の JS 追加の CSS 追加の Image 追加の API アクセス それぞれを DNS 解決 -> TCP 接続 -> リソースのフェッチ、と繰り返していくと、イニシャル表示は必然的に時間がかかる。 ところが、この遷移に
Resource Hintsでリソースを事前取得しよう！ - Qiita
Resource Hintsとは？ 下記4つのAPIから構成される。IEについては10以降にはなるが、大体のブラウザでサポートされている。 - DNS-Prefetch - Preconnect - Prefetch - Prerender 詳しくはResource Hints参照。 DNS-Prefetch ソーシャルボタンの設置やCDNの利用など、外部サイトからリソースを読み込む場合、「DNSルックアップ（ドメインをIPアドレスに変換すること）」が複数発生します。下記のように指定することで、あらかじめドメインの名前解決を行うことが可能です。 (function(document) { var servers = [ /* evernote */ "static.evernote.com" /* pocket */ ,"d7x5nblzs94me.cloudfront.net" ,"wi
AdSenseの表示を高速化するために「DNS Prefetch」であらかじめ先読みする - QWERTY.WORK
きっかけはうっかりテーマを初期化 ブログのデザインをそろそろ変えようかな～とWordpress感覚で試しにMovableTypeのテンプレートをテーマを変更したら、以前のテンプレートがすべて初期化されてしまいました...。 それまではCloudFlare（CDN）と組み合わせてGTmetrixやPageSpeed Insightsの計測でページの表示が1～2秒台でした。 以前のテーマに戻してもコツコツ構築してきた高速化さるための設定を加えたテンプレートがすべて消えしました...。Wordpressの感覚でテーマの雰囲気だけ見たかっただけなのに完全に初期化されてしまいました。バックアップもしていなかったのでショックです。MovableTypeの場合は管理画面の［ツール］-［テーマのエクスポート］からバックアップをとっておかないといけなかったみたいです...。 後戻りもできないので初期化ついで
Pingdomスピードテストツールの解説
今回は、人気のあるウェブサイトスピードテストツールPingdomのデータの理解かつより改善した利用について説明します。PingdomはWordPressウェブサイトの滝分析という分析を行うのに便利です。これにより、性能問題が診断しやすくなり、誤診断することがなくなります。 しかし、WordPressユーザーがPingdomスピードテストツールのデータを間違って解釈し、ウェブサイトを以前よりも悪化したコンフィギュレーションに設定することも少なくありません。このようなツールはあくまでもガイドとして使用すべきものであり、100％正確であるとは限りません。ポイントは、すべてのテストで同じツールを使用することです。 Pingdomは、アップタイム監視、ページ速度の監視、トランザクションの監視、サーバーの監視、訪問者のインサイト（RUM）などを提供するスウェーデンを拠点とする会社です（現在SolarW
TTFBを減らし、WordPressのページ読み込み時間を改善する方法について
サーバー初期応答時間（TTFB）を減らし、サイト読み込み時間を改善する方法 サイトの読み込み速度を上げるとなると、普通は、フロントエンドのパフォーマンス改善や最適化に着手するもの。 しかし、ウェブサイト読み込みの始点であるサーバーもお忘れ無く。 今回は、サーバー初期応答時間（TTFB）の影響と、それを減らす方法についてご説明します。TTFBは見過ごされがちなパフォーマンス指標。だからこそ、サイトのスピードテストの際には意識して目を向けましょう。 TTFBとは TTFBは重要なのか TTFBの測定方法 サイトのTTFBを低減する4つの方法 TTFBとは TTFBとは「最初の1バイトを受信するまでの時間」（Time To First Byte）を意味します。TTFBはブラウザがサーバーからのデータの最初の1バイトを受け取るまでにかかる時間のことです。このデータを受け取るまでに時間がかかるほど、
はてなブックマーク - WebPagetestに関するyterazonoのブックマーク
サーバー初期応答時間（TTFB）を減らし、サイト読み込み時間を改善する方法 サイトの読み込み速度を上げるとなると、普通は、フロントエンドのパフォーマンス改善や最適化に着手するもの。 しかし、ウェブサイト読み込みの始点であるサーバーもお忘れ無く。 今回は、サーバー初期応答時間（TTFB）の影響と、それを減らす方法についてご説明します。TTFBは見過ごされがちなパフォーマンス指標。だからこそ、サイトのスピードテストの際には意識して目を向けましょう。 TTFBとは TTFBは重要なのか TTFBの測定方法 サイトのTTFBを低減する4つの方法 TTFBとは TTFBとは「最初の1バイトを受信するまでの時間」（Time To First Byte）を意味します。TTFBはブラウザがサーバーからのデータの最初の1バイトを受け取るまでにかかる時間のことです。このデータを受け取るまでに時間がかかるほど、
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
Webページの高速化/最適化まとめ - Qiita
おはこんばんちは、渋谷でお掃除してる人です。 はじめに 自社サービス、ランディングページ、企業ホームページのようなWebサイト（Webページ）において何が一番大切かと聞かれれば、その答えは表示速度です。 ええ、仰りたいことは大いにわかります。もちろんコンテンツも大事です。 ですが、どれだけコンテンツが良くて魅力的な商品だったとしても、表示されなければ意味がありません。 人間という生き物は、Webページが表示されるまでたったの2秒しか待てません。 ウルトラマンでさえ3分間も待てるこのご時世に、たったの2秒です。 その2秒によって、汗水流して作りあげたみなさんのコンテンツが人目につくこともなく、消えていくのです。 というわけで Webページを高速化する上で大切なことをちょっとだけ紹介します。 この記事を読み終わる頃には、ちょっとだけ高速化に詳しくなって、ちょっとだけPageSpeed Insi
asoview!のWebパフォーマンス改善の取り組みについて - asoview! Tech Blog
こんにちは。アソビュー株式会社でフロントエンドのテックリードをしている井上です。 先週会社の同僚と行ったボルダリングでダメージを受けた手にむち打ち、今日も狩りに出るためコントローラーを握りしめる日々です。 今回Webアプリケーションの表示速度高速化について書きたいと思います。 最近は特に日経電子版やdev.toなどの先端事例が話題になったり、SEO観点での重要性の高まりやPWA、AMPなど高速化にも関連する新しい技術や手法などWebサイトのパフォーマンスは注目度が高いトピックだと思います。 弊社でもUXやSEOの重要な要素として表示速度については目標値を設けて取り組んで行こうとしています。 直近数ヶ月でもasoview!のサイトを対象にいくつか取り組みをしたのでその内容について軽く触れられればと思います。 取り組む前の状況 私は昨年の11月にジョインしたのですが、弊社のビジネスの中心となっ
webpagetest.orgを利用したWEBページの表示速度測定とチューニング - Qiita
WEBページの表示速度は、ブラウザに備え付けのデバッグツールを使えば十分測定できるものの、かゆいところに手が届かない部分も多い。webpagetest.orgという、WEBページの表示速度を測定するためのサービスがあるが、このツールには非常に多くの機能があり、うまく使いこなせばブラウザのデバッグツールよりも効率よくキメ細やかな測定ができる。 この資料ではwebpagetest.orgの使い方や、表示速度をチューニングする際のポイントについて説明する。 webpagetest.orgを利用するメリット 筆者は普段Chromeを利用している。webpagetest.orgで計測できる指標としては、Chromeのdevtoolsで見れるものとほぼ同等だが、下記のようなメリットがある。 計測結果をパーマリンクで共有できる Chrome devtoolsよりもネットワークやCPUのスロットリングが実
WebPagetest - Website Performance and Optimization Test
Test. Experiment. Improve! WebPageTest. The gold standard in web performance testing. Lightning-Fast Web Performance Online CourseLearn to analyze performance, fix issues, and deliver fast websites from the start. Free! Start Course Now >> Introducing Carbon Control Experimental New in WebPageTest! Measure your site's carbon footprint and run No-Code Experiments to find ways to improve.
超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)
使いやすさは「速さ」から始まる 本書では「超速！」と銘を打って、Webページの速度を改善するためのノウハウを紹介します。 Webページの速度は、みなさんのビジネスにおけるWebの価値を大きく左右します。 Webページを構成する要素としてネットワーク処理、レンダリング処理、スクリプト処理の3つを取り上げ、これらを詳しく説明することで高速化に関する知識を網羅します。 各テーマについては、基礎知識の章と、実践的な問題の調査と改善の章の2本立てで解説を進めます。 これにより、調査によって個別の問題に分解して把握する力と、それに対する適切な改善を実行する力を身に付けられます。 目次 第1章 Webページの速度 Webページの速度とは何か Webページの速度の重要性 Webフロントエンド高速化のポイント Webフロントエンド高速化の取り組み方 Webページの調査に必要なブラウザの開発者ツール Webペ
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
Dockerは速いのか？Dockerのパフォーマンスについて重要なことは何か？ - ゆううきブログ
だいぶ前からDocker（Linuxコンテナ）のパフォーマンスについて、速いことは速いだろうけどどの程度速いのか、もし遅いことがあるなら何がパフォーマンスにとって重要なのか（AUFSが遅いとかそういうの）が気になっていたので、今回は で紹介されていた Docker のパフォーマンス検証に関する IBM の Research Report を読んだ。Report の内容をベースに、Docker のパフォーマンスの勘所などをまとめてみた。 Report のタイトルは An Updated Performance Comparison of Virtual Machines and Linux Containers 。 GitHub にベンチマークコードと実験データが置いてあってちゃんとしてる。 前提 まず、VMとコンテナの歴史を振り返るのに知らぬはエンジニアの恥。今さら聞けない【コンテナ/仮想
Webサイト高速化に必要なHTTPの仕組みを理解する （1/4）：CodeZine
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。これから身につけるWebサイト高速化テクニック第2回目です。 第1回の「Webサイト高速化対策の現状」は読んでいただけましたか？「Webサイト高速化対策の現状」では高速化対策がなぜ必要なのかを紹介しているので、この回を読む前にぜひ読んでおいてください。 今回は、Webサイトの高速化に大きく関係するHTTPについて復習したいと思います。高速化対策と言ってもWebサイトが遅延する原因はさまざまです。 読み込むファイル数が多いことやサーバー側の処理に時間がかかっている、またはエンドユーザーが利用しているネットワークが原因かもしれません。 ところが原因を探っていくと、Webサイトが遅くなってしまう要因の多くにHTTPが関係しています。 実際の高速化手法も大事ですが、事前知識としてHTTPについて知っておきましょう。 対象読
jQueryライブラリを毎回読み込むムダをなくすには？ Googleの提案
Googleの「mod_pagespeed」にキャッシュ活用支援の新機能が搭載された。初訪問のサイトでも読み込みが高速化する仕掛けだ。 Webページ表示の高速化支援ツール「mod_pagespeed」の最新バージョンに導入された新機能について、米Googleが12月19日のブログで説明している。mod_pagespeedはバージョン1.2.24.1のβ版が12月14日にリリースされた段階。初めて閲覧するサイトでブラウザキャッシュの活用を支援するフィルタなどが加わっている。 バージョン1.2で追加された新機能のうち、「canonicalize_javascript_libraries」は、多くのサイトが使っている主要JavaScriptライブラリを、JavaScriptライブラリホスティングサービスでホスティングされているライブラリと入れ替えるフィルタ。 jQueryやjQuery UIなど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DNS Speed Test from multiple locations at SolveDNS
Performance Test - Check URL Speed From Different Global Locations | KeyCDN Tools
PageSpeed Insights
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス