SlideShare a Scribd company logo
Jiang Zhu
Advanced Architecture and Research
09/07/2012
Agenda
•
•
•
•
•

Overture: Web Performance As Art And Science
First the Theory…
…Then the Practice
Case Study: Before vs. After
…Making the Web Faster and Smarter

• Slides Credits: Steven Sounders (Google/Stanford), Collin Jackson
(Stanford/CMU), Daniel Austin (eBay)

12/13/2013
State of The ART?

• An Art and a Science
• Very Little Prior Art
• Users Suffer –

• The World Wide Wait isn’t over yet!

• Rapid Change in the Industry
• Browsers
• Devices
• Standards

• The Rest of the World is Catching Up
• Challenges of Global/Local/Mobile/Social Performance
12/13/2013
• PERFORMANCE IS RESPONSE TIME
• PERFORMANCE IS RESPONSE TIME
•

PERFORMANCE IS RESPONSE TIME

• PERFORMANCE IS RESPONSE TIME
• (It’s not latency, it’s not bandwidth, it’s not
queue residence time or queue length or any
such thing.)
12/13/2013

Recommended for you

크롬의고성능네트워킹
크롬의고성능네트워킹크롬의고성능네트워킹
크롬의고성능네트워킹

The document discusses high performance networking in Chrome. It describes how Chrome's architecture has evolved from a single process model to a multi-process model with isolated processes and memory for each tab. This makes the browser more resilient and prevents crashes in one tab from affecting others. It also notes that browser performance involves efficiently fetching resources, laying out pages, and executing JavaScript.

Building a Gateway Server
Building a Gateway ServerBuilding a Gateway Server
Building a Gateway Server

A gateway server is a server through which the computers in a LAN access the Internet. This is usually done through NAT. It should also provide firewall protection for the LAN and it can also serve as a DNS and DHCPD server for the LAN. Some years ago I have been involved in a project for building gateway servers like this, using slackware on old PCs. In this article I will try to explain the things that I have done on this project and how I did them.

21 Www Web Services
21 Www Web Services21 Www Web Services
21 Www Web Services

http://www.google.com/url?sa=t&ct=res&cd=63&url=http%3A%2F%2Fwww.cs.berkeley.edu%2F~istoica%2Fclasses%2Fcs194%2F05%2Fnotes%2F21-WWW-WebServices.ppt&ei=84mzRpOiKYOUhAOD55XQBA&usg=AFQjCNH4pu-GfeVj9k2wxVdJkH7d51XFYg&sig2=8d_IuBPTU9DzWByHZG2b_w

Dimensions of Performance
• Geography/Network location
• Bandwidth/Medium/Transport Type

• Browser/Device Type
• RT Varies by as much as 50% (chrome vs IE)

• Page Composition
• Client-side rendering and execution effects (JS, CSS)
• Network Transport Effects
• # of Connections, CDN Use

12/13/2013
The MPPC Model

“Multiple Parallel Persistent Connections”
Request
Initiation by
User

S

HTTP Request

HTTP Request

t1

This entire cycle, steps 1-4, is repeated once for each external
reference on the page, so for a given page the total time is:
T = S Dt1 + Dt2 + Dt3 + Dt4

n+1
End User

DNS/Network
Resolution

Page
Composition

t2

n+1

Where n is the number of external page requisites.
Browser
Rendering Time

HTTP Response

t4

Payload
Delivery Time

HTTP Response

t3

T1

T2

T3

T4

Connection Time

Server Duration

Transport Time

Render Time

12/13/2013
HTTP Connection Flow
Server

Client

Connection setup (t1)

Client’s perceived
response time

Request (t2)

Response (t3)

Handshake time
Request transmission
time
Estimated server
processing time
Response transmission
time

The more HTTP requests & network roundtrips you require, the slower
your site will be: Images, CSS, JS, DNS lookups, Redirects, #of
packets
12/13/2013
T1 – Making the Connection

1=
12/13/2013

DNS

+

TCP+

SSL

Recommended for you

SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012

The SPDY Protocol is likely going to be the successor of http. This short talk summarizes the most important points and includes a demo on how to migrate a Wordpress blog on httpd.

protocolspdyhttp
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...

Web performance optimisation has been gaining ground and is slowly getting more of its deserved recognition. Now that we’ve learned to recognise this integral part of user experience and are approaching HTTP/2 as our new protocol of choice, some of our existing web performance best practices will turn into the new anti-patterns. Talk slides from FEDay Conference in Guangzhou, China on 19/03/2016.

anti-patternsspeedoptimisation
Featherweight Clients (Athens, 2012)
Featherweight Clients (Athens, 2012)Featherweight Clients (Athens, 2012)
Featherweight Clients (Athens, 2012)

This document outlines a "featherweight stack" for lightweight gCube clients that avoids dependencies on the full gCore stack. It proposes standalone client libraries for discovery, resources, and calling services using just the JDK instead of Axis, Globus, and gCore. Specific topics covered include generating lightweight service stubs, binding resources with JAXB, executing predefined and free-form discovery queries, and providing modular client libraries as an alternative to gCore clients. The goal is to improve client usability, modularity, and independence from obsolete dependencies.

T2 – THE SERVER DURATION
•

Let (

•

U = ( r)[

•

X =U*

•

Navg = ( r [W( r)W+1 (W+1)( r)W+1]

•

… so 2 = Navg/X (The
response time law)

)

r

r

W]

Never mind - it’s a constant!
12/13/2013
T3 – TCP Transport Time
Single Object:
3

= Sz/R+2RTT+

idle

For persistent parallel connections:
3

= (M+1)Si/Ri+[M/kNh]*3 RTTi+

idle

… for 1 base HTML page with M objects, with Si
bits, at bandwidth Ri, k connections per host,
and Nh unique hostnames
12/13/2013
T4 – What the Browser Does

12/13/2013
Bandwidth Efficiency

12/13/2013

Recommended for you

REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014

Loose coupling of systems is key to future development! Why? Because it will allow us to change the "components" as we go along instead of creating monster big systems that are tied together using all sorts of different technologies. Webservices have been a way to obtain this over the last decade. More recently a special variant has become very popular, namely the JSON based REST service. Imagine you could extend your data out to the world outside your Domino environment? - in an easy way....! And imagine those data could easily be incorporated into other systems via standardized interfaces... Could that extend the value of your current systems further? Could this be a way to use new technologies to modernize your users' experience of working with your systems? Come and take away knowledge about how to open your Domino/XWork based systems up to the world outside using JSON based REST services. They are going to be key to future development in Domino/XWork - whether you want to use data in browser solutions (e.g. based on angular.js or ExtJS) or native mobile apps (built in whatever technology is best).

ibm xpages rest service
Windows8
Windows8Windows8
Windows8

O documento descreve como instalar o Windows 8 a partir de um pendrive USB em 3 etapas: 1) gravar a imagem ISO do Windows 8 no pendrive, 2) configurar a BIOS para iniciar o sistema a partir do pendrive, 3) seguir os passos da instalação do Windows 8 na tela.

SVN keywords
SVN keywordsSVN keywords
SVN keywords

Parte teórica do PHP Talks do dia 2/4/2011 onde falei sobre a propriedade svn:keywords do Subversion.

parte terica do php talks do dia 242011 onde falei
Where are the delays?

12/13/2013
Let’s Talk Tools
Site Performance Services
– Gomez
Page Analysis Tools
– Keynote
– YSlow
– WebPagestest.Org
– MS Virtual RoundTrip
• ‘Wholesale’ Testing
Analyzer, HTTPWatch, Many
– Statistical data for many page
Others
views under different conditions
– F12 in your browser
– Operational testing
• ‘Retail’ Testing
– Best for understanding global and
– One Page or App
network effects
– Diagnostic
– Best for functional testing
Commercial Testing Services
• Gomez, AlertSite, and Keynote toolsets are similar in many ways
• Synthetic Test Setup
• Test nodes in large datacenters and/or end user’s machines
• Statistical data about response times

• You can do this for yourself on a smaller scale at WebPageTest.org

12/13/2013
Happy Birthday, Yslow!
• Methodology
–
–
–
–

DOM Crawler and Packet Sniffer
More accurate
Analyzes components
Stats view

• Implements the 14 18 22 105
YSlow Rules
– All browsers except IE
– Mobile bookmarklet
– Best tool for page analysis

Recommended for you

Remover senha do supervisor de conteudo
Remover senha do supervisor de conteudoRemover senha do supervisor de conteudo
Remover senha do supervisor de conteudo

O documento fornece instruções para desativar os controles de conteúdo do Internet Explorer removendo uma chave do registro e definindo uma senha vazia nas configurações de conteúdo.

Criação do pendrive bootável
Criação do pendrive bootávelCriação do pendrive bootável
Criação do pendrive bootável

O documento descreve 4 programas para criar pendrives bootáveis: WinUSB Maker, YUMI, Universal USB Installer e Microsoft Windows 7 USB/DVD Download Tool. Esses programas permitem copiar arquivos necessários para instalação de sistemas operacionais em pendrives USB, permitindo instalá-los sem uso de CDs ou DVDs.

Paulo Santanna Nsi Windows Server 2008 R2 Overview
Paulo Santanna   Nsi   Windows Server 2008 R2 OverviewPaulo Santanna   Nsi   Windows Server 2008 R2 Overview
Paulo Santanna Nsi Windows Server 2008 R2 Overview

O documento apresenta o Windows Server 2008 R2, destacando suas principais áreas de investimento em tecnologia como gerenciamento, virtualização, web e escalabilidade. O Windows Server 2008 R2 oferece melhorias significativas em desempenho, segurança e funcionalidades para datacenters e escritórios remotos.

Performance Golden Rule
•80-90% of the end-user response time is spent on the
frontend.
•Let’s start there.
• Browser cache makes a big difference
• Reading resources from cache depends on:
•
•

freshness (expiration date)
validity (updates since last-modified date)
CASE Study: BEFORE & AFTER
Base Line Web Site

12/13/2013
RULE 1:
MAKE FEWER HTTP REQUESTS
Too Many Requests!
•
•
•
•
•
•
•
*

80-90% of load time is the frontend
the frontend time is dominated by HTTP
HTTP requests growth since 2003: 25 to 50*
each HTTP request has overhead – even with persistent
connections
reducing HTTP requests has the biggest impact
bigger benefit for users with higher latency
parallelization reduces the need for this

http://www.websiteoptimization.com/speed/tweak/average-web-page/

Recommended for you

Processo de Startup do Linux
Processo de Startup do LinuxProcesso de Startup do Linux
Processo de Startup do Linux

O documento descreve as etapas do processo de inicialização do sistema operacional Linux, desde a inicialização da BIOS até a execução do programa init. Ele explica como o bootloader carrega e executa o kernel Linux, que por sua vez inicializa os drivers, monta o sistema de arquivos raiz e inicia os serviços do sistema ao mudar para o runlevel correto.

linuxstatuppalestra
Validando a Segurança de Software
Validando a Segurança de SoftwareValidando a Segurança de Software
Validando a Segurança de Software

A apresentação discute a importância da segurança no desenvolvimento de software. Aborda os requisitos mínimos para um software ser considerado seguro, como revisão de código, análise de risco da arquitetura e pentesting. Também apresenta projetos da OWASP como o Top 10, ASVS e guia de testes que fornecem diretrizes para o desenvolvimento seguro de aplicações.

owaspsoftwaresegurança
Como Formatar o PC via USB by Rodrigo Santos
Como Formatar o PC via USB by Rodrigo SantosComo Formatar o PC via USB by Rodrigo Santos
Como Formatar o PC via USB by Rodrigo Santos

O documento fornece instruções passo-a-passo para instalar o Windows XP Profissional SP2 em Português do Brasil a partir de um pen drive USB, incluindo como baixar os softwares necessários, criar uma unidade virtual com a imagem ISO do Windows, gravar a imagem no pen drive e corrigir possíveis erros durante a instalação.

usbpcnetbook
Too Many Requests!
• But...
• is it possible to reduce HTTP requests without
reducing richness?
• Yes:
•
•
•
•

