SlideShare a Scribd company logo
High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance http://developer.yahoo.com/performance PHP Quebec,  March 13, 2008
The sluggish Web We’re getting used to the web as a tool for our day-to-day tasks We all want a nice user experience We won’t tolerate slow pages (we have options) 500 ms slower = 20% drop in traffic (Google) 100 ms slower = 1% drop in sales (Amazon)
This talk How to improve page performance Focus on the front-end 14 best practices for faster pages …  and 20 more!
Exceptional Performance at Yahoo! Quantify and improve the performance of all Yahoo! products worldwide Center of expertise Build tools, analyze data Gather, research, and evangelize best practices - internally and externally
 
The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88%
Focus on the front-end 80-90% of the time Easier than the back-end Proven to work
List of 14 best practices  (updated) Make Fewer HTTP Requests Use a Content Delivery Network Add Expires header  (or Cache-control) Gzip Components Put CSS at the Top Move Scripts to the Bottom  (inline too) Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript  and CSS (inline too) Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable http://developer.yahoo.com/performance/rules.html   content server server server server javascript javascript javascript javascript content css css css css content content
YSlow Yahoo!’s performance lint tool Extension to the Firebug extension to Firefox Checks for compliance with the best practices Grades (offends) http://developer.yahoo.com/yslow/
 
