{"id":47,"date":"2017-09-09T21:10:31","date_gmt":"2017-09-09T19:10:31","guid":{"rendered":"http:\/\/178.62\/?p=47"},"modified":"2017-09-09T21:10:31","modified_gmt":"2017-09-09T19:10:31","slug":"performance-optimisation-first-talk-ever","status":"publish","type":"post","link":"https:\/\/fabiocicerchia.it\/performance\/performance-optimisation-first-talk-ever","title":{"rendered":"Performance Optimisation, my first talk ever"},"content":{"rendered":"<p>[toc]<br \/>\n<iframe loading=\"lazy\" title=\"Performance Optimisation\" src=\"https:\/\/www.slideshare.net\/slideshow\/embed_code\/key\/D1MxpvkPtqoVVl\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> <\/iframe> <\/p>\n<div style=\"margin-bottom:5px\"> <strong> <a href=\"https:\/\/www.slideshare.net\/fabiocicerchia\/performance-optimisation-69670789\" title=\"Performance Optimisation\" target=\"_blank\">Performance Optimisation<\/a> <\/strong> from <strong><a href=\"https:\/\/www.slideshare.net\/fabiocicerchia\" target=\"_blank\">Fabio Cicerchia<\/a><\/strong> <\/div>\n<p>At the end of 2016, I gave a talk at the <a href=\"http:\/\/roma.grusp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">PUG Roma meetup<\/a> talking about <a href=\"http:\/\/roma.grusp.org\/2016\/12\/incontro-di-novembre-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\">web performance<\/a>. Despite my expectations of a\u00a0first-time shy speaker, the room was packed with more than 50 attendees.<\/p>\n<p><!--more--><\/p>\n<p>Here it is the script of the talk.<\/p>\n<ol>\n<li>Performance is a <strong>process<\/strong>, <span style=\"text-decoration: underline;\">not<\/span> a <strong>project<\/strong> <span style=\"text-decoration: underline;\">Every<\/span> engineer should think about performance<\/li>\n<li><strong>Time<\/strong> is <strong>Money<\/strong> <em>Unfortunately you can\u2019t buy it, so don\u2019t waste it<\/em><\/li>\n<li>Performance matters<\/li>\n<\/ol>\n<h2>Measuring<\/h2>\n<h3>How?<\/h3>\n<ol>\n<li><strong>Accurately<\/strong> measure page performance<\/li>\n<li>Be <strong>unobtrusive<\/strong><\/li>\n<li>Have a good <strong>sampling<\/strong><\/li>\n<li>Focus on <strong>useful<\/strong> metrics<\/li>\n<\/ol>\n<h3>Random Sampling<\/h3>\n<p><a href=\"http:\/\/xkcd.com\/221\/\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-197 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/random_number-300x108.png\" alt=\"Strip from XKCD about how to generate a number in a funny way\" width=\"300\" height=\"108\" \/><\/a> How to <strong>randomise?<\/strong><\/p>\n<ul>\n<li>Pick 10% of users at random and always test them<\/li>\n<li>For each user, decide at random if they should be tested<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/tech.bluesmoon.info\/2010\/01\/statistics-of-performance-measurement.html\" rel=\"nofollow\"><small>The statistics of performance measurement &#8211; Random Sampling<\/small><\/a><\/li>\n<\/ul>\n<h3>Central Tendency<\/h3>\n<ul>\n<li><strong>Mean<\/strong>(10, 11, 12, 11, 109) = 30 Affected by outliers<\/li>\n<li><strong>Median<\/strong>(10, 11, 12, 11, 109) = 11 Central tendency<\/li>\n<li><strong>Mode<\/strong>(10, 11, 12, 11, 109) = 11 Most recurring value, not often used<\/li>\n<\/ul>\n<h3>Percentiles<\/h3>\n<ul>\n<li><strong>Percentiles<\/strong> are perfect for automatic baselining.<\/li>\n<li><strong>Averages<\/strong> can be misleading.<\/li>\n<\/ul>\n<p>Keep an eye on:<\/p>\n<ul>\n<li>50th percentile = Median<\/li>\n<li>95th percentile<\/li>\n<li>98th percentile<\/li>\n<li>99th percentile<\/li>\n<\/ul>\n<ul>\n<li>You can&#8217;t improve what you can\u2019t measure<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/apmblog.dynatrace.com\/2012\/11\/14\/why-averages-suck-and-percentiles-are-great\/\" rel=\"nofollow\"><small>Why Averages Suck and Percentiles are Great<\/small><\/a><\/li>\n<\/ul>\n<h2>Metrics<\/h2>\n<h3>TTFB<\/h3>\n<p>The Time To First Byte metric is affected by 3 components:<\/p>\n<ul>\n<li>The time the request takes to reach the web server<\/li>\n<li>The time the web server takes to process the request and generate the response<\/li>\n<li>The time the response takes to go back to your browser<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/moz.com\/blog\/improving-search-rank-by-optimizing-your-time-to-first-byte\" rel=\"nofollow\"><small>Improving Search Rank by Optimizing Your Time to First Byte<\/small><\/a><\/li>\n<\/ul>\n<h3>TTLB<\/h3>\n<p>As per TTFB the reasons for a high <strong>Time To Last Byte<\/strong> could be:<\/p>\n<ul>\n<li>Geographic latency (server is far away from visitor)<\/li>\n<li>Poorly written server-side code<\/li>\n<li>Outdated server hardware<\/li>\n<li>Overloaded servers (clogged bandwidth due to high traffic \u2013 from humans, bots, or both)<\/li>\n<li>Poorly organized databases<\/li>\n<li>Poorly written database code<\/li>\n<\/ul>\n<h3>DOM Content Loaded<\/h3>\n<ul>\n<li>It\u2019s fired when the HTML document has been <strong>completely loaded and parsed<\/strong>, without waiting for stylesheets, images, and subframes to finish loading. A very <em>different event<\/em> load should be used only to detect a <em>fully-loaded page<\/em>. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/DOMContentLoaded\" rel=\"nofollow\"><small>DOMContentLoaded<\/small><\/a><\/li>\n<\/ul>\n<h3>Full Load<\/h3>\n<p><code>\/\/ 1<br \/>\ndocument.addEventListener('DOMContentLoaded', function (event) {<br \/>\nconsole.log('DOM fully loaded and parsed');<br \/>\n});<\/code><\/p>\n<p><code>\/\/ 2<br \/>\nfunction load() {<br \/>\nconsole.log('load event detected!');<br \/>\n}<br \/>\nwindow.onload = load;<\/code><\/p>\n<p><code>\/\/ 3<br \/>\n$(document).ready(function () {<br \/>\nconsole.log('ready');<br \/>\n});<\/code><\/p>\n<p><code>\/\/ 4<br \/>\n$(window).load(function () {<br \/>\nconsole.log('loaded');<br \/>\n});<\/code><\/p>\n<p>OUTPUT<br \/>\n1. ready<br \/>\n2. DOM fully loaded and parsed<br \/>\n3. load event detected!<br \/>\n4. loaded<\/p>\n<h3>Speed Index<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-199 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/compare_progress-300x161.png\" alt=\"Example of Speed Index loading progress\" width=\"300\" height=\"161\" \/><\/p>\n<ul>\n<li>The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on the size of the view port. The Speed Index metric measures how quickly the page contents are visually populated (where lower numbers are better).<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WPO-Foundation\/webpagetest-docs\/blob\/main\/src\/metrics\/SpeedIndex.md\" rel=\"nofollow\"><small>Speed Index<\/small><\/a><\/li>\n<\/ul>\n<h2>Some Figures<\/h2>\n<h3>3rd Party?<\/h3>\n<ul>\n<li>3rd party calls can make up <strong>&gt;50% of page requests<\/strong>.<\/li>\n<li>They are the single greatest potential point of failure for web pages.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/web.archive.org\/web\/20160406014508\/http:\/\/www.webperformancetoday.com\/2011\/07\/14\/fourth-party-calls-third-party-content\/\" rel=\"nofollow\"><small>Fourth-party calls: What you don\u2019t know can hurt your site\u2026 and your visitors<\/small><\/a><\/li>\n<\/ul>\n<h3>GZip?<\/h3>\n<ul>\n<li>GZIP compression <strong>saves 50% to 80%<\/strong> bandwidth and it will significantly increase the website\u2019s loading speed.<\/li>\n<li>Netflix saw a 43% drop in outbound traffic after enabling compression<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/web.archive.org\/web\/20160406014508\/http:\/\/www.webperformancetoday.com\/2011\/07\/14\/fourth-party-calls-third-party-content\/\" rel=\"nofollow\"><small>18 Tips for Website Performance Optimization<\/small><\/a><\/li>\n<li><a href=\"https:\/\/web.archive.org\/web\/20160406014508\/http:\/\/www.webperformancetoday.com\/2011\/07\/14\/fourth-party-calls-third-party-content\/\" rel=\"nofollow\"><small>15 Web Performance Stats You Should Know<\/small><\/a><\/li>\n<\/ul>\n<h3>Images?<\/h3>\n<ul>\n<li>On average, <a href=\"http:\/\/httparchive.org\/interesting.php#bytesperpage?ictd[master]=vid~720f2d5d-60be-46fc-92c4-1774ba093d21&amp;ictd[il583]=rlt~1441669636~land~2_3853_seo_aa73a52e6449ecff40e9a5c66e7bb93f\" rel=\"nofollow\">64% of a website\u2019s page weight<\/a> is made up of images. \u2013 HTTP Archive<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/httparchive.org\/interesting.php\" rel=\"nofollow\"><small>Interesting stats<\/small><\/a><\/li>\n<\/ul>\n<h3>Redirect?<\/h3>\n<ul>\n<li><strong>20%<\/strong> pages contain 5 or more redirects.<\/li>\n<li>And 3% of pages contained 10 or more.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.soasta.com\/blog\/23-stats-mobile-web-performance-monitoring\/\" rel=\"nofollow\"><small>Mobile Web Performance: 23 stats you should know about mobile web performance<\/small><\/a><\/li>\n<\/ul>\n<h3>100ms slower?<\/h3>\n<ul>\n<li><strong>1%<\/strong> drop in sales (Amazon)<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/www.carbon60.com\/blog\/milliseconds-are-money-how-much-performance-matters-in-the-cloud\" rel=\"nofollow\"><small>Milliseconds are Money: How Much Performance Matters in the Cloud<\/small><\/a><\/li>\n<\/ul>\n<h3>500ms slower?<\/h3>\n<ul>\n<li><strong>25%<\/strong> drop in searches (Google)<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/cdnify.com\/blog\/15-web-performance-stats\/\" rel=\"nofollow\"><small>15 Web Performance Stats You Should Know<\/small><\/a><\/li>\n<\/ul>\n<h3>1 second slower?<\/h3>\n<ul>\n<li><strong>11%<\/strong> fewer page views, a <strong>16%<\/strong> decrease in customer satisfaction, and <strong>7%<\/strong> loss in conversions<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/www.aberdeen.com\/Aberdeen-Library\/5136\/RA-performance-web-application.aspx\" rel=\"nofollow\"><small>THE PERFORMANCE OF WEB APPLICATIONS: CUSTOMERS ARE WON OR LOST IN ONE SECOND<\/small><\/a><\/li>\n<\/ul>\n<h3>2 seconds slower?<\/h3>\n<ul>\n<li>During a transaction results in abandonment rates of up to <strong>87%<\/strong>. This is significantly higher than the average abandonment rate of <strong>70%<\/strong>.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/www.aberdeen.com\/Aberdeen-Library\/5136\/RA-performance-web-application.aspx\" rel=\"nofollow\"><small>55 Web Performance Stats You\u2019ll Want to Know<\/small><\/a><\/li>\n<\/ul>\n<h3>3 seconds slower?<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.doubleclickbygoogle.com\/articles\/mobile-speed-matters\/\" rel=\"nofollow\">53% of visits to mobile sites are abandoned after 3 seconds<\/a> \u2013 Google&#8217;s DoubleClick.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/wpostats.com\/\" rel=\"nofollow\"><small>WPO Stats<\/small><\/a><\/li>\n<\/ul>\n<h3>4 seconds?<\/h3>\n<ul>\n<li>Only <strong>2%<\/strong> of the top 100 e-commerce sites loads in fewer than 4 seconds on smartphones.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/blog.radware.com\/applicationdelivery\/applicationaccelerationoptimization\/2014\/01\/55-web-performance-stats-youll-want-to-know\/\" rel=\"nofollow\"><small>55 Web Performance Stats You\u2019ll Want to Know<\/small><\/a><\/li>\n<\/ul>\n<h3>10 seconds?<\/h3>\n<ul>\n<li><strong>1 out of 4<\/strong> pages took more than 10 seconds to load.<\/li>\n<li><strong>20%<\/strong> of the top 100 e-commerce sites loads in more than 10 seconds.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/blog.radware.com\/applicationdelivery\/applicationaccelerationoptimization\/2014\/01\/55-web-performance-stats-youll-want-to-know\/\" rel=\"nofollow\"><small>55 Web Performance Stats You\u2019ll Want to Know<\/small><\/a><\/li>\n<\/ul>\n<h3>To infinity&#8230; and beyond!<\/h3>\n<ul>\n<li>According to Google&#8217;s DoubleClick, when comparing sites that load in 5 seconds to sites that load in 19 seconds, the faster sites had <strong>70% longer average session lengths, 35% lower bounce rates<\/strong> and <strong>25% higher ad viewability<\/strong> than their slower counterparts.<\/li>\n<li>Google&#8217;s DoubleClick found that publishers whose mobile sites load in 5 seconds earn up to <strong>2x more mobile ad revenue<\/strong> than sites loading in 19 seconds.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/wpostats.com\/\" rel=\"nofollow\"><small>WPO Stats<\/small><\/a><\/li>\n<\/ul>\n<h3>Poor Performances = Web Stress<\/h3>\n<ul>\n<li>Brain wave analysis from the experiment revealed that participants had to concentrate <strong>up to 50% more<\/strong> when using <em>badly performing websites<\/em>, while facial muscle and behavioural analysis of the subjects also revealed <strong>greater agitation and stress<\/strong> in these periods.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.tecnostress.it\/wp-content\/uploads\/2010\/02\/final_webstress_survey_report_229296.pdf\" rel=\"nofollow\"><small>Webstress Survey Report<\/small><\/a><\/li>\n<\/ul>\n<h2>Long story short&#8230;<\/h2>\n<ul>\n<li>You are LOSING <strong>Visitors<\/strong><\/li>\n<li>You are LOSING <strong>Sales<\/strong><\/li>\n<li>You are LOSING <strong>Ad-revenue<\/strong><\/li>\n<li>You are WASTING <strong>SEO\/SEM\/PPC budget<\/strong><\/li>\n<li>SPENDING $$$ on <strong>bandwidth and servers<\/strong><\/li>\n<\/ul>\n<h2>So, how to do it?<\/h2>\n<ul>\n<li>too many irons in the fire<\/li>\n<li><strong>WPO<\/strong> (<a href=\"https:\/\/devcentral.f5.com\/articles\/wils-wpo-versus-feo\" rel=\"nofollow\">Web Performance Optimisation<\/a>) Optimise the poorly performing networks and servers<\/li>\n<li><strong>FEO<\/strong> (<a href=\"https:\/\/devcentral.f5.com\/articles\/wils-wpo-versus-feo\" rel=\"nofollow\">Front-End Optimisation<\/a>) Change the content to decrease the amount of traffic<\/li>\n<li><strong>WCO<\/strong> (<a href=\"https:\/\/web.archive.org\/web\/20150518080740\/http:\/\/www.webperformancetoday.com\/2011\/06\/10\/wpo-wco-feo-web-performance-optimization\/\" rel=\"nofollow\">Web Content Optimisation<\/a>) Make the page rendering faster<\/li>\n<li><strong>DSA<\/strong> (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Dynamic_site_acceleration\" rel=\"nofollow\">Dynamic Site Acceleration<\/a>) Bring network resources closer to the user by prefetching or caching files<\/li>\n<\/ul>\n<h2>Let\u2019s do it!<\/h2>\n<h3>Level 0 &#8211; Noob<\/h3>\n<h4>GZip<\/h4>\n<ul>\n<li>You send zipped content over the wire, the browser unpacks it<\/li>\n<li>Modern browsers understand compressed content<\/li>\n<li>Search engine spiders do too<\/li>\n<\/ul>\n<h4>Minify<\/h4>\n<ul>\n<li>Minify JavaScript and CSS<\/li>\n<li>Inline styles and scripts should also be minified<\/li>\n<li>The <a href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/developertools\/sourcemaps\/\" rel=\"nofollow\">Source Maps<\/a> are loaded only in Dev Mode<\/li>\n<\/ul>\n<h4>Avoid 404s<\/h4>\n<ul>\n<li>Useless requests<\/li>\n<li>When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it<\/li>\n<li>They\u2019ll slow down the UX<\/li>\n<\/ul>\n<h4>Optimise Images<\/h4>\n<ul>\n<li>Lossless optimisation<\/li>\n<li>Correct dimensions<\/li>\n<li>Save for web<\/li>\n<li>Use the right file format: GIF for animations, JPEG for photograph, otherwise PNG<\/li>\n<li>Don\u2019t Scale Images in HTML<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/www.creativebloq.com\/netmag\/10-ways-optimise-images-better-performance-71515792\" rel=\"nofollow\"><small>10 ways to optimise images for better performance<\/small><\/a><\/li>\n<\/ul>\n<h4>Optimise CSS Sprites<\/h4>\n<ul>\n<li>Choose horizontal over vertical when possible<\/li>\n<li>Combine similar colors<\/li>\n<li>Keep color count low<\/li>\n<li>Don\u2019t leave big gaps<\/li>\n<\/ul>\n<h4>Back to basics<\/h4>\n<ul>\n<li><a href=\"http:\/\/code.google.com\/speed\/page-speed\/docs\/rules_intro.html\" rel=\"nofollow\">Google\u2019s Rules<\/a>\n<ul>\n<li>Avoid bad requests<\/li>\n<li>Avoid CSS expressions<\/li>\n<li>Combine external CSS<\/li>\n<li>Combine external JavaScript<\/li>\n<li>Defer loading of JavaScript<\/li>\n<li>Enable compression<\/li>\n<li>Leverage browser caching<\/li>\n<li>Leverage proxy caching<\/li>\n<li>Minify CSS<\/li>\n<li>Minify HTML<\/li>\n<li>Minify JavaScript<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/developer.yahoo.com\/performance\/rules.html\" rel=\"nofollow\">Yahoo\u2019s Rules<\/a>\n<ul>\n<li>Minimize HTTP Requests<\/li>\n<li>Use a Content Delivery Network<\/li>\n<li>Add an Expires or a Cache-Control Header<\/li>\n<li>Gzip Components<\/li>\n<li>Put StyleSheets at the Top<\/li>\n<li>Put Scripts at the Bottom<\/li>\n<li>Avoid CSS Expressions<\/li>\n<li>Make JavaScript and CSS External<\/li>\n<li>Reduce DNS Lookups<\/li>\n<li>Minify JavaScript and CSS<\/li>\n<li>Avoid Redirects<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Level 1 &#8211; Getting Serious<\/h3>\n<h4>Favicon.ico<\/h4>\n<ul>\n<li>The browser will request it<\/li>\n<li>Better not respond with a 404<\/li>\n<li>Cookies are sent<\/li>\n<li>Cannot be on CDN<\/li>\n<li>Interferes with the download sequence<\/li>\n<li>Make it small (&lt;= 1K)<\/li>\n<li>Animated favicons are not cool<\/li>\n<li>Set Expires header<\/li>\n<\/ul>\n<h4>Minimise iframes<\/h4>\n<ul>\n<li>Pros:\n<ul>\n<li>Can help with slow third-party content like badges and ads<\/li>\n<li>Security sandbox<\/li>\n<li>You can download scripts in parallel<\/li>\n<\/ul>\n<\/li>\n<li>Cons:\n<ul>\n<li>They have a cost even if blank<\/li>\n<li>They block page onload<\/li>\n<li>Non-semantic<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Post-load Components<\/h4>\n<ul>\n<li>What&#8217;s absolutely required in order to render the page initially?<\/li>\n<li>The rest can wait (drag and drop, animations, hidden content, images below the fold)<\/li>\n<\/ul>\n<h4>Preload Components<\/h4>\n<ul>\n<li>Items you&#8217;ll need in the future<\/li>\n<li>Unconditional preload (google.com loads a sprite onload)<\/li>\n<li>Conditional preload (search.yahoo.com after you type in the input box)<\/li>\n<li>Anticipated preload \u2013 preload in advance before launching a redesign<\/li>\n<li>When you start typing the page can safely assume you\u2019ll hit the search results page<\/li>\n<\/ul>\n<h4>Use Cookie-Free Domains<\/h4>\n<ul>\n<li><strong>Option 1:<\/strong> Separate subdomain (static.example.org)<\/li>\n<li><strong>Option 2:<\/strong> A new domain (e.g. yimg.com, ytimg.com, images-amazon.com)<\/li>\n<\/ul>\n<h4>ETags<\/h4>\n<ul>\n<li>ETag is a token that can be associated with a web resource<\/li>\n<li>ETags are meant to help with caching\n<ul>\n<li>They take precedence for caching<\/li>\n<li>They never expire<\/li>\n<\/ul>\n<\/li>\n<li>Issues with load balanced environment\n<ul>\n<li>A component served from server A has a different ETag than the same component served from B<\/li>\n<\/ul>\n<\/li>\n<li>Most of the time you don\u2019t need them<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/techpunch.co.uk\/development\/should-your-site-be-using-etags-or-not\" rel=\"nofollow\"><small>Should your site be using etags or not?<\/small><\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/http-caching\" rel=\"nofollow\"><small>HTTP Caching<\/small><\/a><\/li>\n<\/ul>\n<h4>Reduce Cookies<\/h4>\n<ul>\n<li>Eliminate unnecessary cookies<\/li>\n<li>Keep cookie sizes as low as possible to minimize the impact on the user response time<\/li>\n<li>Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected<\/li>\n<li>Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time<\/li>\n<\/ul>\n<h4>Event Handlers<\/h4>\n<ul>\n<li>Don&#8217;t wait for onload, use DOMContentLoaded<\/li>\n<li>Events bubble up, so use delegation (attach listeners to outer elements)<\/li>\n<li>Clean up to prevent IE memory leaks<\/li>\n<li>Careful with onresize<\/li>\n<\/ul>\n<h4>Choose &lt;link&gt; over @import<\/h4>\n<ul>\n<li>CSS should be at the top<\/li>\n<li>@import blocks parallel downloads<\/li>\n<li>In IE @import is the same as &lt;link&gt; putting at the bottom<\/li>\n<li>&lt;link&gt; allows alternate styles (e.g. for accessibility)<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/www.stevesouders.com\/blog\/2009\/04\/09\/dont-use-import\/\" rel=\"nofollow\"><small>don\u2019t use @import<\/small><\/a><\/li>\n<li><a href=\"http:\/\/alistapart.com\/article\/alternate\" rel=\"nofollow\"><small>Alternative Style: Working With Alternate Style Sheets<\/small><\/a><\/li>\n<\/ul>\n<h3>Level 2 &#8211; Advanced<\/h3>\n<h4>Reduce DOM Elements<\/h4>\n<ul>\n<li>World&#8217;s fastest page? about:blank!<\/li>\n<li>A complex page means more bytes to download, it also means slower DOM access in JavaScript<\/li>\n<li>Easy to test, just type in Firebug\u2019s console: document.getElementsByTagName(&#8216;*&#8217;).length<\/li>\n<\/ul>\n<h4>Prefetching<\/h4>\n<ul>\n<li>DNS prefetching \u2192 resolve the DNS<\/li>\n<li>Preconnect \u2192 resolve the DNS + TCP handshake + TLS negotiation (optional)<\/li>\n<li>Prefetch \u2192 requesting, downloading and storing the asset in the cache<\/li>\n<li>Prerender \u2192 load all of the assets of a certain document<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/prefetching-preloading-prebrowsing\/\" rel=\"nofollow\"><small>Prefetching, preloading, prebrowsing<\/small><\/a><\/li>\n<\/ul>\n<h4>ATF<\/h4>\n<ul>\n<li>The most important and interesting section should be at the top of the webpage<\/li>\n<li>Make sure to render the Above The Fold content in &lt; 1s<\/li>\n<li>Defer the non-AFT contents<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/whereisthefold.com\/\" rel=\"nofollow\"><small>Where is the fold?<\/small><\/a><\/li>\n<\/ul>\n<h4>Requests Sharding<\/h4>\n<ul>\n<li>Domain sharding is a technique for splitting resources across multiple domains, improving page load time. When multiple domains are used, browsers are able to download more resources simultaneously, resulting in a faster user experience. <em><strong>Note:<\/strong> HTTP\/2 has officially replaced SPDY and made it obsolete.<\/em><\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/blog.stackpath.com\/glossary\/domain-sharding\/\" rel=\"nofollow\"><small>What is Domain Sharding?<\/small><\/a><\/li>\n<li><a href=\"https:\/\/www.stevesouders.com\/blog\/2013\/09\/05\/domain-sharding-revisited\/\" rel=\"nofollow\"><small>Domain Sharding revisited<\/small><\/a><\/li>\n<\/ul>\n<h4>VanillaJS<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-200\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/iFaEh-300x251.png\" alt=\"Speed comparison of some methods using different frameworks\" width=\"300\" height=\"251\" \/> <small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/vanilla-js.com\/\" rel=\"nofollow\"><small>VanillaJS<\/small><\/a><\/li>\n<\/ul>\n<h4>Avoid Filters<\/h4>\n<ul>\n<li>Blocks rendering, freezes the browser Increased memory consumption Per element, not per image<\/li>\n<\/ul>\n<h4>Web Fonts<\/h4>\n<ul>\n<li>Blocks text rendering<\/li>\n<li>Fonts are bigger than 14Kb<\/li>\n<li>Use them with care<\/li>\n<li>Remove characters<\/li>\n<\/ul>\n<h4>WebP<\/h4>\n<ul>\n<li>WebP is a modern image format that provides superior lossless and lossy compression for images on the web.<\/li>\n<li>WebP lossless images are <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study#results\" rel=\"nofollow\">26% smaller<\/a> than PNGs and <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\" rel=\"nofollow\">25-34% smaller<\/a> than JPEG images.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study\" rel=\"nofollow\"><small>Lossless and Transparency Encoding in WebP<\/small><\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/speed\/webp\/\" rel=\"nofollow\"><small>A new image format for the Web<\/small><\/a><\/li>\n<\/ul>\n<h4>Animations<\/h4>\n<ul>\n<li>Don\u2019t animate from JavaScript for basic stuff<\/li>\n<li>Use requestAnimationFrame<\/li>\n<li>Have a look at GSAP (20x faster than jQuery) and VelocityJS<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/Apps\/Fundamentals\/Performance\/CSS_JavaScript_animation_performance\" rel=\"nofollow\"><small>CSS and JavaScript animation performance<\/small><\/a><\/li>\n<li><a href=\"https:\/\/greensock.com\/js\/speed.html\" rel=\"nofollow\"><small>JavaScript Animation Speed Test<\/small><\/a><\/li>\n<li><a href=\"http:\/\/velocityjs.org\" rel=\"nofollow\"><small>Velocity.js<\/small><\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/animations\/animations-and-performance\" rel=\"nofollow\"><small>Animations and Performance<\/small><\/a><\/li>\n<\/ul>\n<h4>HTML5 Features<\/h4>\n<ul>\n<li><span style=\"text-decoration: line-through;\">Application Cache<\/span> Service Workers<\/li>\n<li>Web Storage<\/li>\n<li>Web Workers<\/li>\n<li>Navigation Timing API<\/li>\n<li>Web Sockets<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/mobilehtml5.org\/\" rel=\"nofollow\"><small>Mobile HTML5<\/small><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Using_the_application_cache\" rel=\"nofollow\"><small>Using the application cache<\/small><\/a><\/li>\n<\/ul>\n<h4>CRP<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-201 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/progressive-rendering-300x147.png\" alt=\"Example of rendering of a web page\" width=\"300\" height=\"147\" \/><\/p>\n<ul>\n<li>Optimizing the <em>Critical Rendering Path<\/em> refers to <strong>prioritising<\/strong> the display of content that relates to the current user action.<\/li>\n<li><strong>Perceived Performance<\/strong> is a measure of how quick a user thinks your site is<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/critical-rendering-path\/\" rel=\"nofollow\"><small>Critical Rendering Path<\/small><\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2015\/08\/understanding-critical-css\/\" rel=\"nofollow\"><small>Understanding Critical CSS<\/small><\/a><\/li>\n<li><a href=\"http:\/\/blog.teamtreehouse.com\/perceived-performance\" rel=\"nofollow\"><small>An Introduction to Perceived Performance<\/small><\/a><\/li>\n<\/ul>\n<h3>Level 3 &#8211; Behind the Scenes<\/h3>\n<h4>Latency<\/h4>\n<ul>\n<li>Latency is the amount of time it takes to transmit a single piece of data from one location to another<\/li>\n<\/ul>\n<ol>\n<li>Decrease External HTTP Requests<\/li>\n<li>DNS Prefetching<\/li>\n<li>Preconnect<\/li>\n<li>Use a CDN<\/li>\n<li>HTTP\/2<\/li>\n<li>Caching<\/li>\n<\/ol>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.keycdn.com\/blog\/latency-optimization\/\" rel=\"nofollow\"><small>Latency Optimization \u2013 Tips for Optimal Performance<\/small><\/a><\/li>\n<\/ul>\n<h4>CDN<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-202 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/cdn-region-specific-300x134.png\" alt=\"CDN explaination\" width=\"300\" height=\"134\" \/> Get a Content Delivery Network:<\/p>\n<ul>\n<li>Akamai<\/li>\n<li>CDNify (from $10\/m)<\/li>\n<li>CloudFlare (free-mium)<\/li>\n<li>MaxCDN (from $9\/m)<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.cdnplanet.com\/cdns\/\" rel=\"nofollow\"><small>Content Delivery Networks<\/small><\/a><\/li>\n<li><a href=\"https:\/\/www.cdnperf.com\/tools\/cdn-calculator\" rel=\"nofollow\"><small>CDN Calculator<\/small><\/a><\/li>\n<\/ul>\n<h4>Cache<\/h4>\n<ul>\n<li>What is dynamic content? Almost everything is static for a time. The hard part is to reduce the miss rate.<\/li>\n<li>What can you cache?\n<ul>\n<li>DB Results<\/li>\n<li>Functions Output<\/li>\n<li>Generated HTML<\/li>\n<\/ul>\n<\/li>\n<li><em>There are only two hard things in Computer Science: cache invalidation and naming things \u2014 Phil Karlton<\/em><\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/web-caching-basics-terminology-http-headers-and-caching-strategies\" rel=\"nofollow\"><small>Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies<\/small><\/a><\/li>\n<li><a href=\"https:\/\/www.mnot.net\/cache_docs\/\" rel=\"nofollow\"><small>Caching Tutorial for Web Authors and Webmasters<\/small><\/a><\/li>\n<\/ul>\n<h4>SPDY<\/h4>\n<ul>\n<li>SPDY is now <strong>deprecated<\/strong><\/li>\n<li>Allows concurrent HTTP requests in one TCP session.<\/li>\n<li>Reduces the bandwidth used by HTTP (header compression &amp; cleaning useless headers).<\/li>\n<li>Makes SSL the underlying transport protocol, for better security and compatibility with existing network infrastructure.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.chromium.org\/spdy\/spdy-whitepaper\" rel=\"nofollow\"><small>SPDY: An experimental protocol for a faster web<\/small><\/a><\/li>\n<\/ul>\n<h4>HTTP\/2<\/h4>\n<ul>\n<li>Origins from SPDY by Google<\/li>\n<li>HTTP\/2 is protocol designed for\n<ul>\n<li>Low latency transport of content over the Web<\/li>\n<\/ul>\n<\/li>\n<li>No change to HTTP semantics\n<ul>\n<li>It\u2019s about how data travels through the wire<\/li>\n<\/ul>\n<\/li>\n<li>Key new features in HTTP\/2\n<ul>\n<li>Multiplexing: multiple streams over a single connection<\/li>\n<li>Header compression: reuse headers from previous requests<\/li>\n<li>Server push: multiple parallel responses for a single request<\/li>\n<li>Prioritisation: some resources have priorities<\/li>\n<\/ul>\n<\/li>\n<li><strong>HTTP\/1 workarounds hurt HTTP\/2 perf.<\/strong><\/li>\n<li>Antipatterns\n<ul>\n<li>Domain Sharding<\/li>\n<li>Images Sprites<\/li>\n<li>Resource In-Lining<\/li>\n<li>Merging CSS &amp; JS<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/daniel.haxx.se\/http2\/\" rel=\"nofollow\"><small>http2 explained<\/small><\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/nakov\/http2-for-developers\" rel=\"nofollow\"><small>HTTP\/2 for Developers<\/small><\/a><\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=http2\" rel=\"nofollow\"><small>HTTP\/2 protocol<\/small><\/a><\/li>\n<li><a href=\"http:\/\/www.itbusinessedge.com\/slideshows\/best-practices-of-http1.1-becoming-bad-practices-for-http2.html\" rel=\"nofollow\"><small>Best Practices for HTTP1.1 Becoming Bad Practices for HTTP\/2<\/small><\/a><\/li>\n<\/ul>\n<h4>SSL<\/h4>\n<ul>\n<li>HTTPS requires an initial handshake despite it\u2019s size (~5KB) it can be very slow.<\/li>\n<li>Making lots of short requests over HTTPS will be quite a bit slower than HTTP, but if you transfer a lot of data in a single request, the difference will be insignificant.<\/li>\n<li><em>Solution:<\/em> Improve the Handshake + Keep-Alive.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/www.maxcdn.com\/blog\/ssl-performance-myth\/\" rel=\"nofollow\"><small>The SSL Performance Myth, and Tips for Making Secure Connections Fast<\/small><\/a><\/li>\n<li><a href=\"https:\/\/unhandledexpression.com\/development\/general\/security\/2013\/01\/25\/5-easy-tips-to-accelerate-ssl.html\" rel=\"nofollow\"><small>5 easy tips to accelerate SSL<\/small><\/a><\/li>\n<li><a href=\"http:\/\/blog.haproxy.com\/2011\/09\/16\/benchmarking_ssl_performance\/\" rel=\"nofollow\"><small>Benchmarking SSL performance<\/small><\/a><\/li>\n<\/ul>\n<h3>Level 4 &#8211; Backend Superstar<\/h3>\n<h4>XHProf<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-203\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/xhprof1-300x150.png\" alt=\"Example of XHProf profiling\" width=\"300\" height=\"150\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-204\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/image_thumb-300x187.png\" alt=\"Example of Flame Graph\" width=\"300\" height=\"187\" \/><\/p>\n<h4>SF Profiler<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-205\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/profiler-1-300x205.png\" alt=\"Example of Symfony Profiler graph\" width=\"300\" height=\"205\" \/><\/p>\n<h3>Level 5 &#8211; Mobile Ninja<\/h3>\n<ul>\n<li>Summary<\/li>\n<li>Slow Network \u2192 Reduce Reqs + Reduce Bytes<\/li>\n<li>Weak CPU = Slow JS \u2192 Async + Defer<\/li>\n<li>Focus on ATF<\/li>\n<li>Different Connection Model \u2192 Reduce domain sharding, Reduce 304s<\/li>\n<li>Cache \u2192 localStorage<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/browserbench.org\/JetStream\/\" rel=\"nofollow\"><small> JetStream <\/small><\/a><\/li>\n<li><a href=\"http:\/\/queue.acm.org\/detail.cfm?id=2510122\" rel=\"nofollow\"><small>Rules for Mobile Performance Optimization<\/small><\/a><\/li>\n<\/ul>\n<h3>Level 6 &#8211; Guru<\/h3>\n<h4>PRPL<\/h4>\n<ul>\n<li>PRPL is a pattern for structuring and serving Progressive Web Apps, with an emphasis on the performance of app delivery and launch. It stands for:<\/li>\n<li><strong>Push<\/strong>, critical resources for the initial URL route.<\/li>\n<li><strong>Render,<\/strong> initial route.<\/li>\n<li><strong>Pre-cache<\/strong>, remaining routes.<\/li>\n<li><strong>Lazy-load<\/strong>, and create remaining routes on demand.<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/prpl-pattern\/\" rel=\"nofollow\"><small>The PRPL Pattern<\/small><\/a><\/li>\n<\/ul>\n<h4>AMP<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-206 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/image21-300x104.png\" alt=\"Snippet of AMP code\" width=\"300\" height=\"104\" \/><\/p>\n<ul>\n<li><em>AMP is a way to build web pages for static content that render fast \u2014 Google<\/em><\/li>\n<li>Accelerated Mobile Pages in Google Index:\n<ul>\n<li>600 million AMP Pages<\/li>\n<li>700,000 Domains<\/li>\n<li>100+ Languages<\/li>\n<\/ul>\n<\/li>\n<li><em>We found that AMP pages load <strong>four times faster<\/strong>, and use <strong>eight times<\/strong><\/em> less <em><strong>data<\/strong> than traditional mobile optimized pages \u2014 Jon Parise (Product Engineer, Pinterest)<\/em><\/li>\n<li>Gotchas:\n<ul>\n<li>No 3rd party Javascript<\/li>\n<li>External resources must define static dimensions<\/li>\n<li>All CSS must be inline (50k max)<\/li>\n<li>Only GPU-Accelerated animations<\/li>\n<li>Prioritize Resource Loading<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/engineering.pinterest.com\/blog\/building-faster-mobile-web-experience-amp\" rel=\"nofollow\"><small>Building a faster mobile web experience with AMP<\/small><\/a><\/li>\n<li><a href=\"https:\/\/www.ampproject.org\/docs\/get_started\/create\" rel=\"nofollow\"><small>Create your first AMP page<\/small><\/a><\/li>\n<li><a href=\"https:\/\/web.archive.org\/web\/20190212143653\/https:\/\/www.lireo.com\/wordcamp-columbus-2016-using-google-accelerated-mobile-pages-with-wordpress\/\" rel=\"nofollow\"><small>WordCamp Columbus 2016: Using Google Accelerated Mobile Pages with WordPress<\/small><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>ESI<\/h4>\n<ul>\n<li><strong>Edge Side Includes<\/strong> is a language specification for assembling fragments of web pages inside other web pages.<\/li>\n<li>Example:<code>&lt;esi:include src=\"http:\/\/example.com\/1.html\" alt=\"http:\/\/bak.example.com\/2.html\" onerror=\"continue\"\/&gt;<\/code><\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/esi-lang\" rel=\"nofollow\"><small>ESI Language Specification 1.0<\/small><\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2015\/02\/using-edge-side-includes-in-varnish\" rel=\"nofollow\"><small>Controlling The Cache: Using Edge Side Includes In Varnish<\/small><\/a><\/li>\n<\/ul>\n<h4>Reverse Proxy<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-207 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/0qpxZ-300x108.png\" alt=\"Network graph of a Proxy and of a Reverse Proxy\" width=\"300\" height=\"108\" \/><\/p>\n<ul>\n<li>A Reverse Proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client as if they originated from the proxy server itself.<\/li>\n<li>Common choices:\n<ul>\n<li>Varnish<\/li>\n<li>Squid<\/li>\n<li>HAProxy<\/li>\n<li>Nginx<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Reverse_proxy\" rel=\"nofollow\"><small>Reverse proxy<\/small><\/a><\/li>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/224664\/difference-between-proxy-server-and-reverse-proxy-server\" rel=\"nofollow\"><small>Difference between proxy server and reverse proxy server<\/small><\/a><\/li>\n<\/ul>\n<h4>Databases<\/h4>\n<ul>\n<li><a href=\"https:\/\/oracle-base.com\/articles\/10g\/performance-tuning-enhancements-10g\" rel=\"nofollow\">Oracle<\/a><\/li>\n<li><a href=\"https:\/\/wiki.postgresql.org\/wiki\/Performance_Optimization\" rel=\"nofollow\">PostgreSQL<\/a><\/li>\n<li><a href=\"https:\/\/wiki.postgresql.org\/wiki\/Performance_Optimization\" rel=\"nofollow\">SQL Server<\/a><\/li>\n<li><a href=\"https:\/\/web.archive.org\/web\/20200805045846\/http:\/\/www.mikitamanko.com\/blog\/2013\/12\/06\/mongodb-performance-bottlenecks-optimization-strategies-for-mongodb\/\" rel=\"nofollow\">MongoDB<\/a><\/li>\n<li><a href=\"https:\/\/web.archive.org\/web\/20200805045846\/http:\/\/www.mikitamanko.com\/blog\/2013\/12\/06\/mongodb-performance-bottlenecks-optimization-strategies-for-mongodb\/\" rel=\"nofollow\">Redis<\/a><\/li>\n<li><a href=\"https:\/\/tobert.github.io\/pages\/als-cassandra-21-tuning-guide.html\" rel=\"nofollow\">Memcached<\/a><\/li>\n<li><a href=\"https:\/\/tobert.github.io\/pages\/als-cassandra-21-tuning-guide.html\" rel=\"nofollow\">Cassandra<\/a><\/li>\n<li><a href=\"http:\/\/orientdb.org\/docs\/3.0.x\/tuning\/Performance-Tuning.html\" rel=\"nofollow\">OrientDB<\/a><\/li>\n<\/ul>\n<ul>\n<li>http:\/\/lmgtfy.com\/?q=database+optimisation<\/li>\n<\/ul>\n<h2>Tools<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-209\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/ChromeDeveloperTools-300x188.png\" alt=\"Chrome Developer Toolbar\" width=\"300\" height=\"188\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-208\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/SafariDeveloperTools-300x188.png\" alt=\"Safari Developer Toobar\" width=\"300\" height=\"188\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-210\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/FirefoxDeveloperEdition_Developer_Tools-300x188.png\" alt=\"Firefox Developer Toobar\" width=\"300\" height=\"188\" \/><\/p>\n<h3>Understand the Waterfall<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-211\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/55d6b75bd80f29.44214197-300x119.png\" alt=\"Example of Resource Loading in Waterfall Graph\" width=\"300\" height=\"119\" \/> <small><strong>References:<\/strong><\/small><\/p>\n<ul>\n<li><a href=\"https:\/\/blog.radware.com\/applicationdelivery\/wpo\/2014\/03\/waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains\/\" rel=\"nofollow\"><small>Waterfalls 101: How to use a waterfall chart to diagnose your website\u2019s performance pains<\/small><\/a><\/li>\n<\/ul>\n<h3>Extra<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.showslow.com\" rel=\"nofollow\">Show Slow<\/a><\/li>\n<li><a href=\"http:\/\/www.webpagetest.org\" rel=\"nofollow\">Webpagetest<\/a><\/li>\n<li><a href=\"http:\/\/yslow.org\/\" rel=\"nofollow\">Yslow<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/\" rel=\"nofollow\">PageSpeed<\/a><\/li>\n<li><a href=\"http:\/\/gtmetrix.com\/\" rel=\"nofollow\">GTMetrix<\/a><\/li>\n<li><a href=\"http:\/\/redbot.org\/\" rel=\"nofollow\">RedBot<\/a><\/li>\n<li><a href=\"https:\/\/tools.pingdom.com\/\" rel=\"nofollow\">Pingdom<\/a><\/li>\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/search\/spof-o-matic\" rel=\"nofollow\">SPOF-O-Matic<\/a><\/li>\n<li><a href=\"https:\/\/blackfire.io\/\" rel=\"nofollow\">Blackfire<\/a><\/li>\n<li><a href=\"http:\/\/www.yottaa.com\/\" rel=\"nofollow\">Yottaa<\/a><\/li>\n<li><a href=\"https:\/\/www.blitz.io\/\" rel=\"nofollow\">Blitz<\/a><\/li>\n<li><a href=\"https:\/\/loadimpact.com\/\" rel=\"nofollow\">Load Impact<\/a><\/li>\n<li><a href=\"https:\/\/web.archive.org\/web\/20180831060657\/https:\/\/wondernetwork.com\/loadtesting\" rel=\"nofollow\">WonderNetwork<\/a><\/li>\n<li><a href=\"https:\/\/loader.io\/\" rel=\"nofollow\">Loader<\/a><\/li>\n<li><a href=\"https:\/\/www.blazemeter.com\/\" rel=\"nofollow\">BlazeMeter<\/a><\/li>\n<li><a href=\"http:\/\/www.webtuna.com\/\" rel=\"nofollow\">WebTuna<\/a><\/li>\n<\/ul>\n<h2>Books<\/h2>\n<p><a href=\"https:\/\/amzn.to\/3WAClaC\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-212\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51EMd4P-ukL._SY346_-199x300.jpg\" alt=\"You Don't Know JS Performance\" width=\"199\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3WxlmpJ\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-217\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51hbGi7P1rL._SX379_BO1204203200_-229x300.jpg\" alt=\"High Performance MySQL Optimization\" width=\"229\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3YWugOV\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-216\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51uITkEndxL._SX379_BO1204203200_-229x300.jpg\" alt=\"High Performance Mobile Web\" width=\"229\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3GtUbXd\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-215\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51cGhvwszsL-230x300.jpg\" alt=\"High Performance Web Sites Essential\" width=\"230\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3IcluGP\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-214\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/514oWfEBJXL._SX383_BO1204203200_-231x300.jpg\" alt=\"Even Faster Web Sites Performance\" width=\"231\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3i54TtN\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-213\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51FOKng5obL._SY346_-199x300.jpg\" alt=\"Designing Performance Weighing Aesthetic Speed\" width=\"199\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3vnsXex\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-218\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51IaUNQYi-L-1-229x300.jpg\" alt=\"Web Performance Tuning Speeding\" width=\"229\" height=\"300\" \/><\/a> <a href=\"https:\/\/amzn.to\/3hYiJ18\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-219\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/51jcZN5rqdL-1-229x300.jpg\" alt=\"Performance JavaScript Faster Application Interfaces\" width=\"229\" height=\"300\" \/><\/a><\/p>\n<h2>Are you lazy?<\/h2>\n<h3>Which ones are the most important\/common?<\/h3>\n<p><a href=\"https:\/\/www.xkcd.com\/1691\/\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-220 alignright\" src=\"http:\/\/devpath.pro\/wp-content\/uploads\/2017\/08\/optimization-203x300.png\" alt=\"Strip from XKCD about how premature optimisation is the root of all evil\" width=\"203\" height=\"300\" \/><\/a> These 5 ones:<\/p>\n<ul>\n<li>Reduce Page Size (&lt;500Kb)<\/li>\n<li>Enable (GZip) Compression<\/li>\n<li>Reduce the number of round trips (&lt;40 per page)<\/li>\n<li>HTTP Cache Headers (cache long &amp; prosper)<\/li>\n<li>Structure the page (to improve render &amp; download)\n<ul>\n<li>CSS First<\/li>\n<li>Javascript last<\/li>\n<\/ul>\n<\/li>\n<li>Even if you apply just those 5 rules\u2026<\/li>\n<li>Your page download times will drop by ~50%<\/li>\n<li><em>Premature optimization is the root of all evil \u2014 Donald Knuth<\/em><\/li>\n<\/ul>\n<h2>BONUS<\/h2>\n<h3>Bonus #1<\/h3>\n<ul>\n<li>https:\/\/github.com\/davidsonfellipe\/awesome-wpo<\/li>\n<\/ul>\n<h3>Bonus #2<\/h3>\n<ul>\n<li>http:\/\/lmgtfy.com\/?q=web+performance+optimisation<\/li>\n<\/ul>\n<h3>Bonus #3<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>[toc] Performance Optimisation from Fabio Cicerchia At the end of 2016, I gave a talk at the PUG Roma meetup talking about web performance. Despite my expectations of a\u00a0first-time shy speaker, the room was packed with more than 50 attendees.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[68],"tags":[63,64,65,66,67,69,70],"aioseo_notices":[],"author_meta":{"display_name":"fabio","author_link":"https:\/\/fabiocicerchia.it\/author\/fabio"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">Performance<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Performance<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">best practices<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">measuring<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">monitoring<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">optimisation<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">performance<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">talk<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/performance\" class=\"advgb-post-tax-term\">web design<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">best practices<\/span>","<span class=\"advgb-post-tax-term\">measuring<\/span>","<span class=\"advgb-post-tax-term\">monitoring<\/span>","<span class=\"advgb-post-tax-term\">optimisation<\/span>","<span class=\"advgb-post-tax-term\">performance<\/span>","<span class=\"advgb-post-tax-term\">talk<\/span>","<span class=\"advgb-post-tax-term\">web design<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 7 years ago","modified":"Updated 7 years ago"},"absolute_dates":{"created":"Posted on September 9, 2017","modified":"Updated on September 9, 2017"},"absolute_dates_time":{"created":"Posted on September 9, 2017 9:10 pm","modified":"Updated on September 9, 2017 9:10 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts\/47"}],"collection":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":0,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"wp:attachment":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}