combine JS, CSS
image maps
CSS sprites
inline images
Combine JS and CSS
• multiple scripts => one script
• multiple stylesheets => one stylesheet
• apache module:
• http://code.google.com/p/modconcat/
• YUI Combo Handler
�� http://yuiblog.com/blog/2008/07/16/combohandler/
Image Maps
<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html">
<area shape="rect" coords="36,0,66,31" href="gifts.html">
<area shape="rect" coords="71,0,101,31" href="cart.html">
<area shape="rect" coords="106,0,136,31"
href="settings.html">
<area shape="rect" coords="141,0,171,31" href="help.html">
</map>

• old school, CSS sprites is preferred
• image maps still useful when x,y coordinates
are useful, for example, in maps
CSS Sprites
• multiple CSS background images => one image
<div style="background-image: url('a_lot_of_sprites.gif');
background-position: -260px -90px; width: 26px; height:
24px;">
</div>

• overall size reduced
• generators:

–
–
–
–

Google Page Speed
http://smush.it/
http://spritegen.website-performance.org/
http://stevesouders.com/examples/sprites.php

Recommended for you

Magdalena
MagdalenaMagdalena
Magdalena

El documento resume las actividades programadas para los días 2, 3, 4 y 5 de marzo como parte de las fiestas de la Magdalena en Castellón. Incluye eventos como la recepción de delegaciones, el anuncio oficial de las fiestas, la inauguración de diferentes ferias gastronómicas, la cabalgata del pregón, la romería a la ermita de la Magdalena, corridas de toros, conciertos, fuegos artificiales y más.

libritomagdalena
Pen drive
Pen drivePen drive
Pen drive

Este documento discute as características e funcionalidades da PEN DRIVE. Aborda sua história desde sua criação em 1998, como funciona armazenando arquivos digitalmente e se conectando via USB a computadores. Também lista vantagens como portabilidade e desvantagens como possível perda devido ao pequeno tamanho.

Formatação, Criação de Partições e a Instalção do Windows XP num PC
Formatação, Criação de Partições e a Instalção do Windows XP num PCFormatação, Criação de Partições e a Instalção do Windows XP num PC
Formatação, Criação de Partições e a Instalção do Windows XP num PC

Este documento descreve o processo de instalação e configuração do Windows em 3 etapas: 1) Iniciar a instalação pressionando Enter no prompt do CD de instalação, 2) Criar e formatar uma partição para a instalação do Windows, 3) Configurar as definições do Windows como idioma, nome do computador e usuário.

inline images (data: URLs)
• embed the content of an HTTP response in
place of a URL
<IMG ALT=”Shuriken"
SRC="data:image/gif;base64,R0lGODl...wAIlEEADs=">

• if embedded in HTML document, probably not
cached => embed in stylesheet instead
• base64 encoding increases total size
• works in IE8 (not IE7 and earlier)
RULE 2: USE A CDN
Rule 2: Use a CDN
• Content Delivery Network
• geographically distributed servers => closer to your
users
• also: backups, storage, caching, absorb spikes

•CDN Providers:
•

Akamai, Mirror Image, Limelight, Savvis, Amazon
CloudFront, Voxel, CDNetworks

•Dynamic content: rapidly changing or per-user
• CDN your static content before dynamic
CDN: A reverse proxy
name server
198.87.82.45

ISP's DNS Resolver
198.87.82.45
198.87.82.45

User

Edge/Fog Servers

CDN

Developer

Origin Server(s)

Recommended for you

Instalação e configuração do windows server 2003
Instalação e configuração do windows server 2003Instalação e configuração do windows server 2003
Instalação e configuração do windows server 2003

1) O documento discute a história do desenvolvimento do Windows NT pela Microsoft desde 1988. 2) Explica os tipos de servidores em uma rede Windows, incluindo controladores de domínio, membros do domínio e grupos de trabalho. 3) Detalha os requisitos mínimos, recomendados e máximos para a instalação do Windows Server 2003.

Windows x Linux - O que preciso saber!
Windows x Linux - O que preciso saber!Windows x Linux - O que preciso saber!
Windows x Linux - O que preciso saber!

https://drive.google.com/folderview?id=0Bzv0xww_RaHUfmM4bjVNQi1wQ0QtZmtPVnBpZmZTN3VIUTNsSVpxWWk2b1dIZFFtMEh2Skk&usp=sharing Link de arquivos usados de base no estudo apresentado.

windows linux
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”

O Windows 10 representa o cume de nossa jornada rumo a convergência da plataforma Windows, agora em execução em um único e unificado núcleo do Windows. Essa convergência permite que um mesmo app seja executado em todos os dispositivos Windows – no telefone em seu bolso, no tablet ou laptop em sua mochila, ou no PC em sua mesa, e até mesmo no console Xbox em sua sala de estar. Isso para não mencionar todos os novos dispositivos que estão sendo adicionados à família Windows, como o HoloLens , o Superfície Hub , e dispositivos da Internet das coisas, como o Raspberry Pi 2 . Todos estes dispositivos Windows irão agora ter acesso a uma única loja para aquisição, distribuição e atualização de apps. #PartiuDesenvolverApps

windows 10appsoneday baixada
CDN Usage
www.aol.com

www.ebay.com
www.facebook.com
www.google.com/search
search.live.com/results
www.msn.com
www.myspace.com
en.wikipedia.org/wiki
www.yahoo.com
www.youtube.com

CDN
Akamai

Akamai
Akamai
Akamai
Akamai
RULE 3:
ADD AN EXPIRES HEADER
Expires header
GET /v-app/scripts/107652916-dom.common.js HTTP/1.1
Host: www.blogger.com
User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1
Accept-Encoding: gzip,deflate

HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT
Content-Length: 2066
Content-Encoding: gzip
Expires: Mon, 12 Oct 2009 14:57:34 GMT
Cache-Control: max-age=31536000
XmoÛHþÿFÖvã*wØoq...

• Expiration date determines freshness.
• Can also use Cache-Control: max-age
Expires vs. max-age
• Expires works in HTTP/1.0, max-age in HTTP/1.1
• Expires is an absolute date:
– 12 Oct 2009 14:57:34 GMT
• max-age is # of seconds until expiration:
– 31536000
• Expires relies on clock synchronization between client and
server for short expirations
• max-age takes precedence over Expires

Recommended for you

Como instalar oWindows 7 e Linux num computador
Como instalar oWindows 7 e Linux num computadorComo instalar oWindows 7 e Linux num computador
Como instalar oWindows 7 e Linux num computador

O documento fornece instruções para instalar o Windows 7 e o Ubuntu em um computador. Ele descreve os passos para iniciar a instalação do Windows 7, criar partições, definir configurações de usuário e concluir a instalação. Em seguida, explica como inserir o disco do Ubuntu, selecionar uma instalação paralela, repartir o espaço no disco e concluir a instalação do Ubuntu.

Slide instalacao windows8
Slide instalacao windows8Slide instalacao windows8
Slide instalacao windows8

O documento fornece instruções sobre os passos necessários para instalar o Windows em um computador, incluindo inserir a chave do produto, aceitar os termos de uso, selecionar o idioma, local de instalação, nome do computador e usuário, e aguardar a conclusão do processo de instalação.

Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...

Sessão de quatro webcasts de apoio para suportar migração de PCs corporativos de Windows XP para Windows 8 ou Windows 7

Conditional GET (IMS)
sometime after 3pm PT 9/24/08:
GET /v-app/scripts/107652916-dom.common.js HTTP/1.1
Host: www.blogger.com
User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1
Accept-Encoding: gzip,deflate
If-Modified-Since: Mon, 22 Sep 2008 21:14:35 GMT
HTTP/1.1 200 OK Modified
304 Not
Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT
Content-Length: 2066
Content-Encoding: validity.
IMS determines gzip
Expires: Fri, 26 Sep 2008 22:00:00 GMT

•
• IMS is used when Reload is pressed.
• XmoÛHþÿFÖvã*wØoq...
ETag and If-None-Match also determine validity.
Sending Expires (Apache)
• mod_expires
<FilesMatch ".(gif|jpg|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>

• sends both Expires and max-age:
Expires: Mon, 12 Oct 2009 14:57:34 GMT
Cache-Control: max-age=315360000
Expires in the Wild – 2007
Images
amazon.com

Scripts

Stylesheets

% with
Expires

Median
Age

0/62

0/3

0/1

0%

114 days

aol.com

23/43

6/18

1/1

48%

217 days

cnn.com

0/138

2/11

0/2

1%

227 days

ebay.com

16/20

0/7

0/2

55%

140 days

1/23

0/1

0/1

4%

454 days

32/35

3/9

1/1

80%

34 days

myspace.com

0/18

0/2

0/2

0%

1 day

wikipedia.org

6/8

2/3

1/1

75%

1 day

23/23

4/4

1/1

100%

na

0/32

0/7

0/3

0%

26 days

10/40
(25%)

2/5
(38%)

0.5/2 (27%)

12/46
(26%)

froogle.google.com
msn.com

yahoo.com
youtube.com

average

March 2007
Expires in the Wild – 2008
Images

Scripts

Stylesheets

% with
Expires

aol.com

26/35

13/20

1/1

71%

189 days

ebay.com

48/48

6/7

2/2

98%

1 day

facebook.com

93/97

20/22

20/20

96%

121 days

google.com/search

1/1

0/1

0/0

50%

1 day

search.live.com/results

6/6

1/1

4/4

100%

na

msn.com

45/45

3/3

3/3

100%

na

myspace.com

21/21

7/7

4/4

100%

na

7/32

5/5

9/9

46%

310 days

23/23

4/4

1/1

100%

na

8/27

1/1

1/1

34%

unk

28/34
(83%)

6/7
(85%)

(100%)

38/45
(85%)

en.wikipedia.org/wiki
yahoo.com
youtube.com
average

5/5

Median
Age

October 2008

Recommended for you

Comfiguração completa do setup
Comfiguração completa do setupComfiguração completa do setup
Comfiguração completa do setup

O documento descreve as configurações da BIOS de um computador, incluindo como acessar a tela de configuração da BIOS, opções para configurar data/hora, prioridade de inicialização, periféricos, gerenciamento de energia e overclocking. Também lista as opções para restaurar configurações padrão, definir senhas e salvar/sair das configurações sem salvar alterações.

Configurar o setup da bios [modo de compatibilidade]
Configurar o setup da bios [modo de compatibilidade]Configurar o setup da bios [modo de compatibilidade]
Configurar o setup da bios [modo de compatibilidade]

O documento explica o que é a BIOS e o Setup da BIOS. A BIOS localiza e identifica os componentes do computador e carrega o sistema operativo. O Setup contém informações para reconhecer os componentes e é gravado no CMOS. O Setup permite configurar opções como data/hora, sequência de boot e configurações de hardware.

Aprenda a instalar o windows 10 no virtual box
Aprenda a instalar o windows 10 no virtual boxAprenda a instalar o windows 10 no virtual box
Aprenda a instalar o windows 10 no virtual box

Este documento fornece instruções passo-a-passo para instalar o Windows 10 Technical Preview no VirtualBox, incluindo como configurar uma máquina virtual, instalar o sistema operacional a partir de um arquivo ISO e concluir a configuração inicial do Windows 10.

RULE 4: GZIP COMPONENTS
Compression (encoding)
GET /v-app/scripts/107652916-dom.common.js HTTP/1.1
Host: www.blogger.com
User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1
Accept-Encoding: gzip,deflate

HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT
Content-Length: 6230
2066
Content-Encoding: gzip
function d(s) {...
XmoÛHþÿFÖvã*wØoq...

• typically reduces size by 70%
– (6230-2066)/6230 = 67%
Compression
• Pro:

• smaller transfer size
• Con:

• CPU cycles – on client and server
• Don’t compress resources < 1K
• Don’t compress resources already compressed (images)
• Change server configuration to enable compressions for
certain MIME types
• March
2008
Gzip: not just for HTMLOctober2008
HTML

Scripts

Stylesheets

aol.com
amazon.com

x

x

x

ebay.com
aol.com

x

some

some

facebook.com
cnn.com

x

x

x

google.com/search
ebay.com

x

x

na

search.live.com/results
froogle.google.com

x

x

x

msn.com

x

deflate
x

deflate
x

myspace.com

x

x

x

en.wikipedia.org/wiki
wikipedia.org

x

some
x

some
x

yahoo.com

x

x

x

youtube.com

x

some
x

some
x

gzip scripts, stylesheets, XML, JSON (not images, Flash, PDF)

Recommended for you

Web Architecture and Technologies
Web Architecture and TechnologiesWeb Architecture and Technologies
Web Architecture and Technologies

Topics: - Web Architecture Overview - HTTP (Hypertext Transfer Protocol) - REST (Representational State Transfer) - JSON (JavaScript Object Notation) Slides for the course of "Ambient Intelligence: Technology and Design" given at Politecnico di Torino during year 2013/2014. Course website: http://bit.ly/polito-ami

web architectureweb technologiesrest
Mobile web performance - MoDev East
Mobile web performance - MoDev EastMobile web performance - MoDev East
Mobile web performance - MoDev East

This document summarizes a presentation on high performance mobile web. The presentation covers: - Delivering fast mobile experiences by making fewer HTTP requests, using CDNs, browser prefetching, and other techniques. - Measuring web performance using Navigation Timing, Resource Timing, custom timing marks, and tools like WebPagetest and Google Analytics. - Typical mobile network performance statistics like average latency, download speeds, and how these numbers impact page load times.

mobile webwebperfweb performance
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web Applications

This document discusses modern browser APIs that can improve web application performance. It covers Navigation Timing, Resource Timing, and User Timing which provide standardized ways to measure page load times, resource load times, and custom events. Other APIs discussed include the Performance Timeline, Page Visibility, requestAnimationFrame for script animations, High Resolution Time for more precise timestamps, and setImmediate for more efficient script yielding than setTimeout. These browser APIs give developers tools to assess and optimize the performance of their applications.

performance w3c html javascript dom web
RULE 5:
PUT STYLESHEETS AT THE TOP
Progressive Rendering
•

progress indicators:*
• reassure the system is working
• convey how much time is left
• provide something to look at

•
•
•

the web page is the progress indicator
progressive rendering – draw content as soon as it's
available
stylesheets block progressive rendering in IE, and
cause "flash" in Firefox

*Jakob

Nielson, http://www.useit.com/papers/responsetime.html
Stylesheets in IE
• in IE, nothing in the page is drawn until all style sheets are
done downloading
• reasoning: parse all rules before drawing any element, avoids
having to redraw
• when stylesheets are at the bottom, there is no progressive
rendering => after a long delay the entire page blasts onto the
screen
Fastest feels slowest...
...and slowest feels fastest
stylesheet at bottom: content
finishes downloading sooner,
but rendering starts later
=> feels slower
stylesheet at top: content
finishes downloading later,
but rendering starts sooner
=> feels faster
true in IE 6, 7, 8

Recommended for you

Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization

Pragathi Technical Session 'Web Performance Optimization' By, Athira Vinod Pragathi - Tech & Socio Cultural Activity Group Livares Technologies #livares #pragathi #technicalsession #technology #technicaldiscussion #WebPerformanceOptimization

livareslivares technologiesdigital marketing
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)

1. A website is loaded by a browser through a multi-step process involving DNS lookups, TCP connections, downloading resources like HTML, CSS, JS, and images. This process can be slow due to the number of individual requests and dependencies between resources. 2. Ways to optimize the loading process include making the server fast, inlining critical resources, gzip compression, an optimized caching strategy, optimizing file delivery through techniques like CDNs and HTTP/2, bundling resources, optimizing images, avoiding unnecessary domains, minimizing web fonts, and JavaScript techniques like PJAX. Minifying assets can also speed up loading.

Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design

This document provides an introduction to responsive web design. It defines responsive web design as crafting websites to provide an optimal experience across devices with screens. It distinguishes between adaptive and responsive design, with responsive design changing elements on the page based on device detection or browser width. The document outlines some basic and advanced ingredients for responsive design, including flexible grids, conditional images, media queries, touch input, and server-side conditionals. It emphasizes the importance of performance in responsive design and provides tips for optimizing websites for different networks and devices.

monkeytalkadaptive web designresponsive web design
Flash of Unstyled Content (FOUC)
• in Firefox, elements are drawn even if stylesheets
aren't all downloaded
• reasoning: progressive rendering makes
the page feel faster (most developers
will follow the spec and put their
stylesheets in HEAD?)
• when stylesheets are at the bottom
and they change style of rendered
elements, elements have to be redrawn
=> flash of unstyled content
RULE 6:
PUT SCRIPTS AT THE BOTTOM
Parallel downloads

• HTTP spec recommends only two connections (parallel downloads) per
hostname

• http://www.w3.org/Protocols/rfc2616/rfc2616sec8.html#sec8.1.4
• results in a stair-step pattern
• general rule: page load time increases for every two resources added
More connections
• newer browsers open more connections
per hostname

domain sharding – split resources
across multiple domains to
increase parallelization
• previous example using two
domains
• browser looks at name, not IP
address

Recommended for you

Choosing A Proxy Server - Apachecon 2014
Choosing A Proxy Server - Apachecon 2014Choosing A Proxy Server - Apachecon 2014
Choosing A Proxy Server - Apachecon 2014

This document summarizes a presentation about choosing a proxy server. It discusses several popular proxy options including Apache Traffic Server (ATS), Nginx, Squid, Varnish, and Apache HTTP Server. It covers the types of proxies each supports, features, architectures, caching, performance, and pros and cons. Benchmark tests show ATS has the best cache scaling and performance overall while using less CPU than alternatives like Squid. Nginx and Squid had some issues with latency and HTTP compliance. The document recommends ATS as a good choice for its scaling, efficient caching, and plugin support.

Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-design

This document provides an overview of responsive web design. It begins by defining responsive web design as web design that provides an optimal experience across devices using a flexible grid, conditional images/media, and media queries. It distinguishes between adaptive and responsive design. The document then discusses the growing expectation for seamless content access across devices. It lists the basic ingredients of responsive design as a flexible grid, conditional images/media, and media queries. It also discusses advanced elements, touch input, and server-side conditionals. The document provides resources for learning about wireframes, grids, images, patterns, typography, and performance optimization for responsive design.

uxmonkeyshotmonkeytalk
Optimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 confOptimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 conf

The document discusses optimizing browser experience with a focus on mobile performance. It notes that page load speed and frame rate affect user engagement. Some key challenges for mobile include higher latency, touch input latency, and limited battery life. It provides tips for faster initial rendering, such as inline critical resources and lazy loading others. It also recommends tools for measuring performance, such as Pagespeed Insights, Webpagetest, and the DevTools timeline. Maintaining 60 frames per second is important for smooth interactions, requiring optimizations like smaller DOM changes and using requestAnimationFrame. The document demonstrates DevTools frames and layers panels.

google chromerenderingweb development
• parallelization is an
opportunity for improving load
times
Scripts block
• Unfortunately, scripts block in two ways
• downloading resources below the script
• rendering elements below the script
• Moving the scripts lower means
less blocking
Parallel script loading

• execute scripts in order, but download
them in parallel with other resources
• available in newer browsers
(see browserscope.org)
• IE6&7 will be around for years, we have to
keep them in mind, so…

put scripts at the

BOTTOM
RULE 8:
MAKE JS AND CSS EXTERNAL

Recommended for you

Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications

My talking points for the presentation on optimization of modern web applications. It is a huge topic, and I concentrated mostly on technical aspects of it.

optimizationapplicationsweb
Monitoring web application response times^lj a hybrid approach for windows
Monitoring web application response times^lj a hybrid approach for windowsMonitoring web application response times^lj a hybrid approach for windows
Monitoring web application response times^lj a hybrid approach for windows

This document discusses web application performance monitoring and summarization. It covers tools like YSlow for analyzing page load times, and introduces an approach using Event Tracing for Windows (ETW) to capture performance data from web applications. This includes intercepting Yahoo Boomerang beacon requests to generate ETW events with page load time measurements and other data for analysis. A Web Application Trace Explorer is demonstrated to filter and report on these events to help explore server-side event streams and web application performance.

boomerang beaconsrumweb application performance
Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013

Web Sockets in Java EE 7 allows for real-time communication between clients and servers through bidirectional connections. The speaker discusses the history and specification of Web Sockets, how they enable low-latency push communication compared to traditional polling techniques, and their support in Java EE 7 through JSR 356 which provides APIs and reference implementations. A demo is shown of a Web Sockets application using GlassFish.

web socketsjava ee 7
Inline or external?
<script type='text/javascript'>
var favNumber = 128;
</script>

OR
<script type='text/javascript'
src='fav.js'></script>
<style>
#favNumber { font-weight: bold; }
</style>

OR
<link rel='stylesheet'
type='text/css' href='fav.css'>
doc size, # requests, cache
empty cache
html 50K

html 50K
png 10K
png 10K

inline

3 requests
70K
faster

html
20K

external

primed cache
png 10K
png 10K
1 request
50K
slower

html
20K

css 10K
js 20K

css 10K
js 20K

png 10K
png 10K
5 requests
70K
slower

read from
cache

png 10K
png 10K
1 request
20K
faster
Inline or external?
inline: faster, but HTML document is bigger

•
• external: more HTTP requests, but cached
• variables
• page views per user (per session) , external 
• empty cache stats , external 
• component re-use across pages , external 
• external is typically better
• main exception: home pages
• best of both worlds
• post-onload download
• dynamic inlining
RULE 9:
REDUCE DNS LOOKUPS

Recommended for you

Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...

Twitter is a good example for next generation real-time web applications, but building such an application imposes challenges such as handling an every growing volume of tweets and responses, as well as a large number of concurrent users, who continually *listen* for tweets from users (or topics) they follow. During this session we will review some of the key design principles addressing these challenges, including alternatives *NoSQL* alternatives and blackboard patterns. We will be using Twitter as a use case, while learning how to apply these to any real-time we application

gigaspaces scalability qcon twitter
Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013

This document recaps the development of rest3d from 2011-2013, including prototyping a REST API and COLLADA to JSON converter to simplify accessing 3D content on the web. It describes the open sourcing of rest3d and a COLLADA to glTF converter. The rest3d pipeline is explained, involving content creation, processing, and delivery to a web viewer via REST. Key components include a database, HTTP server, and HTML client. Examples demonstrate accessing models via the REST API and compressing 3D meshes.

colladaamdgithub
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend

This document discusses various techniques for optimizing the frontend performance of web applications. It provides 5 rules: 1) Only optimize when it makes a meaningful difference. 2) Download resources in parallel to reduce page load time. 3) Eliminate unnecessary requests through techniques like merging, inlining, sprites and caching. 4) Defer parsing of JavaScripts when possible to improve perceived page load speeds. 5) Consider factors like server location and content delivery networks to improve global performance.

DNS Lookups
• Typically take 20-100ms, sometimes > 500ms
• OS and browsers cache DNS resolutions
Viewing DNS
• in Windows
•
•
•
•
•
•
•
•
•
•
•
•
•

C:>ipconfig /flushdns
Windows IP Configuration
Successfully flushed the DNS Resolver Cache.
C:>ipconfig /displaydns
Windows IP Configuration
www.google.com
---------------------------------------Record Name . . . . . : www.google.com
Record Type . . . . . : 5
Time To Live . . . . : 43
Data Length . . . . . : 4
Section . . . . . . . : Answer
CNAME Record . . . . : www.l.google.com
TTL (Time to Live)
www.amazon.com
www.aol.com
www.cnn.com

1 minute
1 minute
10 minutes

www.ebay.com
www.google.com
www.msn.com

1 hour
5 minutes
5 minutes

www.myspace.com
www.wikipedia.org
www.yahoo.com
www.youtube.com

1 hour
1 hour
1 minute
5 minutes

TTL < 30 minutes might not impact users
March 2007
Browser DNS Cache
• IE 7
• DnsCacheTimeout: 30 minutes
• KeepAliveTimeout: 1 minute
• ServerInfoTimeout: 2 minutes

• Firefox 2
•
•
•
•

network.dnsCacheExpiration: 1 minute
network.dnsCacheEntries: 20
network.http.keep-alive.timeout: 5 minutes
Fasterfox: 1 hour, 512 entries, 30 seconds

Recommended for you

Network
NetworkNetwork
Network

This document discusses optimizing mobile networks and applications for speed. It begins with an overview of networking basics and how mobile networks work. It then discusses factors that affect speed like latency, bandwidth, TCP protocols, and cellular network routing. The document provides recommendations for optimizing like leveraging WiFi, anticipating latency, saving bandwidth and battery. It also covers HTTP optimizations, browser APIs and protocols like XHR, SSE and WebSockets. The goal is to understand how networks impact applications and how to design for optimal mobile performance.

