日経電子版を支える広告技術 — HACK The Nikkei
本稿では、現在の日経電子版モバイル Web（以下、日経電子版）における広告掲示の技術について解説する。 広告とサイトパフォーマンスの関係 dev.to に代表されるような「高速」と言われる Web サイトは、CDN や ServiceWorker などを駆使して表示に関して適切なチューニングを行っており、日経電子版もほぼ同じ思想の元チューニングを行っているが、一点大きな違いを挙げるとするならば、広告表示の有無が挙げられる。 現在の日経電子版では 7 タイプの広告を表示しており、うち 4 タイプは外部 DSP からの配信を行っている。 その他にも様々なサイトトラッキングのサードパーティスクリプトを導入しているが、ご存知の通りこれらはメインとして打ち出したいコンテンツとはほぼ関連性はなく、パフォーマンス観点から見れば劣化させる要因でしかない。広告が無ければもっと速く表示できるのに…と思ったこと
CSS Performance Testing Tool — Maker's Aid
Paste your CSS stylesheet in the text area and hit the "Test My CSS" button. The tool will conduct a series of client-side tests using JavaScript and update the "Metrics" and "Tests" tables with the results below. Test My CSS Metrics CSS stylesheet size (in kilobytes) Calculates the size (in kilobytes) of the CSS stylesheet. Indicator Value
あなたのサイトのjpeg画像は過剰品質である。多分。 - Qiita
はじめに Webサイト掲載用のjpeg画像の品質設定を絞り込むためのツールを作りました。 imagemin-parameter-report また、ツールの動作イメージを掴むためにデモページを用意しました。とりあえず触ってみてください。 Demoページ この記事は、このツールとその使い方、そしてチェックシートを利用して、WEBサイト構築の初期段階でjpegの品質設定を絞り込む手法を共有するためのものです。 なお、このリポートツールで扱うのはあくまでWebサイトに掲載する一般的な画像です。また、作業の最終目的はサイトの高速化です。 jpegの品質問題 画像ファイルはWebサイトの総転送量と表示時間に非常に大きな影響を与えます。しかし、jpegの品質設定を詰める作業は以下の理由で難しくなります。 人手が足りない jpegの品質設定はプロジェクトのなるべく早いうちに決めるべきです。少なくともプロ
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
Webpagetestでサイトのパフォーマンスを定期計測する - アクトインディ開発者ブログ
morishitaです。 今回は社内でプライベートに運用している Webpagetest について紹介します。 日経新聞やDev.toなど爆速を実現している Web サイトが度々話題となります。 それは Web サイトにとってページの表示速度が非常に重要で関心が高いからだと思います。 サーバサイドの速度も重要ですが、近年、クライアントサイドの描画スピードのチューニングにも注目が集まっています。 残念ながら爆速といえる状態は実現できてはいませんが、 いこーよやいこレポでもページの表示速度は重要だと考えていて絶えず改善を続けています。 速度改善は計測から始まります。 まず現状を計測してボトルネックを把握し、改善施策を実施してまた計測、そして前後を比較する。 それにより施策の効果を測ることができます。 その計測、皆さんどうしているでしょうか？ 手っ取り早いツールとしては Chrome のデベロッ
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
顧客体験を向上させるECサイトの配信品質
表示速度は、顧客体験やデジタルブランディングの向上で重要な鍵を握っています。表示速度は、インターネットの状況や、サードパーティコンテンツのパフォーマンスに多大な影響を受けるため、自社サーバだけを監視していると、思わぬ遅延に巻き込まれて、自社サイトが遅延します。1ページあたり表示完了までに5秒以上経過してしまうサイト、購買行動を完了させるのに1分以上必要とするサイトは、アクセス数に比例して、機会損失を生じさせています。品質の悪いECサイトに投資することは、「穴の空いたバケツに水を注ぐ」ようなものです。様々な投資や施策、戦略が活きる、品質の高いECサイト構築・運営の重要性を解説しました。 「ネット＆スマートフォンコマース2017」講演資料
テクニックではなく、今、本気で取り組むべきWebパフォーマンス
民法債権法改正が国会で成立し、品質保証が請負やサービスなど、全てに適用されるようになります。私達が、普段、商品や食品に対して品質保証を求めるように、Webサイト制作や、Webサービスにも品質保証が要求されるのです。「自分達を損害賠償から守るために品質保証をしなくては」というよりも、「自分達の仕事の価値、提供するサービスの価値を高め、差別化するための品質保証」として積極的に活用しませんか？今まで、「テクニック」として語られる事が多かった「Webパフォーマンス」ですが、「品質管理」として本気で取り組みませんか？ このセッションでは、Webサイト制作や、Webサービスの現場で、DevOpsの三本柱の一つである「品質保証」を実行していくために必要な、Webパフォーマンス管理・改善に必要な基礎知識を解説します。 HTML5 Conference 講演資料
Lighthouseでwebサイトのパフォーマンスを計測する｜Goodpatch Blog グッドパッチブログ
Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。 こんにちは、スープです。 Prottのフロントエンドエンジニアをしています。 この記事ではGoogleが開発しているLighthouseというツールを紹介します。 Lighthouseとは webサイトのパフォーマンスやアクセシビリティ、WPA等のメトリクス測定ができるツールです。 GithubのREADMEにはこうありました。 Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Github：https://github.com/G
Webサイトパフォーマンスの振り返り 2016 - Webパフォーマンスについて
やっと表示速度の認知に火がつき始めた 2016年も、残り一ヶ月となりまして、WebサイトパフォーマンスのAdventカレンダーがスタートしましたので、今年のWebサイトパフォーマンスの動向を振り返ってみます。 今年の1月から3月、日本のECサイト売上上位150社に営業をかけて、色々とお話したのですが、ECサイト関係は、まだまだ表示速度の重要性を認知していない事が分かりました。 4社が興味を示してくれましたが、「配信品質管理」という認識まではやっぱり無かったです。 「日本はこのまま品質管理としてのWebサイトパフォーマンスが普及せずに今年も一年が過ぎてしまうのか？」と危機感を抱き、今年は、以下のカンファレンス等で講演の機会を頂きました。 関西フロントエンドUG主催 frontend conference 2016 「Webサイトパフォーマンスの基礎知識」 Movable Type Devel
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
60fpsのサイトパフォーマンスを目指す - ワザノバ | wazanova
http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/1 comment | 0 pointsGoogle ChromeチームのPaul Lewisが、ページ読み込み後、つまりユーザが閲覧する際の、UIレスポンス、スクロール、アニメーションなどサイトパフォーマンスについてまとめています。 まずは60fpsのパフォーマンスを達成する。よって、16ms以上かかるフレームは全て問題とみなす。 1. Large invalidations of layout and styles エレメントでのクラスの変更やJavaScript/CSS transition/CSS animationで直接エレメントのスタイルを変更すると、ブラウザはレンダリングツリーの一部もしくは全部を無効にしてしまう。最悪のケースでは、ドキュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
thedaviddias/Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than the others
常時SSL化に役立つアカマイの機能 - Akamai Japan Blog
https://qiita.com/nyarla/items/10f0f3e3c2116417df59