Why Page load time matters? Facebook: Facebook pages that are 500ms slower result in a 3% drop-off in traffic, 1000ms is 6% drop-offAmazon: If Amazon increased page load time by +100ms they lose 1% of salesGoogle: If Google increased page load by +500 ms they get 25% fewer searches. http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
What is general User expectation General:• 47% of web users expect a page load of 2 seconds or less• 14% of users will start shopping at a different site if a page loads too slow• 40% of users will abandon a website that takes more than 3 seconds to load• 64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time• 52% of online shoppers claim that quick page loads are important for their loyalty to a site http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
Performance Poverty Line http://www.webperformancetoday.com/2012/06/05/web-performance-poverty-line/
First things first… Do you browse your websites on a low- end consumer grade laptop with only 1 GB RAM, one or two cores, heavily fragmented hard disk, browser cache full of gigabytes of trash? Do you browse your website on a browser infested with toolbars, adbots, malwars? Do you browse your website with super slow antivirus and internet security products? Like Norton, McAfee? Do you browse your website from the lowest broadband packages available in the market? http://www.codinghorror.com/blog/2007/02/choosing-anti-anti-virus-software.html
Mix server side JSON and client side AJAX calls Spend max 1 sec on server preparing the embedded JSON. Take data that has been loaded within 1 sec and serialize into JSON. In parallel, load and cache the rest of the data for the AJAX call to pickup. Embed only the JSON that renders the visible part of the screen. Problem: For 1 sec user stares at blank screen. Nothing happening on browser.
Loading js, css while fetching data on server
#4 Render initial data as html from server Instead of using scripts to render page from embedded JSON, render the html directly from server. User gets the page as if it’s a static page. No waiting for JS to download. No waiting for Webservice calls. There’s nothing faster than this.
#5 Render placeholder of content loaded dynamically Generate placeholder for content where further data is loaded dynamically. This gives a feeling that the page is building progressively and gives better perceived performance.
#6 Grow the page vertically • Content should grow uniformly, vertically. Do not shrink any placeholder or element on the page. It causes a disturbing rendering experience.
Bonus #8: Reflection on Connection View CSS Large combined .eot! JS Suboptimal distribution of link and script tags Static SSL content handshake loading too too slow late http://www.webpagetest.org/