Freedom of Movement for redisconf19
Freedom of Movement for redisconf19Freedom of Movement for redisconf19
Freedom of Movement for redisconf19

Freedom of Movement - an IoT concept Time series databases, data visualization in IoT. FOG, EDGE, MQTT, Bluetooth.

iotbluetoothvisual
performance.ppt
performance.pptperformance.ppt
performance.ppt

This document provides practical strategies for improving front-end performance of websites. It discusses specific techniques like making fewer HTTP requests by combining files, leveraging browser caching with far-future expires headers, gzipping components, using CSS sprites, and deploying assets on a content delivery network. It also summarizes key rules from tools like YSlow and PageSpeed for optimizing front-end performance.

Reducing DNS Lookups
• use Keep-Alive
• adding DNS lookups vs. domain sharding
• identify dominant domain names, reduce non-dominant
names
• for dominant domains – shard across 2-4 CNAMEs
RULE 10:
MINIFY JAVASCRIPT
Minification
• minification: removing unnecessary characters from code
(comments, white space, etc.)
• obfuscation: minify as well as reduce length of symbol names
(munge)
original code

YAHOO.util.CustomEvent =
function(type, oScope, silent, signature) {
this.type = type;
this.scope = oScope || window;
this.silent = silent;
this.signature = signature || YAHOO.util.CustomEvent.LIST;
this.subscribers = [];
if (!this.silent) {
}
var onsubscribeType = "_YUICEOnSubscribe";
if (type !== onsubscribeType) {
this.subscribeEvent =
new YAHOO.util.CustomEvent(onsubscribeType, this, true);
}
};

event.js from YUI – http://developer.yahoo.com/yui/

Recommended for you

Life on the Edge with ESI
Life on the Edge with ESILife on the Edge with ESI
Life on the Edge with ESI

This document discusses Edge Side Includes (ESI) and its use at Yahoo. ESI allows content to be assembled at the edge from different sources, improving performance. Yahoo uses ESI to assemble pages, support legacy modules, and handle combinations of assets. ESI enables availability through caching and fallbacks. The future may include deeper HTTP integration and smarter assembly of includes.

esicdnedge computing
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming Curriculum

This document discusses proposed changes to a Systems Programming course (CS252) to incorporate cloud computing concepts. The course currently focuses on C/C++, operating systems, and networking. The proposal is to have students write mobile and web applications using HTML5, JavaScript frameworks, and cloud services on Bluemix. Students would work in groups on semester-long projects developing games, social apps, or other programs that run in browsers and mobile devices while calling APIs hosted on Bluemix. This aims to teach new generation web development skills and how applications can leverage cloud computing technologies.

data scienceeducationsystems programming
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-SeriesBehaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series

Over the decades, we have seen tremendous success in biometrics technologies being used in all types of applications based on the physical attributes of the individual such as face, fingerprints, voice and iris. Inspired by this, we introduce a new concept Mobile Behaviometrics, which uses algorithms and models to measure and quantify unique human behavioral patterns in place of human bio-attributes. Behaviometrics algorithms take multiple data from various sensors as input and fuse them to build behavioral models which are capable of producing application specific quantitative analysis on the unique individuals that were the originators of the data.

project abacus atap sensec zense
minified code
YAHOO.util.CustomEvent=function(type,oScope,silent,signature){th
is.type=type;this.scope=oScope||window;this.silent=silent;this.s
ignature=signature||YAHOO.util.CustomEvent.LIST;this.subscribers
=[];if(!this.silent){}
var_onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscribeTyp
e){this.subscribeEvent=new_YAHOO.util.CustomEvent(onsubscribeTyp
e,this,true);}};

• JSMin http://crockford.com/javascript/jsmin
• Closure Compiler http://code.google.com/closure/compiler/
• YUI Compressor http://developer.yahoo.com/yui/compressor/
• also munges and minifies CSS
obfuscated code
YAHOO.util.CustomEvent=function(_1,_2,_3,_4){
this.type=_1;
this.scope=_2||window;
this.silent=_3;
this.signature=_4||YAHOO.util.CustomEvent.LIST;
this.subscribers=[];
if(!this.silent){
}
var _5="_YUICEOnSubscribe";
if(_1!==_5){
this.subscribeEvent=new
YAHOO.util.CustomEvent(_5,this,true);
}
};

• DoJo Compressor (ShrinkSafe)
• http://dojotoolkit.org/docs/shrinksafe/
• Closure Compiler http://code.google.com/closure/
• YUI Compressor
• http://developer.yahoo.com/yui/compressor/
obfuscation costs
• obfuscation typically reduces size more, but has some costs
• bugs – symbol munged to "aa", namespace conflict
• maintenance – tag external symbols (eg, API)
• debugging – harder to read in production
Minifying CSS
•
•

Savings are typically less compared to JavaScript
• CSS typically has fewer comments and whitespace
Greater savings from CSS optimizations
• merging identical rules
• abbreviations
• "#660066" => "#606"
• "0px" => "0"
• "background-color:" => "background:"

Recommended for you

Core of Personalization at Polyvore: Style Profile
Core of Personalization at Polyvore: Style ProfileCore of Personalization at Polyvore: Style Profile
Core of Personalization at Polyvore: Style Profile

Over the past year, our engineering team has undertaken the task of creating a more personalized experience for our users. We already have an amazing community of designers, artists, and fashion enthusiasts who come to Polyvore to get inspired around shopping. However, we felt that with a little bit of machine learning we could help users discover and shop for even more products that they may not have found on their own. In this blog post we’ll walk through some of the ways we are using machine learning to understand our users individual style, which we call a Style Profile, to recommend more personalized products and outfits.

fashion tech data style
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...

1) The document proposes Fog Computing as a new platform that extends cloud computing to the edge of the network in order to address the needs of latency-sensitive IoT applications. 2) Two use cases are described to illustrate the key requirements of Fog Computing: a smart traffic light system that requires local subsystem latency of less than 10ms, and a wind farm that involves real-time analytics and coordination across a wide geographical area. 3) The key attributes that Fog Computing aims to address include mobility, geo-distribution, low and predictable latency, interplay between fog and cloud for data analytics, consistency in highly distributed systems, multi-tenancy, and multi-agency coordination.

KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...

KeySens: Passive User Authentication through Micro behavior Modeling of Soft Keyboard Interaction

RULE 11:
AVOID REDIRECTS
3xx status codes
• "further action needs to be taken by the user agent in order to fulfill the
request"
•
•
•
•
•
•
•
•

300 Multiple Choices (based on Content-Type)
301 Moved Permanently
302 Moved Temporarily (aka, Found)
303 See Other (clarification of 302)
304 Not Modified
response for
305 Use Proxy
conditional GET
request
306 (no longer used)
307 Temporary Redirect (clarification of 302)

most popular
HTTP/1.1

•http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3
redirect example
Request

GET / HTTP/1.1
Host: astrology.yahoo.com

Response

HTTP/1.1 301 Moved Permanently
Location: http://shine.yahoo.com/astrology/

• Why use redirects?
• prettier URLs
• track traffic
• authentication
worst blocker

•inserting a redirect to the HTML document is
worse than how stylesheets and scripts block
• all resources in the page are delayed
• the user gets very little feedback (nothing in the page)
• rendering, even the HTML text, is delayed
• 2nd worse – redirecting to a script

Recommended for you

Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...

We consider web optimization within Fog Computing context. We apply existing methods for web optimization in a novel manner, such that these methods can be combined with unique knowledge that is only available at the edge (Fog) nodes. More dynamic adaptation to the user’s conditions (eg. network status and device’s computing load) can also be accomplished with network edge specific knowledge. As a result, a user’s webpage rendering performance is improved beyond that achieved by simply applying those methods at the webserver or CDNs.

web performance frontend
Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Guest Lecture: SenSec - Mobile Security through BehavioMetrics Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Guest Lecture: SenSec - Mobile Security through BehavioMetrics

This document summarizes research on using mobile sensor data and behavioral biometrics for user authentication and activity recognition. It describes collecting data from accelerometers, GPS, WiFi and applications to build language models of user behavior. Scores are calculated to determine the likelihood a behavior belongs to a user or activity class. Authentication is triggered based on thresholds. The system was tested to identify users from single key presses and detect anomalies with days of training data at 80% accuracy. Future work involves expanded data collection, improved models, integration with security frameworks, and ensuring user privacy.

behavior analysisuser behavior modelingmobile security
ICNC 2013 SenSec Presentation
ICNC 2013 SenSec PresentationICNC 2013 SenSec Presentation
ICNC 2013 SenSec Presentation

We introduce a new mobile system framework, SenSec, which uses passive sensory data to ensure the security of applications and data on mobile devices. SenSec constantly collects sensory data from accelerometers, gyroscopes and magnetometers and constructs the gesture model of how a user uses the device. SenSec calculates the sureness that the mobile device is being used by its owner. Based on the sureness score, mobile devices can dynamically request the user to provide active authentication (such as a strong password), or disable certain features of the mobile devices to protect user's privacy and information security. In this paper, we model such gesture patterns through a continuous n-gram language model using a set of features constructed from these sensors. We built mobile application prototype based on this model and use it to perform both user classification and user authentication experiments. User studies show that SenSec can achieve 75 accuracy in identifying the users and 71.3 accuracy in detecting the non-owners with only 13.1 false alarms.

mobile sensingmobile security
avoid redirects
• Eliminate the need
• base href or full URLs for resources
• referer tracking
• HTML 5 – A ping and LINK pingback
• CNAMEs
• mod_rewrite
• no autoindex
• Make them cacheable
• 301 with future Expires
• JavaScript & meta refresh with future Expires
RULE 13:
ETAGS
ETag Response Header
GET /v-app/scripts/107652916-dom.common.js HTTP/1.1
Host: www.blogger.com
User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1
Accept-Encoding: gzip,deflate

HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT
Content-Length: 2066
Content-Encoding: gzip
Expires: Fri, 26 Sep 2008 22:00:00 GMT
ETag: "19f1e-7920-4525b037f0440"
XmoÛHþÿFÖvã*wØoq...
XmoÛHþÿFÖvã*wØoq...
What is an ETag
•http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.11
•
•
•
•
•

added in HTTP/1.1
used by clients and servers to validate expired resources
more flexible than Last-Modified date
"An entity tag consists of an opaque quoted string"
" An entity tag MUST be unique across all versions of all entities
associated with a particular resource."

Recommended for you

BehavioMetrics: A Big Data Approach
BehavioMetrics: A Big Data ApproachBehavioMetrics: A Big Data Approach
BehavioMetrics: A Big Data Approach

The penetration of mobile devices equipped with various embedded sensors also make it possible to capture the physical and virtual context of the user and surrounding environment. Further, the modeling of human behaviors based on those data becomes very important due to the increasing popularity of context-aware computing and people-centric applications, which utilize users' behavior pattern to improve the existing services or enable new services. In many natural settings, however, their broader applications are hindered by three main challenges: rarity of labels, uncertainty of activity granularities, and the difficulty of multi-dimensional sensor fusion.

behavior analysismobile sensingmobile analytics
美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010
SenSec: Mobile Application Security through Passive Sensing
SenSec: Mobile Application Security through Passive SensingSenSec: Mobile Application Security through Passive Sensing
SenSec: Mobile Application Security through Passive Sensing

The document proposes a smartphone-based behavioral authentication system called SenSec. It collects sensor data to build user behavior models. Features are extracted from the sensor data and used to build risk analysis trees to detect anomalies. When anomalies are detected, a certainty score is broadcast and can trigger authentication for sensitive applications. The system was tested on a dataset of 25 users, achieving over 98% accuracy in user identification. Extensions and integrations with other systems are discussed to enhance security, privacy, and energy efficiency.

Apache ETags
"19f1e-7920-4525b037f0440"
"inode-size-timestamp"
• inode – used by filesystems to store file type, owner, group,
permissions, etc.
• inode for the same file differs across servers even if file size,
timestamp, and directory is the same
• http://stevesouders.com/images/arrow-right-9x13.png
ETag: "21f5315-d4-5d51f0c0"
• http://1.cuzillion.com/images/arrow-right-9x13.png
ETag: "1ee57ec-d4-5d51f0c0"
IIS ETags
"b4f35327edac51:113f"
"timestamp:changenumber"
• changenumber – counter to track IIS configuration changes
• changenumber rarely the same across servers
• http://hp.msn.com/global/c/hpv10/favicon.ico
ETag: "b4f35327edac51:113f"
ETag: "b4f35327edac51:e6e"
the problem with ETags
• the default ETag syntax in Apache and IIS makes it unlikely that
INM will match across servers, even when the resource is the
same
• probability of an incorrect INM miss:
(n-1)/n where "n" is the number of servers
not an issue if you just have one server