The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult
After YSlow &quot;A&quot;? Flush the buffer early Use GET for AJAX requests Post-load components Preload components Reduce the number of DOM elements Split components across domains Minimize the number of iframes No 404s Reduce cookie size Use cookie-free domains for components Minimize DOM access Develop smart event handlers  Choose <link> over @import Avoid filters Optimize images Optimize CSS sprites Don't scale images in HTML Make favicon.ico small and cacheable Keep components under 25K Pack components into a multipart document content javascript javascript content content content content server server css css images images images images mobile mobile cookie cookie content
Part I Review of 14 best practices  (updated)
Make Fewer HTTP Requests Less components = fast page HTTP Request overhead Combine scripts, combine stylesheets, combine images into CSS sprites
CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/
Use a Content Delivery Network For static components Content closer to your users Akamai, Amazon S3
Add Expires header  (or Cache-control) For static components “ Never expire” policy, far future  Expires  header Once a component is served, the browser never asks for it again When you need to change a component, rename it Apache example: ExpiresActive On  ExpiresDefault &quot;modification plus 10 years&quot;  For dynamic components Use  Cache-control Help the browser send  If-Modified-Since Writeup on YUI blog/YDN coming up, stay tuned
Gzip Components You send zipped content over the wire, the browser unpacks it Modern browsers understand compressed content Search engine spiders do too Request header   Accept-Encoding: gzip,deflate   Response header   Content-Encoding: gzip   All text components should be sent gzipped:  html (php), js, css, xml, txt…
Put CSS at the Top Firefox and IE will not render anything before the last piece of CSS arrives over the wire Even CSS that is not needed such as @media print Place the stylesheets as early as possible in the document <head> <title>My page</title> <link href=“styles.css” …/> </head> <body> <!-- content -->
Move Scripts to the Bottom  (inline too) Scripts block downloads The browser’s logic: since this script can do  location.href  or  document.write  at any time, why download possibly useless components Move scripts to the bottom to remove the download block Inline scripts too <!-- content --> <script src=“script.js” …/> </body> </html>
Avoid CSS Expressions CSS expression: #content {  position: absolute;  left: expression(document.body.offsetWidth+‘px’); }  IE-only way to have JavaScript in CSS They tend to get executed more often than you planned, think  onmousemove  often Smart expressions overwrite themselves
Make JavaScript and CSS External Helps with caching, “never expire” policy Share with other pages But this is two more HTTP requests Homepages might consider inlining yahoo.com
Reduce DNS Lookups Browser needs to map domain name to an IP address DNS lookups take time 2-4 domains per page
Minify JavaScript  and CSS (inline too) Minify, but still gzip JSMin (written in JavaScript, but has a PHP port) YUI compressor – minifies CSS too Inline styles and scripts should also be minified
Minify: before /** * The dom module provides helper methods for  *  manipulating Dom elements. * @module dom * */ (function() { var Y = YAHOO.util,  // internal shorthand getStyle,  // for load time browser branching setStyle,  // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {},  // cache regexes for className document = window.document;  // cache for faster lookups YAHOO.env._id_counter = YAHOO.env._id_counter || 0;
Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;
Avoid Redirects A wasted HTTP request Causes a restart
Remove Duplicate Scripts Duh! IE might decide to download them again
Configure ETags ETags are meant to help with caching A component served from server A has a different ETag than the same component served from B Configure ETags not to include inode …  or just remove them and implement “never expire” policy Apache default  FileETag INode MTime Size   Change to  FileETag None
Make AJAX Cacheable Content returned from  XMLHttpRequest s is like any other component Should be gzipped Could be cached Cache-control: max-age=?
Part II After YSlow “A”: 20 more best practices
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Flush the buffer early Let the browser start fetching components while your backend is busy PHP has the function  flush() Best for busy backends / light frontends ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content --> Case Study: Yahoo! Search
Use GET for AJAX requests GET is for retrieving data POST is a two-step process (send headers, send data) GET request is one TCP packet (unless you have a lot of cookies) Max URL length 2K (because of IE) POST without actually posting data is like GET Yahoo! Mail Research
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Post-load components Ask yourself: what's absolutely required in order to render the page initially? The rest can wait (drag and drop, animations, hidden content, images below the fold) JavaScript is ideal candidate for splitting YUI Image Loader YUI Get Utility
Post-load components Case study: yahoo.com onload.js and onload.css Progressive enhancement
Preload components Preload Items you'll need in the future Unconditional preload (google.com loads a sprite onload) Conditional preload (search.yahoo.com after you type in the input box) Anticipated preload – preload in advance before launching a redesign
Preload components (contd.) Unconditional preload example
Preload components (contd.) Conditional preload example – search.yahoo.com When you start typing the page can safely assume you’ll hit the search results page Time to preload
Reduce the number of DOM elements World's fastest page?  about:blank ! A complex page means more bytes to download It also means slower DOM access in JavaScript It also may mean using semantically incorrect markup (like nested tables or abusing  <div> s) Use semantic markup Use YUI's reset.css, fonts.css, grids.css Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length yahoo.com is a busy page and still under 700 elements (HTML tags)
Split components across domains Maximize parallel downloads But not more than 2-4 domains, because of the DNS lookup penalty www.example.org  – HTML content static.example.org  – Static components Future: IE8 will allow 6 requests per domain
Split components (contd.) 2 components in parallel 8 components in parallel
Minimize the number of iframes <iframe>  pros: Can help with slow third-party content like badges and ads Security sandbox You can download scripts in parallel <iframe>  cons: They have a cost even if blank They block page onload Non-semantic
No 404s 404 Not Found Useless downloads Some sites have helpful 404s “Did you mean X?”… …  which uses server resources (DB, etc) When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it
No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Reduce cookie size Eliminate unnecessary cookies Keep cookie sizes as low as possible to minimize the impact on the user response time Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time
Cookie-free hosting for components Option 1: Separate subdomain (static.example.org) Option 2: A new TLD (e.g. yimg.com, ytimg.com,  images-amazon.com) Proxies might refuse to cache www.www-yes.org vs www-no.org? no-www leaves you no choice but to write cookies to *.example.org
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Minimize DOM access DOM access is the slowest Cache Update nodes “offline” and then add them to the tree Avoid fixing layout with JavaScript
Develop smart event handlers Don't wait for  onload , use  DOMContentLoaded Events bubble up, so use delegation (attach listeners to outer elements) Clean up to prevent IE memory leaks Careful with onresize Use YUI Event utility
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Choose  <link>  over  @import CSS should be at the top In IE  @import  is the same as putting  <link>  at the bottom
Avoid filters IE proprietary AlphaImageLoader   Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine Blocks rendering, freezes the browser Increased memory consumption  Per element, not per image! Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack  _filter  not to penalize IE7+ users
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Optimize images GIF - don't use a bigger palette than you need Use PNGs instead of GIFs “ All we are saying is: Give PiNG a Chance!&quot; pngcrush tool (or optipng, or pngoptimizer) Removing gamma chunks also helps with cross-browser colors Strip comments jpegtran - lossless JPEG operations, can be used to optimize and remove comments
Optimize images (contd.) You can write a simple tool that walks your image directories before site launch and does the following: Convert all GIFs to PNGs (and check if there’s a saving)   > convert image.gif image.png Crush all PNGs   > pngcrush image.png –rem alla –reduce result.png Strip comments from JPEGs  > jpegtran -copy none -optimize -perfect src.jpg dest.jpg
Optimize images (contd.) You’d be surprised how many sites, from small to huge, could optimize the download size 200K of useless image information sent over the wire for a single page?!
Optimize CSS sprites Choose horizontal over vertical when possible Combine similar colors  Keep color count low (<256) to fit in a PNG8 “ Be mobile-friendly” – don’t leave big gaps Filesize doesn’t increase much, but the image needs to be decompressed into a pixel map 100x100 is 10000 pixels 1000x1000 is 1 Million pixels Case study: Yahoo! Mail Classic
Optimize sprites
Don't scale images in HTML Downloads unnecessary bytes If you need <img width=&quot;100&quot; height=&quot;100&quot; src=&quot;mycat.jpg&quot; /> then have  mycat.jpg  100x100 not 500x500
Make favicon.ico small and cacheable  www.example.org/favicon.ico Necessary evil: The browser will request it Better not respond with a 404 Cookies are sent Cannot be on CDN Interferes with the download sequence Make it small (<= 1K)  Animated favicons are not cool Set Expires header Tools: imagemagick, png2ico Case study: Yahoo! Search - favicon.ico is 9% of all page views!
Bonus: crossdomain.xml Cross domain policy for Flash/Flex Sits in the root:  example.org/crossdomain.xml <cross-domain-policy> <allow-access-from  domain=&quot;*.yahoo.com&quot; secure=&quot;false&quot;/> </cross-domain-policy> Set  Expires  header gzip …  and secure while at it, don’t do: <allow-access-from domain=&quot;*“ />
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Keep components under 25K Because iPhone won’t cache them Uncompressed  size under 25Kb Minify HTML in addition to JS and CSS
Pack components into a multipart document For UAs that support it (iPhone doesn’t) Like an email with attachments
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Tools YSlow ( http:// developer.yahoo.com/yslow / ) Fiddler ( http:// www.fiddlertool.com /fiddler/ ) IBM Page Detailer ( http:// www.alphaworks.ibm.com/tech/pagedetailer ) HTTPWatch ( http:// www.httpwatch.com / ) AOL Pagetest ( http:// pagetest.wiki.sourceforge.net / ) Firebug Net Panel ( http:// www.getfirebug.com / )
IBM Page Detailer Methodology Packet Sniffer Competitive Advantage Most accurate Provides detailed data Works for any browser Best waterfall view Drawbacks Requires a download 90 day free trial Runs only on Windows Misses cached components
Firebug NET Panel Methodology Packet Sniffer Competitive Advantage Integrated with Firebug Displays waterfall view Provides HTTP header info Drawbacks Runs only in Firefox Inaccurate waterfall view No render time No parse time No redirects No DNS lookups Misses cached components
URLs – Exceptional Performance YUI blog  http://yuiblog.com/blog/category/performance/   YDN (Yahoo Developer Network)  http://developer.yahoo.com/performance/   YDN blog http://developer.yahoo.net/blog/archives/performance/   Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional-performance/   Feedback http://developer.yahoo.com/yslow/feedback.html
URLs (contd.) &quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ &quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ YUI Image Loader ( http:// developer.yahoo.com/yui/imageloader / ) YUI Get ( http://developer.yahoo.com/yui/get/ ) YUI Compressor ( http:// developer.yahoo.com/yui/compressor /  contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter,  http://foohack.com/ ) JSMin ( http:// www.crockford.com/javascript/jsmin.html ) &quot;High-performance AJAX applications&quot; Julien Lecompte  http://yuiblog.com/blog/2007/12/20/video-lecomte/ Yahoo! engineer Michael J. Radwin talk back in 2004 http:// www.radwin.org/michael/talks /
Credits – thank you!
Take-home Focus on the front-end Harvest the low hanging fruit Be an advocate for your users Start early
Thank you! Merci beaucoup!

More Related Content

What's hot

20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
Amazon Web Services Japan
 
Amazon Web Services
Amazon Web ServicesAmazon Web Services
Amazon Web Services
Andrew Wong
 
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
Amazon Web Services Japan
 
深入淺出 AWS 混合式雲端架構
深入淺出 AWS 混合式雲端架構 深入淺出 AWS 混合式雲端架構
深入淺出 AWS 混合式雲端架構
Amazon Web Services
 
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
Amazon Web Services Korea
 
Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)
Vendic Magento, PWA & Marketing
 
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Web Services Korea
 
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
Amazon Web Services Japan
 
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.020191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
Amazon Web Services Japan
 
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
Amazon Web Services Japan
 
Aws container webinar day 2
Aws container webinar day 2Aws container webinar day 2
Aws container webinar day 2
HoseokSeo7
 
EKS Workshop
 EKS Workshop EKS Workshop
EKS Workshop
AWS Germany
 
Aws container webinar day 1
Aws container webinar day 1Aws container webinar day 1
Aws container webinar day 1
HoseokSeo7
 
20200721 AWS Black Belt Online Seminar AWS App Mesh
20200721 AWS Black Belt Online Seminar AWS App Mesh20200721 AWS Black Belt Online Seminar AWS App Mesh
20200721 AWS Black Belt Online Seminar AWS App Mesh
Amazon Web Services Japan
 
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Amazon Web Services
 
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Amazon Web Services
 
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3MDEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
Amazon Web Services
 
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
Amazon Web Services Japan
 
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
Amazon Web Services Japan
 
20200826 AWS Black Belt Online Seminar AWS CloudFormation
20200826 AWS Black Belt Online Seminar AWS CloudFormation 20200826 AWS Black Belt Online Seminar AWS CloudFormation
20200826 AWS Black Belt Online Seminar AWS CloudFormation
Amazon Web Services Japan
 

What's hot (20)

20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
 
Amazon Web Services
Amazon Web ServicesAmazon Web Services
Amazon Web Services
 
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
 
深入淺出 AWS 混合式雲端架構
深入淺出 AWS 混合式雲端架構 深入淺出 AWS 混合式雲端架構
深入淺出 AWS 混合式雲端架構
 
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
 
Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)
 
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
 
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
 
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.020191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
 
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
 
Aws container webinar day 2
Aws container webinar day 2Aws container webinar day 2
Aws container webinar day 2
 
EKS Workshop
 EKS Workshop EKS Workshop
EKS Workshop
 
Aws container webinar day 1
Aws container webinar day 1Aws container webinar day 1
Aws container webinar day 1
 
20200721 AWS Black Belt Online Seminar AWS App Mesh
20200721 AWS Black Belt Online Seminar AWS App Mesh20200721 AWS Black Belt Online Seminar AWS App Mesh
20200721 AWS Black Belt Online Seminar AWS App Mesh
 
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
 
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
 
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3MDEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
 
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
 
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
 
20200826 AWS Black Belt Online Seminar AWS CloudFormation
20200826 AWS Black Belt Online Seminar AWS CloudFormation 20200826 AWS Black Belt Online Seminar AWS CloudFormation
20200826 AWS Black Belt Online Seminar AWS CloudFormation
 

Viewers also liked

Sphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in DrupalSphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in Drupal
elliando dias
 
Not Only Drupal
Not Only DrupalNot Only Drupal
Not Only Drupal
mcantelon
 
Basic Crud In Django
Basic Crud In DjangoBasic Crud In Django
Basic Crud In Django
mcantelon
 
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSPost css - Getting start with PostCSS
Post css - Getting start with PostCSS
Neha Sharma
 
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSHTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
Dinis Correia
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
景智 張
 
MetaZeta Clusters Overview
MetaZeta Clusters OverviewMetaZeta Clusters Overview
MetaZeta Clusters Overview
Paul Baclace
 
Css position
Css positionCss position
Css position
Webtech Learning
 
CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest
 
Computational genomics approaches to precision medicine
Computational genomics approaches to precision medicineComputational genomics approaches to precision medicine
Computational genomics approaches to precision medicine
Altuna Akalin
 
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Altuna Akalin
 
Css positioning
Css positioningCss positioning
Css positioning
Gerson Abesamis
 
Danger Of Free
Danger Of FreeDanger Of Free
Danger Of Free
Alex Iskold
 
Collaborative Filtering and Recommender Systems By Navisro Analytics
Collaborative Filtering and Recommender Systems By Navisro AnalyticsCollaborative Filtering and Recommender Systems By Navisro Analytics
Collaborative Filtering and Recommender Systems By Navisro Analytics
Navisro Analytics
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
Sandhika Galih
 
The Physics of Fast Image Compression
The Physics of Fast Image CompressionThe Physics of Fast Image Compression
The Physics of Fast Image Compression
Cloudinary
 
Apache Mesos at Twitter (Texas LinuxFest 2014)
Apache Mesos at Twitter (Texas LinuxFest 2014)Apache Mesos at Twitter (Texas LinuxFest 2014)
Apache Mesos at Twitter (Texas LinuxFest 2014)
Chris Aniszczyk
 
Keynote: Apache HBase at Yahoo! Scale
Keynote: Apache HBase at Yahoo! ScaleKeynote: Apache HBase at Yahoo! Scale
Keynote: Apache HBase at Yahoo! Scale
HBaseCon
 
An Abusive Relationship with AngularJS
An Abusive Relationship with AngularJSAn Abusive Relationship with AngularJS
An Abusive Relationship with AngularJS
Mario Heiderich
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 

Viewers also liked (20)

Sphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in DrupalSphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in Drupal
 
Not Only Drupal
Not Only DrupalNot Only Drupal
Not Only Drupal
 
Basic Crud In Django
Basic Crud In DjangoBasic Crud In Django
Basic Crud In Django
 
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSPost css - Getting start with PostCSS
Post css - Getting start with PostCSS
 
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSHTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
MetaZeta Clusters Overview
MetaZeta Clusters OverviewMetaZeta Clusters Overview
MetaZeta Clusters Overview
 
Css position
Css positionCss position
Css position
 
CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?
 
Computational genomics approaches to precision medicine
Computational genomics approaches to precision medicineComputational genomics approaches to precision medicine
Computational genomics approaches to precision medicine
 
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
 
Css positioning
Css positioningCss positioning
Css positioning
 
Danger Of Free
Danger Of FreeDanger Of Free
Danger Of Free
 
Collaborative Filtering and Recommender Systems By Navisro Analytics
Collaborative Filtering and Recommender Systems By Navisro AnalyticsCollaborative Filtering and Recommender Systems By Navisro Analytics
Collaborative Filtering and Recommender Systems By Navisro Analytics
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
The Physics of Fast Image Compression
The Physics of Fast Image CompressionThe Physics of Fast Image Compression
The Physics of Fast Image Compression
 
Apache Mesos at Twitter (Texas LinuxFest 2014)
Apache Mesos at Twitter (Texas LinuxFest 2014)Apache Mesos at Twitter (Texas LinuxFest 2014)
Apache Mesos at Twitter (Texas LinuxFest 2014)
 
Keynote: Apache HBase at Yahoo! Scale
Keynote: Apache HBase at Yahoo! ScaleKeynote: Apache HBase at Yahoo! Scale
Keynote: Apache HBase at Yahoo! Scale
 
An Abusive Relationship with AngularJS
An Abusive Relationship with AngularJSAn Abusive Relationship with AngularJS
An Abusive Relationship with AngularJS
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 

Similar to High Performance Web Pages - 20 new best practices

Frontend performance
Frontend performanceFrontend performance
Frontend performance
sacred 8
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Siarhei Barysiuk
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
Frederick Townes
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
Peter Lubbers
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
Craig Walker
 
Speed!
Speed!Speed!
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Jonathan Klein
 
Html5
Html5Html5
A Holistic View of Website Performance
A Holistic View of Website PerformanceA Holistic View of Website Performance
A Holistic View of Website Performance
Rene Churchill
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
Eric ShangKuan
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
George Ang
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
Adam Norwood
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
Smile I.T is open
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
Adam Lu
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
Jeff Wisniewski
 
improve website performance
improve website performanceimprove website performance
improve website performance
amit Sinha
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
Patrick Huesler
 

Similar to High Performance Web Pages - 20 new best practices (20)

Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 
Speed!
Speed!Speed!
Speed!
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
 
Html5
Html5Html5
Html5
 
A Holistic View of Website Performance
A Holistic View of Website PerformanceA Holistic View of Website Performance
A Holistic View of Website Performance
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
 
improve website performance
improve website performanceimprove website performance
improve website performance
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 

More from Stoyan Stefanov

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
Stoyan Stefanov
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
Stoyan Stefanov
 
Liking performance
Liking performanceLiking performance
Liking performance
Stoyan Stefanov
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
Stoyan Stefanov
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
Stoyan Stefanov
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
Stoyan Stefanov
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
Stoyan Stefanov
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
Stoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
Stoyan Stefanov
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
Stoyan Stefanov
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
Stoyan Stefanov
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
Stoyan Stefanov
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
Stoyan Stefanov
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
Stoyan Stefanov
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
Stoyan Stefanov
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
Stoyan Stefanov
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
Stoyan Stefanov
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
Stoyan Stefanov
 

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
Liking performance
Liking performanceLiking performance
Liking performance
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 

Recently uploaded

Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
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
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
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
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
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
 

Recently uploaded (20)

Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
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
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.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
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
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
 

High Performance Web Pages - 20 new best practices

  • 1. High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance http://developer.yahoo.com/performance PHP Quebec, March 13, 2008
  • 2. The sluggish Web We’re getting used to the web as a tool for our day-to-day tasks We all want a nice user experience We won’t tolerate slow pages (we have options) 500 ms slower = 20% drop in traffic (Google) 100 ms slower = 1% drop in sales (Amazon)
  • 3. This talk How to improve page performance Focus on the front-end 14 best practices for faster pages … and 20 more!
  • 4. Exceptional Performance at Yahoo! Quantify and improve the performance of all Yahoo! products worldwide Center of expertise Build tools, analyze data Gather, research, and evangelize best practices - internally and externally
  • 5.  
  • 6. The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88%
  • 7. Focus on the front-end 80-90% of the time Easier than the back-end Proven to work
  • 8. List of 14 best practices (updated) Make Fewer HTTP Requests Use a Content Delivery Network Add Expires header (or Cache-control) Gzip Components Put CSS at the Top Move Scripts to the Bottom (inline too) Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS (inline too) Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable http://developer.yahoo.com/performance/rules.html content server server server server javascript javascript javascript javascript content css css css css content content
  • 9. YSlow Yahoo!’s performance lint tool Extension to the Firebug extension to Firefox Checks for compliance with the best practices Grades (offends) http://developer.yahoo.com/yslow/
  • 10.  
  • 11. The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult
  • 12. After YSlow &quot;A&quot;? Flush the buffer early Use GET for AJAX requests Post-load components Preload components Reduce the number of DOM elements Split components across domains Minimize the number of iframes No 404s Reduce cookie size Use cookie-free domains for components Minimize DOM access Develop smart event handlers Choose <link> over @import Avoid filters Optimize images Optimize CSS sprites Don't scale images in HTML Make favicon.ico small and cacheable Keep components under 25K Pack components into a multipart document content javascript javascript content content content content server server css css images images images images mobile mobile cookie cookie content
  • 13. Part I Review of 14 best practices (updated)
  • 14. Make Fewer HTTP Requests Less components = fast page HTTP Request overhead Combine scripts, combine stylesheets, combine images into CSS sprites
  • 15. CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/
  • 16. Use a Content Delivery Network For static components Content closer to your users Akamai, Amazon S3
  • 17. Add Expires header (or Cache-control) For static components “ Never expire” policy, far future Expires header Once a component is served, the browser never asks for it again When you need to change a component, rename it Apache example: ExpiresActive On ExpiresDefault &quot;modification plus 10 years&quot; For dynamic components Use Cache-control Help the browser send If-Modified-Since Writeup on YUI blog/YDN coming up, stay tuned
  • 18. Gzip Components You send zipped content over the wire, the browser unpacks it Modern browsers understand compressed content Search engine spiders do too Request header Accept-Encoding: gzip,deflate Response header Content-Encoding: gzip All text components should be sent gzipped: html (php), js, css, xml, txt…
  • 19. Put CSS at the Top Firefox and IE will not render anything before the last piece of CSS arrives over the wire Even CSS that is not needed such as @media print Place the stylesheets as early as possible in the document <head> <title>My page</title> <link href=“styles.css” …/> </head> <body> <!-- content -->
  • 20. Move Scripts to the Bottom (inline too) Scripts block downloads The browser’s logic: since this script can do location.href or document.write at any time, why download possibly useless components Move scripts to the bottom to remove the download block Inline scripts too <!-- content --> <script src=“script.js” …/> </body> </html>
  • 21. Avoid CSS Expressions CSS expression: #content { position: absolute; left: expression(document.body.offsetWidth+‘px’); } IE-only way to have JavaScript in CSS They tend to get executed more often than you planned, think onmousemove often Smart expressions overwrite themselves
  • 22. Make JavaScript and CSS External Helps with caching, “never expire” policy Share with other pages But this is two more HTTP requests Homepages might consider inlining yahoo.com
  • 23. Reduce DNS Lookups Browser needs to map domain name to an IP address DNS lookups take time 2-4 domains per page
  • 24. Minify JavaScript and CSS (inline too) Minify, but still gzip JSMin (written in JavaScript, but has a PHP port) YUI compressor – minifies CSS too Inline styles and scripts should also be minified
  • 25. Minify: before /** * The dom module provides helper methods for * manipulating Dom elements. * @module dom * */ (function() { var Y = YAHOO.util, // internal shorthand getStyle, // for load time browser branching setStyle, // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {}, // cache regexes for className document = window.document; // cache for faster lookups YAHOO.env._id_counter = YAHOO.env._id_counter || 0;
  • 26. Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;
  • 27. Avoid Redirects A wasted HTTP request Causes a restart
  • 28. Remove Duplicate Scripts Duh! IE might decide to download them again
  • 29. Configure ETags ETags are meant to help with caching A component served from server A has a different ETag than the same component served from B Configure ETags not to include inode … or just remove them and implement “never expire” policy Apache default FileETag INode MTime Size Change to FileETag None
  • 30. Make AJAX Cacheable Content returned from XMLHttpRequest s is like any other component Should be gzipped Could be cached Cache-control: max-age=?
  • 31. Part II After YSlow “A”: 20 more best practices
  • 32. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 33. Flush the buffer early Let the browser start fetching components while your backend is busy PHP has the function flush() Best for busy backends / light frontends ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content --> Case Study: Yahoo! Search
  • 34. Use GET for AJAX requests GET is for retrieving data POST is a two-step process (send headers, send data) GET request is one TCP packet (unless you have a lot of cookies) Max URL length 2K (because of IE) POST without actually posting data is like GET Yahoo! Mail Research
  • 35. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 36. Post-load components Ask yourself: what's absolutely required in order to render the page initially? The rest can wait (drag and drop, animations, hidden content, images below the fold) JavaScript is ideal candidate for splitting YUI Image Loader YUI Get Utility
  • 37. Post-load components Case study: yahoo.com onload.js and onload.css Progressive enhancement
  • 38. Preload components Preload Items you'll need in the future Unconditional preload (google.com loads a sprite onload) Conditional preload (search.yahoo.com after you type in the input box) Anticipated preload – preload in advance before launching a redesign
  • 39. Preload components (contd.) Unconditional preload example
  • 40. Preload components (contd.) Conditional preload example – search.yahoo.com When you start typing the page can safely assume you’ll hit the search results page Time to preload
  • 41. Reduce the number of DOM elements World's fastest page? about:blank ! A complex page means more bytes to download It also means slower DOM access in JavaScript It also may mean using semantically incorrect markup (like nested tables or abusing <div> s) Use semantic markup Use YUI's reset.css, fonts.css, grids.css Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length yahoo.com is a busy page and still under 700 elements (HTML tags)
  • 42. Split components across domains Maximize parallel downloads But not more than 2-4 domains, because of the DNS lookup penalty www.example.org – HTML content static.example.org – Static components Future: IE8 will allow 6 requests per domain
  • 43. Split components (contd.) 2 components in parallel 8 components in parallel
  • 44. Minimize the number of iframes <iframe> pros: Can help with slow third-party content like badges and ads Security sandbox You can download scripts in parallel <iframe> cons: They have a cost even if blank They block page onload Non-semantic
  • 45. No 404s 404 Not Found Useless downloads Some sites have helpful 404s “Did you mean X?”… … which uses server resources (DB, etc) When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it
  • 46. No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page
  • 47. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 48. Reduce cookie size Eliminate unnecessary cookies Keep cookie sizes as low as possible to minimize the impact on the user response time Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time
  • 49. Cookie-free hosting for components Option 1: Separate subdomain (static.example.org) Option 2: A new TLD (e.g. yimg.com, ytimg.com, images-amazon.com) Proxies might refuse to cache www.www-yes.org vs www-no.org? no-www leaves you no choice but to write cookies to *.example.org
  • 50. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 51. Minimize DOM access DOM access is the slowest Cache Update nodes “offline” and then add them to the tree Avoid fixing layout with JavaScript
  • 52. Develop smart event handlers Don't wait for onload , use DOMContentLoaded Events bubble up, so use delegation (attach listeners to outer elements) Clean up to prevent IE memory leaks Careful with onresize Use YUI Event utility
  • 53. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 54. Choose <link> over @import CSS should be at the top In IE @import is the same as putting <link> at the bottom
  • 55. Avoid filters IE proprietary AlphaImageLoader Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine Blocks rendering, freezes the browser Increased memory consumption Per element, not per image! Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack _filter not to penalize IE7+ users
  • 56. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 57. Optimize images GIF - don't use a bigger palette than you need Use PNGs instead of GIFs “ All we are saying is: Give PiNG a Chance!&quot; pngcrush tool (or optipng, or pngoptimizer) Removing gamma chunks also helps with cross-browser colors Strip comments jpegtran - lossless JPEG operations, can be used to optimize and remove comments
  • 58. Optimize images (contd.) You can write a simple tool that walks your image directories before site launch and does the following: Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png Crush all PNGs > pngcrush image.png –rem alla –reduce result.png Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  • 59. Optimize images (contd.) You’d be surprised how many sites, from small to huge, could optimize the download size 200K of useless image information sent over the wire for a single page?!
  • 60. Optimize CSS sprites Choose horizontal over vertical when possible Combine similar colors Keep color count low (<256) to fit in a PNG8 “ Be mobile-friendly” – don’t leave big gaps Filesize doesn’t increase much, but the image needs to be decompressed into a pixel map 100x100 is 10000 pixels 1000x1000 is 1 Million pixels Case study: Yahoo! Mail Classic
  • 62. Don't scale images in HTML Downloads unnecessary bytes If you need <img width=&quot;100&quot; height=&quot;100&quot; src=&quot;mycat.jpg&quot; /> then have mycat.jpg 100x100 not 500x500
  • 63. Make favicon.ico small and cacheable www.example.org/favicon.ico Necessary evil: The browser will request it Better not respond with a 404 Cookies are sent Cannot be on CDN Interferes with the download sequence Make it small (<= 1K) Animated favicons are not cool Set Expires header Tools: imagemagick, png2ico Case study: Yahoo! Search - favicon.ico is 9% of all page views!
  • 64. Bonus: crossdomain.xml Cross domain policy for Flash/Flex Sits in the root: example.org/crossdomain.xml <cross-domain-policy> <allow-access-from domain=&quot;*.yahoo.com&quot; secure=&quot;false&quot;/> </cross-domain-policy> Set Expires header gzip … and secure while at it, don’t do: <allow-access-from domain=&quot;*“ />
  • 65. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 66. Keep components under 25K Because iPhone won’t cache them Uncompressed size under 25Kb Minify HTML in addition to JS and CSS
  • 67. Pack components into a multipart document For UAs that support it (iPhone doesn’t) Like an email with attachments
  • 68. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 69. Tools YSlow ( http:// developer.yahoo.com/yslow / ) Fiddler ( http:// www.fiddlertool.com /fiddler/ ) IBM Page Detailer ( http:// www.alphaworks.ibm.com/tech/pagedetailer ) HTTPWatch ( http:// www.httpwatch.com / ) AOL Pagetest ( http:// pagetest.wiki.sourceforge.net / ) Firebug Net Panel ( http:// www.getfirebug.com / )
  • 70. IBM Page Detailer Methodology Packet Sniffer Competitive Advantage Most accurate Provides detailed data Works for any browser Best waterfall view Drawbacks Requires a download 90 day free trial Runs only on Windows Misses cached components
  • 71. Firebug NET Panel Methodology Packet Sniffer Competitive Advantage Integrated with Firebug Displays waterfall view Provides HTTP header info Drawbacks Runs only in Firefox Inaccurate waterfall view No render time No parse time No redirects No DNS lookups Misses cached components
  • 72. URLs – Exceptional Performance YUI blog http://yuiblog.com/blog/category/performance/ YDN (Yahoo Developer Network) http://developer.yahoo.com/performance/ YDN blog http://developer.yahoo.net/blog/archives/performance/ Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional-performance/ Feedback http://developer.yahoo.com/yslow/feedback.html
  • 73. URLs (contd.) &quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ &quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ YUI Image Loader ( http:// developer.yahoo.com/yui/imageloader / ) YUI Get ( http://developer.yahoo.com/yui/get/ ) YUI Compressor ( http:// developer.yahoo.com/yui/compressor / contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/ ) JSMin ( http:// www.crockford.com/javascript/jsmin.html ) &quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/ Yahoo! engineer Michael J. Radwin talk back in 2004 http:// www.radwin.org/michael/talks /
  • 75. Take-home Focus on the front-end Harvest the low hanging fruit Be an advocate for your users Start early
  • 76. Thank you! Merci beaucoup!