Web performanceOptimization

Gilles GuirandKaliop CTO@gandbox

HOSTING SERVICES CODE

XHTML

CRON3-PARTS

CSS

JavaScript

AJAX calls

DNS

Medias

OSI/O perfCPURAMNetworkSizingBackup...

Back-end Front-end

DEVELOPERSYS. ADMIN

FRONT-END

END-USERCUSTOMER

DIGITAL

MARKETING

?No 404 or 500 ?

Not so bad ?

Responsive ?

SEO ?

Elegant ? Fast ? Slow ?No alerts ?Doesn’t burn ?

something to care ?

Real life performance : concerns ?

NFS

SMTP

APIs Drupal tasksSys. tasks

DELIVERY

HOSTING SERVICES CODE

XHTML

CSS

JavaScript

AJAX calls

Medias

OSI/O perfCPURAMNetworkSizingBackup... APIs Drupal tasks

Sys. tasks

Back-end Front-end

Real life performance : common issues ?

DNS

CRON3-PARTS

NFS

SMTP

DELIVERY

Ok, you mean devOps...

Ok, you mean devOps...

devOps culture ?

SERVICES

Services config & finetune :Who is supposed to setup Varnish ?

Is there some finetuning for memcached ?Where can i read the services configs ?

Metrics :Which metrics to collect ?

My customer ask for some metrics !?Is possible to collect slow pages / SQL / Solr ?

devOps culture ?

Metrics :Which metrics to collect ?

My customer ask for some metrics !?Is possible to collect slow pages / SQL / Solr ?

devOps culture ?

Metrics :Which metrics to collect ?

My customer ask for some metrics !?Is possible to collect slow pages / SQL / Solr ?

devOps culture ?

Metrics :Which metrics to collect ?

My customer ask for some metrics !?Is possible to collect slow pages / SQL / Solr ?

… Apache, nginx, elasticsearch, solr, haproxy, memcached, redis, APC, mongoDB, postgre...

devOps culture ?

Metrics :Which metrics to collect ?

My customer ask for some metrics !?Is possible to collect slow pages / SQL / Solr ?

devOps culture ?

Load test :Which user stories to use ?

How to link the load & code impact ?

devOps culture ?

devOps culture ?

SERVICES

Deployment :How to deploy a Varnish+code improvement ?

How to purge selective cache ?

cURL purges...

devOps culture ?

SERVICES

CI / testing / local dev :How to trig performances regressions ?Can i run/test the whole stack locally ?

Deployment

devOps culture ?

modern application ?

HEADER

FOOTER

breadcrumb

User profilingContent listContent list

ANONYMOUS

ANONYMOUS

ANONYMOUS

USER GROUP USER

HTTP CacheESI Processing

http://foshttpcachebundle.readthedocs.org/en/latest/

HOSTING SERVICES CODE

XHTML

CSS

JavaScript

AJAX calls

Medias

OSI/O perfCPURAMNetworkSizingBackup... APIs Drupal tasks

Sys. tasks

Back-end Front-end

Real life performance : common issues ?

DNS

CRON3-PARTS

NFS

SMTP

DELIVERY

Why so big ?

front-endOptim.

XHTML

CSS

JavaScript

AJAX calls

Medias

DNS

Why so big ?

Because it is the big part !

98%Nothinghow they know ?

Front-end Optimization

Find some front-end best practices to reduce the load time ?

But, not those proposed by YSlow / Google Page Speed ?

front-endOptim.

Real life performance : RUM (Real User Monitoring)

W3C //Navigation timing API

https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

front-endOptim.

Real life performance : RUM (Real User Monitoring)

http://caniuse.com/#feat=nav-timing

front-endOptim.

Real life performance : RUM (Real User Monitoring)

http://caniuse.com/#feat=nav-timing

front-endOptim.

Real life performance : RUM (Real User Monitoring)

front-endOptim.

Real life performance : RUM (Real User Monitoring)

front-endOptim.

Real life performance : RUM (Real User Monitoring)

front-endOptim.

Real life performance : RUM (Real User Monitoring)

DomComplete

~20 sec of nothing !?

Tricky use-case

~50% of taric come from backlinks (newsletter, socials, apps...)

What about RUM ?Do i have to care about DNS lookup ?

Do i have to care about browser ?Do i have to care about domReady ?

Newsletter

backlink

websiteArticle

CN/AsiaHTTP 302

CN/IrlandHTTP 302

CN/IrlandHTTPS 302

SSL

CNCN

Need SSL SSLSmooth

login

?

Tracking

Tricky use-case

~50% of taric come from backlinks (newsletter, socials, apps...)

What about RUM ?

RUM can not track HTTP redirectionsRUM does not work with IE8

Newsletter

backlink

websiteArticle

CN/AsiaHTTP 302

CN/IrlandHTTP 302

CN/IrlandHTTPS 302

SSL

CNCN

Need SSL SSLSmooth

login

?

Tracking

Tricky use-case

~50% of taric come from backlinks (newsletter, socials, apps...)

Do i have to care about DNS lookup ?

YES ! Especially with china / india, etc.Think about DNS-Prefetch

Newsletter

backlink

websiteArticle

CN/AsiaHTTP 302

CN/IrlandHTTP 302

CN/IrlandHTTPS 302

SSL

CNCN

Need SSL SSLSmooth

login

?

Tracking

<link rel="dns-prefetch" href="http://www.mydomain.com/">

Tricky use-case

~50% of taric come from backlinks (newsletter, socials, apps...)

Do i have to care about browser ?Do i have to care about domReady ?

YES ! IE8 is still the 1st browser in chinaIE8 does not support ASYNC JavaScript (domready killer)

IE8 Selectivizr is a perf killer (avoid)Do you know 360 Browser & WeChat apps ?

Newsletter

backlink

websiteArticle

CN/AsiaHTTP 302

CN/IrlandHTTP 302

CN/IrlandHTTPS 302

SSL

CNCN

Need SSL SSLSmooth

login

?

Tracking

front-endOptim.

Real life performance : RUM (Real User Monitoring)

DomComplete

~20 sec of nothing !?

Tricky use-case

~50% of taric come from backlinks (newsletter, socials, apps...)

Newsletter

backlink

websiteArticle

CN/AsiaHTTP 302

CN/IrlandHTTP 302

CN/IrlandHTTPS 302

SSL

CNCN

Need SSL SSLSmooth

login

?

Tracking

?

Web performanceOptimization

Conclusion ?

HOSTING SERVICES CODE

XHTML

CRON3-PARTS

CSS

JavaScript

AJAX calls

DNS

Medias

OSI/O perfCPURAMNetworkSizingBackup...

Back-end Front-end

YOUYOU

YOU

YOUYOU

YOU

YOUYOU

No 404 or 500 ?Not so bad ?

Responsive ?

SEO ?

Elegant ? Fast ? Slow ?No alerts ?Doesn’t burn ?

something to care ?

Advices / approach ?

NFS

SMTP

APIs Drupal tasksSys. tasks

DELIVERY

Is “perf master” a new job ?Rebirth of “fullstack developer ?”

Question ?

Gilles GuirandKaliop CTO@gandbox