• http://www.apacheweek.com/issues/02-01-18
"can cause an unnecessary performance hit as resources are fetched more often
than is required"

• http://support.microsoft.com/kb/922703

"IIS 6.0 sends a 200 response because it considers the different change numbers to
mean that [the resources] are not the same versions"
the solution for ETags
•
•
•
•

if you're not leveraging ETags, turn them off
reduces size of requests and responses
reduces outbound traffic from your servers
increases proxy cache hit rate

Recommended for you

Mobile privacysurvey presentation
Mobile privacysurvey presentationMobile privacysurvey presentation
Mobile privacysurvey presentation

TaintDroid is a system that provides dynamic taint tracking and analysis for Android. It tracks privacy sensitive information like location, contacts etc. at variable, message, method and file levels with 14% overhead. Testing 30 apps found 20 shared information unexpectedly, like sending device IDs or location to ad servers. TaintDroid effectively demonstrates the need for stronger mobile privacy but has limitations like requiring OS modifications and false positives. Future work aims to reduce false positives, integrate crowdsourcing and detect privacy information leakage attempts.

Icccn2011 jiang-0802
Icccn2011 jiang-0802Icccn2011 jiang-0802
Icccn2011 jiang-0802

The document discusses using mobility traces and context information to detect loss or theft of mobile devices. It proposes converting traces and context into "behavior text" representations, then building an n-gram language model to establish a baseline for normal behavior. The model can detect anomalies indicating potential loss or theft events by flagging sequences with unexpectedly low probabilities. The approach aims to discover such events early for notification and recovery efforts.

user behavior modeling
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

RULE 15:
OPTIMIZE IMAGES
image optimization: 7 TIPS
1.
2.
3.
4.

choose PNG over GIF (lossless)
crush your PNGs (lossless)
strip needless JPEG metadata (lossless)
make all PNGs palette PNGs

5. avoid AlphaImageLoader, try PNG8 or at least
_filter
6. crush generated images (lossless)
7. use CSS sprites; stay within the palette number of colors
(use PNG8)
Firefox add-on
image optimization savings
images

Smushit

aol.com

296K

11K

ebay.com

145K

12K

facebook.com

312K

18K

google.com/search

12K

0K

search.live.com/results

24K

1K

msn.com

123K

2K

myspace.com

583K

3K

en.wikipedia.org/wiki

789K

24K

yahoo.com

107K

5K

youtube.com

196K

35K

• March
November 2008

Recommended for you

How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx

How do we build an IoT product, and make it profitable? Talk from the IoT meetup in March 2024. https://www.meetup.com/iot-sweden/events/299487375/

iot
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck

YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well. Some facts about WPRiders and why we are one of the best firms around: More than 700 five-star reviews! You can check them here. 1500 WordPress projects delivered. We respond 80% faster than other firms! Data provided by Freshdesk. We’ve been in business since 2015. We are located in 7 countries and have 22 team members. With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce. Our team members are: - highly experienced developers (employees & contractors with 5 -10+ years of experience), - great designers with an eye for UX/UI with 10+ years of experience - project managers with development background who speak both tech and non-tech - QA specialists - Conversion Rate Optimisation - CRO experts They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals. At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.

web development agencywpriderswordpress development
RULE 17:
USE IFRAMES SPARINGLY
iframes
• good for:
• embedding content from another web site
• sandboxing 3rd party JavaScript
• asynchronous loading of external scripts
• most expensive DOM element
IE7

Firefox 2

http://stevesouders.com/hpws/iframes-none.php

290 ms

250 ms

http://stevesouders.com/hpws/iframes-10.php

410 ms

437 ms

http://stevesouders.com/hpws/iframes-100.php

766 ms

4300 ms
Last Rule: SERVE STATIC RESOURCES
COOKIE-FREE
Set-Cookie response header
• HTTP/1.1 200 OK
• Set-Cookie:
MSNPPAuth=B*eDP3m4...WELr;
expires=Wed, 30-Dec-2037 16:00:00
GMT; domain=.live.com;_path=/;
•
•
•
•
•

domain, path, and expires in the cookie header
max size ~4K (varies by browser)
one header per cookie
cookie is stored by the client (browser)
only valid if domain matches current page

Recommended for you

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf

Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 : - Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants. - REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.

genaicloudrgpd
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

Cookie response header
• GET /results.aspx?q=flowers
HTTP/1.1
• Host: search.live.com
• Cookie:_MSNPPAuth=B*eDP3m4...WEL
r;_SRCHUID=V=1&GUID=83F46965E902
40739918C1047F88FD26;_SRCHUSR=AU
TOREDIR=0&GEOVAR=&DOB=20081129;
...
• cookie sent back to server on subsequent requests that match
the domain and path
• all cookies sent in one request header
• "; " delimited
Cookie size
cookie size
(bytes)

comments

aol.com

494

"stay signed in" checked

ebay.com

1038

"keep me signed in" checked

facebook.com

990

"remember me" checked

google.com/search

417

logged in to iGoogle and YouTube

search.live.com/results

1938

"remember me" and "remember
my password" checked

msn.com

1063

logged in thru search.live.com

myspace.com

2027

"remember me" checked

en.wikipedia.org/wiki

134

"remember me" checked

yahoo.com

677

"keep me signed in" checked

youtube.com

597

also logged in to iGoogle

total size of all cookies
November 2008
Cookie impact
cookie size response time delta
500 bytes

1 ms

1000 bytes
1500 bytes
2000 bytes

16 ms
31 ms
47 ms

2500 bytes
3000 bytes

63 ms
78 ms

• cookies on static resources multiplies the delay
• largest packet MTU (Maximum Transmission Unit) for Ethernet: 1500
bytes
•
•
•
•
•

•
•
•
•

Live Search cookies sent

http://search.live.com/results.aspx?q=
flowers
http://search.live.com/.../brand_c.css
http://search.live.com/.../serp_c.css
http://search.live.com/.../scopebar2_c
.css
http://search.live.com/.../answerAll_c
.css
http://search.live.com/.../asset4.gif
http://search.live.com/.../cbcoin.gif
http://search.live.com/.../main.js

seven static resources contain the Cookie request header (1938 bytes),
even though cookies don't affect the response
•
7 x 1938 bytes = 13.5K (upstream!)

Recommended for you

Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

data privacyprivacy complianceai
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
Static resource cookie size
cookie size
(bytes)

static resources
on same domain

wasted bytes

aol.com

494

2

988

ebay.com

1038

0

0

facebook.com

990

2

1980

google.com/search

417

5

2085

search.live.com/results

1938

7

13,566

msn.com

1063

1

1063

myspace.com

2027

2

4,054

en.wikipedia.org/wiki

134

8

1072

yahoo.com

677

0

0

youtube.com

597

1

597
November 2008
cookie-free static content
• takeaway: serve static content without cookies
• different domain (rule 2 – use a CDN)
• different path ("/app" versus "/images")
CASE Study: AFTER
Optimized Web Site

12/13/2013
The 7 Habits of Exceptional Performance
1.
2.
3.
4.
5.
6.
7.

Make Performance a Priority
Test, Measure, Test Again
Learn about the Tools
Balance Performance with Features
Track Results Over Time
Set Targets
Ask Questions; Check It for Yourself!

Recommended for you

Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time

Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality. Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality. Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality. Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank? ** Episode Overview ** In this first episode of our quality series, Kristen Hansen and the panel discuss: ⦿ What do we mean when we say patent quality? ⦿ Why is patent quality important? ⦿ How to balance quality and budget ⦿ The importance of searching, continuations, and draftsperson domain expertise ⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications https://www.aurorapatents.com/patently-strategic-podcast.html

patentspatent applicationpatent prosecution
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces

An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)

augmented realitycross realityvirtual reality
making the Web
Smarter and Faster

• Faster HTTP

• SPDY
• HTTP Speed+Mobility

• Better Browsers
• Chrome has disrupted the market
• HTML5 will drive further evolution

• Moving to Mobile/Device Platforms
• More sensitive to network effects of all kinds
• Application-driven user experience
• Moving away from Hypertext?

•
12/13/2013
Art and Science of Web Sites Performance: A Front-end Approach

More Related Content

What's hot

Type URL, Enter, and Then …
Type URL, Enter, and Then …Type URL, Enter, and Then …
Type URL, Enter, and Then …
Jinglun Li
 
Web performance optimization
Web performance optimizationWeb performance optimization
Web performance optimization
Massimo Iacolare
 
Apache httpd-2.4 : Watch out cloud!
Apache httpd-2.4 : Watch out cloud!Apache httpd-2.4 : Watch out cloud!
Apache httpd-2.4 : Watch out cloud!
Jim Jagielski
 
크롬의고성능네트워킹
크롬의고성능네트워킹크롬의고성능네트워킹
크롬의고성능네트워킹
Juhui Park
 
Building a Gateway Server
Building a Gateway ServerBuilding a Gateway Server
Building a Gateway Server
Dashamir Hoxha
 
21 Www Web Services
21 Www Web Services21 Www Web Services
21 Www Web Services
royans
 
SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012
Fabian Lange
 
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Holger Bartel
 
Featherweight Clients (Athens, 2012)
Featherweight Clients (Athens, 2012)Featherweight Clients (Athens, 2012)
Featherweight Clients (Athens, 2012)
Fabio Simeoni
 
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
John Dalsgaard
 

What's hot (10)

Type URL, Enter, and Then …
Type URL, Enter, and Then …Type URL, Enter, and Then …
Type URL, Enter, and Then …
 
Web performance optimization
Web performance optimizationWeb performance optimization
Web performance optimization
 
Apache httpd-2.4 : Watch out cloud!
Apache httpd-2.4 : Watch out cloud!Apache httpd-2.4 : Watch out cloud!
Apache httpd-2.4 : Watch out cloud!
 
크롬의고성능네트워킹
크롬의고성능네트워킹크롬의고성능네트워킹
크롬의고성능네트워킹
 
Building a Gateway Server
Building a Gateway ServerBuilding a Gateway Server
Building a Gateway Server
 
21 Www Web Services
21 Www Web Services21 Www Web Services
21 Www Web Services
 
SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012
 
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
Web Performance in the Age of HTTP/2 - FEDay Conference, Guangzhou, China 19/...
 
Featherweight Clients (Athens, 2012)
Featherweight Clients (Athens, 2012)Featherweight Clients (Athens, 2012)
Featherweight Clients (Athens, 2012)
 
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
REST services and IBM Domino/XWork - DanNotes 19-20. november 2014
 

Viewers also liked

Windows8
Windows8Windows8
Windows8
Alisson Bezerra
 
SVN keywords
SVN keywordsSVN keywords
SVN keywords
Marcelo Sabadini
 
Remover senha do supervisor de conteudo
Remover senha do supervisor de conteudoRemover senha do supervisor de conteudo
Remover senha do supervisor de conteudo
fernandomeschini
 
Criação do pendrive bootável
Criação do pendrive bootávelCriação do pendrive bootável
Criação do pendrive bootável
Francis Torres
 
Paulo Santanna Nsi Windows Server 2008 R2 Overview
Paulo Santanna   Nsi   Windows Server 2008 R2 OverviewPaulo Santanna   Nsi   Windows Server 2008 R2 Overview
Paulo Santanna Nsi Windows Server 2008 R2 Overview
Invent IT Solutions
 
Processo de Startup do Linux
Processo de Startup do LinuxProcesso de Startup do Linux
Processo de Startup do Linux
Mauro Tapajós
 
Validando a Segurança de Software
Validando a Segurança de SoftwareValidando a Segurança de Software
Validando a Segurança de Software
Jeronimo Zucco
 
Como Formatar o PC via USB by Rodrigo Santos
Como Formatar o PC via USB by Rodrigo SantosComo Formatar o PC via USB by Rodrigo Santos
Como Formatar o PC via USB by Rodrigo Santos
Rodrigo Santos
 
Magdalena
MagdalenaMagdalena
Magdalena
pochi007
 
Pen drive
Pen drivePen drive
Formatação, Criação de Partições e a Instalção do Windows XP num PC
Formatação, Criação de Partições e a Instalção do Windows XP num PCFormatação, Criação de Partições e a Instalção do Windows XP num PC
Formatação, Criação de Partições e a Instalção do Windows XP num PC
JJanes
 
Instalação e configuração do windows server 2003
Instalação e configuração do windows server 2003Instalação e configuração do windows server 2003
Instalação e configuração do windows server 2003
andrefrois2
 
Windows x Linux - O que preciso saber!
Windows x Linux - O que preciso saber!Windows x Linux - O que preciso saber!
Windows x Linux - O que preciso saber!
Adolfo Augusto Rodrigues
 
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
Microsoft
 
Como instalar oWindows 7 e Linux num computador
Como instalar oWindows 7 e Linux num computadorComo instalar oWindows 7 e Linux num computador
Como instalar oWindows 7 e Linux num computador
Fabricio Micael
 
Slide instalacao windows8
Slide instalacao windows8Slide instalacao windows8
Slide instalacao windows8
Lucas Coelho
 
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Marcelo Matias
 
Comfiguração completa do setup
Comfiguração completa do setupComfiguração completa do setup
Comfiguração completa do setup
Hebert3
 
Configurar o setup da bios [modo de compatibilidade]
Configurar o setup da bios [modo de compatibilidade]Configurar o setup da bios [modo de compatibilidade]
Configurar o setup da bios [modo de compatibilidade]
Escola Fernando Casimiro Pereira da Silva
 
Aprenda a instalar o windows 10 no virtual box
Aprenda a instalar o windows 10 no virtual boxAprenda a instalar o windows 10 no virtual box
Aprenda a instalar o windows 10 no virtual box
Julio Filho
 

Viewers also liked (20)

Windows8
Windows8Windows8
Windows8
 
SVN keywords
SVN keywordsSVN keywords
SVN keywords
 
Remover senha do supervisor de conteudo
Remover senha do supervisor de conteudoRemover senha do supervisor de conteudo
Remover senha do supervisor de conteudo
 
Criação do pendrive bootável
Criação do pendrive bootávelCriação do pendrive bootável
Criação do pendrive bootável
 
Paulo Santanna Nsi Windows Server 2008 R2 Overview
Paulo Santanna   Nsi   Windows Server 2008 R2 OverviewPaulo Santanna   Nsi   Windows Server 2008 R2 Overview
Paulo Santanna Nsi Windows Server 2008 R2 Overview
 
Processo de Startup do Linux
Processo de Startup do LinuxProcesso de Startup do Linux
Processo de Startup do Linux
 
Validando a Segurança de Software
Validando a Segurança de SoftwareValidando a Segurança de Software
Validando a Segurança de Software
 
Como Formatar o PC via USB by Rodrigo Santos
Como Formatar o PC via USB by Rodrigo SantosComo Formatar o PC via USB by Rodrigo Santos
Como Formatar o PC via USB by Rodrigo Santos
 
Magdalena
MagdalenaMagdalena
Magdalena
 
Pen drive
Pen drivePen drive
Pen drive
 
Formatação, Criação de Partições e a Instalção do Windows XP num PC
Formatação, Criação de Partições e a Instalção do Windows XP num PCFormatação, Criação de Partições e a Instalção do Windows XP num PC
Formatação, Criação de Partições e a Instalção do Windows XP num PC
 
Instalação e configuração do windows server 2003
Instalação e configuração do windows server 2003Instalação e configuração do windows server 2003
Instalação e configuração do windows server 2003
 
Windows x Linux - O que preciso saber!
Windows x Linux - O que preciso saber!Windows x Linux - O que preciso saber!
Windows x Linux - O que preciso saber!
 
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
“Windows 10 & Universal Apps. Oportunidades para desenvolvedores”
 
Como instalar oWindows 7 e Linux num computador
Como instalar oWindows 7 e Linux num computadorComo instalar oWindows 7 e Linux num computador
Como instalar oWindows 7 e Linux num computador
 
Slide instalacao windows8
Slide instalacao windows8Slide instalacao windows8
Slide instalacao windows8
 
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
Implementação de PCs, parte 3 de 4: Criação e manipulação de imagem de instal...
 
Comfiguração completa do setup
Comfiguração completa do setupComfiguração completa do setup
Comfiguração completa do setup
 
Configurar o setup da bios [modo de compatibilidade]
Configurar o setup da bios [modo de compatibilidade]Configurar o setup da bios [modo de compatibilidade]
Configurar o setup da bios [modo de compatibilidade]
 
Aprenda a instalar o windows 10 no virtual box
Aprenda a instalar o windows 10 no virtual boxAprenda a instalar o windows 10 no virtual box
Aprenda a instalar o windows 10 no virtual box
 

Similar to Art and Science of Web Sites Performance: A Front-end Approach

Web Architecture and Technologies
Web Architecture and TechnologiesWeb Architecture and Technologies
Web Architecture and Technologies
Fulvio Corno
 
Mobile web performance - MoDev East
Mobile web performance - MoDev EastMobile web performance - MoDev East
Mobile web performance - MoDev East
Patrick Meenan
 
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Nicholas Jansma
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
Livares Technologies Pvt Ltd
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
strommen
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
Serge Hufkens
 
Choosing A Proxy Server - Apachecon 2014
Choosing A Proxy Server - Apachecon 2014Choosing A Proxy Server - Apachecon 2014
Choosing A Proxy Server - Apachecon 2014
bryan_call
 
Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-design
Monkeyshot
 
Optimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 confOptimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 conf
Máté Nádasdi
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
Eugene Lazutkin
 
Monitoring web application response times^lj a hybrid approach for windows
Monitoring web application response times^lj a hybrid approach for windowsMonitoring web application response times^lj a hybrid approach for windows
Monitoring web application response times^lj a hybrid approach for windows
Mark Friedman
 
Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013
Siva Arunachalam
 
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Nati Shalom
 
Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013
Remi Arnaud
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
tkramar
 
Network
NetworkNetwork
Network
Ynon Perek
 
Freedom of Movement for redisconf19
Freedom of Movement for redisconf19Freedom of Movement for redisconf19
Freedom of Movement for redisconf19
Richard Leddy
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
fakeaccount225095
 
Life on the Edge with ESI
Life on the Edge with ESILife on the Edge with ESI
Life on the Edge with ESI
Kit Chan
 
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming Curriculum
Steven Miller
 

Similar to Art and Science of Web Sites Performance: A Front-end Approach (20)

Web Architecture and Technologies
Web Architecture and TechnologiesWeb Architecture and Technologies
Web Architecture and Technologies
 
Mobile web performance - MoDev East
Mobile web performance - MoDev EastMobile web performance - MoDev East
Mobile web performance - MoDev East
 
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web Applications
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
Choosing A Proxy Server - Apachecon 2014
Choosing A Proxy Server - Apachecon 2014Choosing A Proxy Server - Apachecon 2014
Choosing A Proxy Server - Apachecon 2014
 
Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-design
 
Optimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 confOptimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 conf
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
 
Monitoring web application response times^lj a hybrid approach for windows
Monitoring web application response times^lj a hybrid approach for windowsMonitoring web application response times^lj a hybrid approach for windows
Monitoring web application response times^lj a hybrid approach for windows
 
Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013Web sockets in java EE 7 - JavaOne 2013
Web sockets in java EE 7 - JavaOne 2013
 
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
 
Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
Network
NetworkNetwork
Network
 
Freedom of Movement for redisconf19
Freedom of Movement for redisconf19Freedom of Movement for redisconf19
Freedom of Movement for redisconf19
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Life on the Edge with ESI
Life on the Edge with ESILife on the Edge with ESI
Life on the Edge with ESI
 
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming Curriculum
 

More from Jiang Zhu

Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-SeriesBehaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Jiang Zhu
 
Core of Personalization at Polyvore: Style Profile
Core of Personalization at Polyvore: Style ProfileCore of Personalization at Polyvore: Style Profile
Core of Personalization at Polyvore: Style Profile
Jiang Zhu
 
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Jiang Zhu
 
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
Jiang Zhu
 
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Jiang Zhu
 
Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Guest Lecture: SenSec - Mobile Security through BehavioMetrics Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Jiang Zhu
 
ICNC 2013 SenSec Presentation
ICNC 2013 SenSec PresentationICNC 2013 SenSec Presentation
ICNC 2013 SenSec Presentation
Jiang Zhu
 
BehavioMetrics: A Big Data Approach
BehavioMetrics: A Big Data ApproachBehavioMetrics: A Big Data Approach
BehavioMetrics: A Big Data Approach
Jiang Zhu
 
美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010
Jiang Zhu
 
SenSec: Mobile Application Security through Passive Sensing
SenSec: Mobile Application Security through Passive SensingSenSec: Mobile Application Security through Passive Sensing
SenSec: Mobile Application Security through Passive Sensing
Jiang Zhu
 
Mobile privacysurvey presentation
Mobile privacysurvey presentationMobile privacysurvey presentation
Mobile privacysurvey presentation
Jiang Zhu
 
Icccn2011 jiang-0802
Icccn2011 jiang-0802Icccn2011 jiang-0802
Icccn2011 jiang-0802
Jiang Zhu
 

More from Jiang Zhu (12)

Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-SeriesBehaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
Behaviometrics: Behavior Modeling from Heterogeneous Sensory Time-Series
 
Core of Personalization at Polyvore: Style Profile
Core of Personalization at Polyvore: Style ProfileCore of Personalization at Polyvore: Style Profile
Core of Personalization at Polyvore: Style Profile
 
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
Big Data and Internet of Things: A Roadmap For Smart Environments, Fog Comput...
 
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
KeySens: Passive User Authentication Through Micro Behavior Modeling of Soft ...
 
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
Improving Web Siste Performance Using Edge Services in Fog Computing Architec...
 
Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Guest Lecture: SenSec - Mobile Security through BehavioMetrics Guest Lecture: SenSec - Mobile Security through BehavioMetrics
Guest Lecture: SenSec - Mobile Security through BehavioMetrics
 
ICNC 2013 SenSec Presentation
ICNC 2013 SenSec PresentationICNC 2013 SenSec Presentation
ICNC 2013 SenSec Presentation
 
BehavioMetrics: A Big Data Approach
BehavioMetrics: A Big Data ApproachBehavioMetrics: A Big Data Approach
BehavioMetrics: A Big Data Approach
 
美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010
 
SenSec: Mobile Application Security through Passive Sensing
SenSec: Mobile Application Security through Passive SensingSenSec: Mobile Application Security through Passive Sensing
SenSec: Mobile Application Security through Passive Sensing
 
Mobile privacysurvey presentation
Mobile privacysurvey presentationMobile privacysurvey presentation
Mobile privacysurvey presentation
 
Icccn2011 jiang-0802
Icccn2011 jiang-0802Icccn2011 jiang-0802
Icccn2011 jiang-0802
 

Recently uploaded

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 

Recently uploaded (20)

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 

Art and Science of Web Sites Performance: A Front-end Approach

  • 1. Jiang Zhu Advanced Architecture and Research 09/07/2012
  • 2. Agenda • • • • • Overture: Web Performance As Art And Science First the Theory… …Then the Practice Case Study: Before vs. After …Making the Web Faster and Smarter • Slides Credits: Steven Sounders (Google/Stanford), Collin Jackson (Stanford/CMU), Daniel Austin (eBay) 12/13/2013
  • 3. State of The ART? • An Art and a Science • Very Little Prior Art • Users Suffer – • The World Wide Wait isn’t over yet! • Rapid Change in the Industry • Browsers • Devices • Standards • The Rest of the World is Catching Up • Challenges of Global/Local/Mobile/Social Performance 12/13/2013
  • 4. • PERFORMANCE IS RESPONSE TIME • PERFORMANCE IS RESPONSE TIME • PERFORMANCE IS RESPONSE TIME • PERFORMANCE IS RESPONSE TIME • (It’s not latency, it’s not bandwidth, it’s not queue residence time or queue length or any such thing.) 12/13/2013
  • 5. Dimensions of Performance • Geography/Network location • Bandwidth/Medium/Transport Type • Browser/Device Type • RT Varies by as much as 50% (chrome vs IE) • Page Composition • Client-side rendering and execution effects (JS, CSS) • Network Transport Effects • # of Connections, CDN Use 12/13/2013
  • 6. The MPPC Model “Multiple Parallel Persistent Connections” Request Initiation by User S HTTP Request HTTP Request t1 This entire cycle, steps 1-4, is repeated once for each external reference on the page, so for a given page the total time is: T = S Dt1 + Dt2 + Dt3 + Dt4 n+1 End User DNS/Network Resolution Page Composition t2 n+1 Where n is the number of external page requisites. Browser Rendering Time HTTP Response t4 Payload Delivery Time HTTP Response t3 T1 T2 T3 T4 Connection Time Server Duration Transport Time Render Time 12/13/2013
  • 7. HTTP Connection Flow Server Client Connection setup (t1) Client’s perceived response time Request (t2) Response (t3) Handshake time Request transmission time Estimated server processing time Response transmission time The more HTTP requests & network roundtrips you require, the slower your site will be: Images, CSS, JS, DNS lookups, Redirects, #of packets 12/13/2013
  • 8. T1 – Making the Connection 1= 12/13/2013 DNS + TCP+ SSL
  • 9. T2 – THE SERVER DURATION • Let ( • U = ( r)[ • X =U* • Navg = ( r [W( r)W+1 (W+1)( r)W+1] • … so 2 = Navg/X (The response time law) ) r r W] Never mind - it’s a constant! 12/13/2013
  • 10. T3 – TCP Transport Time Single Object: 3 = Sz/R+2RTT+ idle For persistent parallel connections: 3 = (M+1)Si/Ri+[M/kNh]*3 RTTi+ idle … for 1 base HTML page with M objects, with Si bits, at bandwidth Ri, k connections per host, and Nh unique hostnames 12/13/2013
  • 11. T4 – What the Browser Does 12/13/2013
  • 13. Where are the delays? 12/13/2013
  • 14. Let’s Talk Tools Site Performance Services – Gomez Page Analysis Tools – Keynote – YSlow – WebPagestest.Org – MS Virtual RoundTrip • ‘Wholesale’ Testing Analyzer, HTTPWatch, Many – Statistical data for many page Others views under different conditions – F12 in your browser – Operational testing • ‘Retail’ Testing – Best for understanding global and – One Page or App network effects – Diagnostic – Best for functional testing
  • 15. Commercial Testing Services • Gomez, AlertSite, and Keynote toolsets are similar in many ways • Synthetic Test Setup • Test nodes in large datacenters and/or end user’s machines • Statistical data about response times • You can do this for yourself on a smaller scale at WebPageTest.org 12/13/2013
  • 16. Happy Birthday, Yslow! • Methodology – – – – DOM Crawler and Packet Sniffer More accurate Analyzes components Stats view • Implements the 14 18 22 105 YSlow Rules – All browsers except IE – Mobile bookmarklet – Best tool for page analysis
  • 17. Performance Golden Rule •80-90% of the end-user response time is spent on the frontend. •Let’s start there. • Browser cache makes a big difference • Reading resources from cache depends on: • • freshness (expiration date) validity (updates since last-modified date)
  • 18. CASE Study: BEFORE & AFTER Base Line Web Site 12/13/2013
  • 19. RULE 1: MAKE FEWER HTTP REQUESTS
  • 20. Too Many Requests! • • • • • • • * 80-90% of load time is the frontend the frontend time is dominated by HTTP HTTP requests growth since 2003: 25 to 50* each HTTP request has overhead – even with persistent connections reducing HTTP requests has the biggest impact bigger benefit for users with higher latency parallelization reduces the need for this http://www.websiteoptimization.com/speed/tweak/average-web-page/
  • 21. Too Many Requests! • But... • is it possible to reduce HTTP requests without reducing richness? • Yes: • • • • combine JS, CSS image maps CSS sprites inline images
  • 22. Combine JS and CSS • multiple scripts => one script • multiple stylesheets => one stylesheet • apache module: • http://code.google.com/p/modconcat/ • YUI Combo Handler • http://yuiblog.com/blog/2008/07/16/combohandler/
  • 23. Image Maps <img usemap="#map1" border=0 src="/images/imagemap.gif"> <map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html"> <area shape="rect" coords="36,0,66,31" href="gifts.html"> <area shape="rect" coords="71,0,101,31" href="cart.html"> <area shape="rect" coords="106,0,136,31" href="settings.html"> <area shape="rect" coords="141,0,171,31" href="help.html"> </map> • old school, CSS sprites is preferred • image maps still useful when x,y coordinates are useful, for example, in maps
  • 24. CSS Sprites • multiple CSS background images => one image <div style="background-image: url('a_lot_of_sprites.gif'); background-position: -260px -90px; width: 26px; height: 24px;"> </div> • overall size reduced • generators: – – – – Google Page Speed http://smush.it/ http://spritegen.website-performance.org/ http://stevesouders.com/examples/sprites.php
  • 25. inline images (data: URLs) • embed the content of an HTTP response in place of a URL <IMG ALT=”Shuriken" SRC="data:image/gif;base64,R0lGODl...wAIlEEADs="> • if embedded in HTML document, probably not cached => embed in stylesheet instead • base64 encoding increases total size • works in IE8 (not IE7 and earlier)
  • 26. RULE 2: USE A CDN
  • 27. Rule 2: Use a CDN • Content Delivery Network • geographically distributed servers => closer to your users • also: backups, storage, caching, absorb spikes •CDN Providers: • Akamai, Mirror Image, Limelight, Savvis, Amazon CloudFront, Voxel, CDNetworks •Dynamic content: rapidly changing or per-user • CDN your static content before dynamic
  • 28. CDN: A reverse proxy name server 198.87.82.45 ISP's DNS Resolver 198.87.82.45 198.87.82.45 User Edge/Fog Servers CDN Developer Origin Server(s)
  • 30. RULE 3: ADD AN EXPIRES HEADER
  • 31. Expires header GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Mon, 12 Oct 2009 14:57:34 GMT Cache-Control: max-age=31536000 XmoÛHþÿFÖvã*wØoq... • Expiration date determines freshness. • Can also use Cache-Control: max-age
  • 32. Expires vs. max-age • Expires works in HTTP/1.0, max-age in HTTP/1.1 • Expires is an absolute date: – 12 Oct 2009 14:57:34 GMT • max-age is # of seconds until expiration: – 31536000 • Expires relies on clock synchronization between client and server for short expirations • max-age takes precedence over Expires
  • 33. Conditional GET (IMS) sometime after 3pm PT 9/24/08: GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate If-Modified-Since: Mon, 22 Sep 2008 21:14:35 GMT HTTP/1.1 200 OK Modified 304 Not Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: validity. IMS determines gzip Expires: Fri, 26 Sep 2008 22:00:00 GMT • • IMS is used when Reload is pressed. • XmoÛHþÿFÖvã*wØoq... ETag and If-None-Match also determine validity.
  • 34. Sending Expires (Apache) • mod_expires <FilesMatch ".(gif|jpg|js|css)$"> ExpiresDefault "access plus 1 year" </FilesMatch> • sends both Expires and max-age: Expires: Mon, 12 Oct 2009 14:57:34 GMT Cache-Control: max-age=315360000
  • 35. Expires in the Wild – 2007 Images amazon.com Scripts Stylesheets % with Expires Median Age 0/62 0/3 0/1 0% 114 days aol.com 23/43 6/18 1/1 48% 217 days cnn.com 0/138 2/11 0/2 1% 227 days ebay.com 16/20 0/7 0/2 55% 140 days 1/23 0/1 0/1 4% 454 days 32/35 3/9 1/1 80% 34 days myspace.com 0/18 0/2 0/2 0% 1 day wikipedia.org 6/8 2/3 1/1 75% 1 day 23/23 4/4 1/1 100% na 0/32 0/7 0/3 0% 26 days 10/40 (25%) 2/5 (38%) 0.5/2 (27%) 12/46 (26%) froogle.google.com msn.com yahoo.com youtube.com average March 2007
  • 36. Expires in the Wild – 2008 Images Scripts Stylesheets % with Expires aol.com 26/35 13/20 1/1 71% 189 days ebay.com 48/48 6/7 2/2 98% 1 day facebook.com 93/97 20/22 20/20 96% 121 days google.com/search 1/1 0/1 0/0 50% 1 day search.live.com/results 6/6 1/1 4/4 100% na msn.com 45/45 3/3 3/3 100% na myspace.com 21/21 7/7 4/4 100% na 7/32 5/5 9/9 46% 310 days 23/23 4/4 1/1 100% na 8/27 1/1 1/1 34% unk 28/34 (83%) 6/7 (85%) (100%) 38/45 (85%) en.wikipedia.org/wiki yahoo.com youtube.com average 5/5 Median Age October 2008
  • 37. RULE 4: GZIP COMPONENTS
  • 38. Compression (encoding) GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 6230 2066 Content-Encoding: gzip function d(s) {... XmoÛHþÿFÖvã*wØoq... • typically reduces size by 70% – (6230-2066)/6230 = 67%
  • 39. Compression • Pro: • smaller transfer size • Con: • CPU cycles – on client and server • Don’t compress resources < 1K • Don’t compress resources already compressed (images) • Change server configuration to enable compressions for certain MIME types
  • 40. • March 2008 Gzip: not just for HTMLOctober2008 HTML Scripts Stylesheets aol.com amazon.com x x x ebay.com aol.com x some some facebook.com cnn.com x x x google.com/search ebay.com x x na search.live.com/results froogle.google.com x x x msn.com x deflate x deflate x myspace.com x x x en.wikipedia.org/wiki wikipedia.org x some x some x yahoo.com x x x youtube.com x some x some x gzip scripts, stylesheets, XML, JSON (not images, Flash, PDF)
  • 42. Progressive Rendering • progress indicators:* • reassure the system is working • convey how much time is left • provide something to look at • • • the web page is the progress indicator progressive rendering – draw content as soon as it's available stylesheets block progressive rendering in IE, and cause "flash" in Firefox *Jakob Nielson, http://www.useit.com/papers/responsetime.html
  • 43. Stylesheets in IE • in IE, nothing in the page is drawn until all style sheets are done downloading • reasoning: parse all rules before drawing any element, avoids having to redraw • when stylesheets are at the bottom, there is no progressive rendering => after a long delay the entire page blasts onto the screen
  • 44. Fastest feels slowest... ...and slowest feels fastest stylesheet at bottom: content finishes downloading sooner, but rendering starts later => feels slower stylesheet at top: content finishes downloading later, but rendering starts sooner => feels faster true in IE 6, 7, 8
  • 45. Flash of Unstyled Content (FOUC) • in Firefox, elements are drawn even if stylesheets aren't all downloaded • reasoning: progressive rendering makes the page feel faster (most developers will follow the spec and put their stylesheets in HEAD?) • when stylesheets are at the bottom and they change style of rendered elements, elements have to be redrawn => flash of unstyled content
  • 46. RULE 6: PUT SCRIPTS AT THE BOTTOM
  • 47. Parallel downloads • HTTP spec recommends only two connections (parallel downloads) per hostname • http://www.w3.org/Protocols/rfc2616/rfc2616sec8.html#sec8.1.4 • results in a stair-step pattern • general rule: page load time increases for every two resources added
  • 48. More connections • newer browsers open more connections per hostname domain sharding – split resources across multiple domains to increase parallelization • previous example using two domains • browser looks at name, not IP address
  • 49. • parallelization is an opportunity for improving load times
  • 50. Scripts block • Unfortunately, scripts block in two ways • downloading resources below the script • rendering elements below the script • Moving the scripts lower means less blocking
  • 51. Parallel script loading • execute scripts in order, but download them in parallel with other resources • available in newer browsers (see browserscope.org) • IE6&7 will be around for years, we have to keep them in mind, so… put scripts at the BOTTOM
  • 52. RULE 8: MAKE JS AND CSS EXTERNAL
  • 53. Inline or external? <script type='text/javascript'> var favNumber = 128; </script> OR <script type='text/javascript' src='fav.js'></script> <style> #favNumber { font-weight: bold; } </style> OR <link rel='stylesheet' type='text/css' href='fav.css'>
  • 54. doc size, # requests, cache empty cache html 50K html 50K png 10K png 10K inline 3 requests 70K faster html 20K external primed cache png 10K png 10K 1 request 50K slower html 20K css 10K js 20K css 10K js 20K png 10K png 10K 5 requests 70K slower read from cache png 10K png 10K 1 request 20K faster
  • 55. Inline or external? inline: faster, but HTML document is bigger • • external: more HTTP requests, but cached • variables • page views per user (per session) , external  • empty cache stats , external  • component re-use across pages , external  • external is typically better • main exception: home pages • best of both worlds • post-onload download • dynamic inlining
  • 57. DNS Lookups • Typically take 20-100ms, sometimes > 500ms • OS and browsers cache DNS resolutions
  • 58. Viewing DNS • in Windows • • • • • • • • • • • • • C:>ipconfig /flushdns Windows IP Configuration Successfully flushed the DNS Resolver Cache. C:>ipconfig /displaydns Windows IP Configuration www.google.com ---------------------------------------Record Name . . . . . : www.google.com Record Type . . . . . : 5 Time To Live . . . . : 43 Data Length . . . . . : 4 Section . . . . . . . : Answer CNAME Record . . . . : www.l.google.com
  • 59. TTL (Time to Live) www.amazon.com www.aol.com www.cnn.com 1 minute 1 minute 10 minutes www.ebay.com www.google.com www.msn.com 1 hour 5 minutes 5 minutes www.myspace.com www.wikipedia.org www.yahoo.com www.youtube.com 1 hour 1 hour 1 minute 5 minutes TTL < 30 minutes might not impact users March 2007
  • 60. Browser DNS Cache • IE 7 • DnsCacheTimeout: 30 minutes • KeepAliveTimeout: 1 minute • ServerInfoTimeout: 2 minutes • Firefox 2 • • • • network.dnsCacheExpiration: 1 minute network.dnsCacheEntries: 20 network.http.keep-alive.timeout: 5 minutes Fasterfox: 1 hour, 512 entries, 30 seconds
  • 61. Reducing DNS Lookups • use Keep-Alive • adding DNS lookups vs. domain sharding • identify dominant domain names, reduce non-dominant names • for dominant domains – shard across 2-4 CNAMEs
  • 63. Minification • minification: removing unnecessary characters from code (comments, white space, etc.) • obfuscation: minify as well as reduce length of symbol names (munge)
  • 64. original code YAHOO.util.CustomEvent = function(type, oScope, silent, signature) { this.type = type; this.scope = oScope || window; this.silent = silent; this.signature = signature || YAHOO.util.CustomEvent.LIST; this.subscribers = []; if (!this.silent) { } var onsubscribeType = "_YUICEOnSubscribe"; if (type !== onsubscribeType) { this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true); } }; event.js from YUI – http://developer.yahoo.com/yui/
  • 67. obfuscation costs • obfuscation typically reduces size more, but has some costs • bugs – symbol munged to "aa", namespace conflict • maintenance – tag external symbols (eg, API) • debugging – harder to read in production
  • 68. Minifying CSS • • Savings are typically less compared to JavaScript • CSS typically has fewer comments and whitespace Greater savings from CSS optimizations • merging identical rules • abbreviations • "#660066" => "#606" • "0px" => "0" • "background-color:" => "background:"
  • 70. 3xx status codes • "further action needs to be taken by the user agent in order to fulfill the request" • • • • • ��� • • 300 Multiple Choices (based on Content-Type) 301 Moved Permanently 302 Moved Temporarily (aka, Found) 303 See Other (clarification of 302) 304 Not Modified response for 305 Use Proxy conditional GET request 306 (no longer used) 307 Temporary Redirect (clarification of 302) most popular HTTP/1.1 •http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3
  • 71. redirect example Request GET / HTTP/1.1 Host: astrology.yahoo.com Response HTTP/1.1 301 Moved Permanently Location: http://shine.yahoo.com/astrology/ • Why use redirects? • prettier URLs • track traffic • authentication
  • 72. worst blocker •inserting a redirect to the HTML document is worse than how stylesheets and scripts block • all resources in the page are delayed • the user gets very little feedback (nothing in the page) • rendering, even the HTML text, is delayed • 2nd worse – redirecting to a script
  • 73. avoid redirects • Eliminate the need • base href or full URLs for resources • referer tracking • HTML 5 – A ping and LINK pingback • CNAMEs • mod_rewrite • no autoindex • Make them cacheable • 301 with future Expires • JavaScript & meta refresh with future Expires
  • 75. ETag Response Header GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Fri, 26 Sep 2008 22:00:00 GMT ETag: "19f1e-7920-4525b037f0440" XmoÛHþÿFÖvã*wØoq... XmoÛHþÿFÖvã*wØoq...
  • 76. What is an ETag •http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.11 • • • • • added in HTTP/1.1 used by clients and servers to validate expired resources more flexible than Last-Modified date "An entity tag consists of an opaque quoted string" " An entity tag MUST be unique across all versions of all entities associated with a particular resource."
  • 77. Apache ETags "19f1e-7920-4525b037f0440" "inode-size-timestamp" • inode – used by filesystems to store file type, owner, group, permissions, etc. • inode for the same file differs across servers even if file size, timestamp, and directory is the same • http://stevesouders.com/images/arrow-right-9x13.png ETag: "21f5315-d4-5d51f0c0" • http://1.cuzillion.com/images/arrow-right-9x13.png ETag: "1ee57ec-d4-5d51f0c0"
  • 78. IIS ETags "b4f35327edac51:113f" "timestamp:changenumber" • changenumber – counter to track IIS configuration changes • changenumber rarely the same across servers • http://hp.msn.com/global/c/hpv10/favicon.ico ETag: "b4f35327edac51:113f" ETag: "b4f35327edac51:e6e"
  • 79. the problem with ETags • the default ETag syntax in Apache and IIS makes it unlikely that INM will match across servers, even when the resource is the same • probability of an incorrect INM miss: (n-1)/n where "n" is the number of servers not an issue if you just have one server • http://www.apacheweek.com/issues/02-01-18 "can cause an unnecessary performance hit as resources are fetched more often than is required" • http://support.microsoft.com/kb/922703 "IIS 6.0 sends a 200 response because it considers the different change numbers to mean that [the resources] are not the same versions"
  • 80. the solution for ETags • • • • if you're not leveraging ETags, turn them off reduces size of requests and responses reduces outbound traffic from your servers increases proxy cache hit rate
  • 82. image optimization: 7 TIPS 1. 2. 3. 4. choose PNG over GIF (lossless) crush your PNGs (lossless) strip needless JPEG metadata (lossless) make all PNGs palette PNGs 5. avoid AlphaImageLoader, try PNG8 or at least _filter 6. crush generated images (lossless) 7. use CSS sprites; stay within the palette number of colors (use PNG8)
  • 85. RULE 17: USE IFRAMES SPARINGLY
  • 86. iframes • good for: • embedding content from another web site • sandboxing 3rd party JavaScript • asynchronous loading of external scripts • most expensive DOM element IE7 Firefox 2 http://stevesouders.com/hpws/iframes-none.php 290 ms 250 ms http://stevesouders.com/hpws/iframes-10.php 410 ms 437 ms http://stevesouders.com/hpws/iframes-100.php 766 ms 4300 ms
  • 87. Last Rule: SERVE STATIC RESOURCES COOKIE-FREE
  • 88. Set-Cookie response header • HTTP/1.1 200 OK • Set-Cookie: MSNPPAuth=B*eDP3m4...WELr; expires=Wed, 30-Dec-2037 16:00:00 GMT; domain=.live.com;_path=/; • • • • • domain, path, and expires in the cookie header max size ~4K (varies by browser) one header per cookie cookie is stored by the client (browser) only valid if domain matches current page
  • 89. Cookie response header • GET /results.aspx?q=flowers HTTP/1.1 • Host: search.live.com • Cookie:_MSNPPAuth=B*eDP3m4...WEL r;_SRCHUID=V=1&GUID=83F46965E902 40739918C1047F88FD26;_SRCHUSR=AU TOREDIR=0&GEOVAR=&DOB=20081129; ... • cookie sent back to server on subsequent requests that match the domain and path • all cookies sent in one request header • "; " delimited
  • 90. Cookie size cookie size (bytes) comments aol.com 494 "stay signed in" checked ebay.com 1038 "keep me signed in" checked facebook.com 990 "remember me" checked google.com/search 417 logged in to iGoogle and YouTube search.live.com/results 1938 "remember me" and "remember my password" checked msn.com 1063 logged in thru search.live.com myspace.com 2027 "remember me" checked en.wikipedia.org/wiki 134 "remember me" checked yahoo.com 677 "keep me signed in" checked youtube.com 597 also logged in to iGoogle total size of all cookies November 2008
  • 91. Cookie impact cookie size response time delta 500 bytes 1 ms 1000 bytes 1500 bytes 2000 bytes 16 ms 31 ms 47 ms 2500 bytes 3000 bytes 63 ms 78 ms • cookies on static resources multiplies the delay • largest packet MTU (Maximum Transmission Unit) for Ethernet: 1500 bytes
  • 92. • • • • • • • • • Live Search cookies sent http://search.live.com/results.aspx?q= flowers http://search.live.com/.../brand_c.css http://search.live.com/.../serp_c.css http://search.live.com/.../scopebar2_c .css http://search.live.com/.../answerAll_c .css http://search.live.com/.../asset4.gif http://search.live.com/.../cbcoin.gif http://search.live.com/.../main.js seven static resources contain the Cookie request header (1938 bytes), even though cookies don't affect the response • 7 x 1938 bytes = 13.5K (upstream!)
  • 93. Static resource cookie size cookie size (bytes) static resources on same domain wasted bytes aol.com 494 2 988 ebay.com 1038 0 0 facebook.com 990 2 1980 google.com/search 417 5 2085 search.live.com/results 1938 7 13,566 msn.com 1063 1 1063 myspace.com 2027 2 4,054 en.wikipedia.org/wiki 134 8 1072 yahoo.com 677 0 0 youtube.com 597 1 597 November 2008
  • 94. cookie-free static content • takeaway: serve static content without cookies • different domain (rule 2 – use a CDN) • different path ("/app" versus "/images")
  • 95. CASE Study: AFTER Optimized Web Site 12/13/2013
  • 96. The 7 Habits of Exceptional Performance 1. 2. 3. 4. 5. 6. 7. Make Performance a Priority Test, Measure, Test Again Learn about the Tools Balance Performance with Features Track Results Over Time Set Targets Ask Questions; Check It for Yourself!
  • 97. making the Web Smarter and Faster • Faster HTTP • SPDY • HTTP Speed+Mobility • Better Browsers • Chrome has disrupted the market • HTML5 will drive further evolution • Moving to Mobile/Device Platforms • More sensitive to network effects of all kinds • Application-driven user experience • Moving away from Hypertext? • 12/13/2013

Editor's Notes

  1. People love fast web sites, but up until now developers have been focusing on the wrong area. Network (TCP, buffers, routing) performance and Backend (web server, database, etc.) performance are important for reducing hardware costs and improving efficiency, but for most pages 80% of the load time is spent on the frontend (HTML, CSS, JavaScript, images, iframes, and others). We will talk about the best practices for making web pages faster, provide case study from top web site, and introduce the tools we use for researching performance. In addition to know how to improve web performance, we will also try to gain an understanding of the fundamentals of how the Internet works including DNS, HTTP, and browsers.
  2. These are good problems to have.
  3. Oracle PerformanceTuning, 2nd Edition By Peter Corrigan, Mark GurryIn most of the systems, the performance is response time. RT
  4. In the next 5 slides, you will see some equations. I am going to the deep details of those because some of you guys here are experts in that area. We are going to move fast and then jump into today’s main topics on frontend engineering.
  5. We will talk about persistent connection standard changes in HTTP 1.1 later in this presentation.
  6. Waterfall
  7. Yslow turns 5 last month.
  8. HTML page 20k, JS 20K, CSS 10K
  9. http://search.live.com/results.aspx?q=flowers http://search.live.com/fd/sa/4_11_0_261944/brand_c.css http://search.live.com/sa/4_11_0_261944/serp_c.css http://search.live.com/fd/sa/4_11_0_261944/scopebar2_c.css http://search.live.com/sa/4_11_0_261944/answerAll_c.css http://search.live.com/fd/s/live/asset4.gif http://search.live.com/s/cbcoin.gif http://search.live.com/fd/sa/4_11_0_261944/main.js http://search.live.com/fd/ls/l
  10. Heresy!