Ecommerce page speed optimization
•Download as PPT, PDF•
1 like•754 views
A website’s speed is key factor for a successful ecommerce store. Every second of webpage load time will translate into lower conversion rates and lost sales. We will talk about why page speed is important and what you can do to make your website load quicker. The talk will seek to answer these questions: What are the effects of page speed on ecommerce websites? How can you identify the causes of long page load times? What are common ways of resolving page load issues? The talk will be a great way for you to learn more about page speed optimization and it will challenge you to critique your own website or your clients to see how fast you can make it.
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Ecommerce page speed optimization
- 2. OVERVIEW Effects of page speed on ecommerce websites Detecting page speed issues Resolving common page speed issues
- 3. WHAT ARE THE STANDARDS? Mobile Google wants pages to load in under a second! Desktop • DOM Content Loaded: 1s - 2s • Total Download Size: 1MB - 2MB • HTTP Requests per page: 50 - 75 Google: Making Smartphones Load Fast Need for Speed: How to Improve Your Website Performance
- 4. HOW ARE WE DOING? Trilibis Study •69% of the sites took an unacceptably long time to load, (8s+) •21% took less than 4s to load •Images contributed more than 50% of overall page weight 2014 Study by Trillibus
- 5. HOW ARE WE DOING? 2014 Radware State of the Union Report
- 6. EFFECTS OF PAGE SPEED Revenue User Experience (UX) & Trust SEO
- 7. EFFECTS OF PAGE SPEED: REVENUE Reduced conversion rates Drop in cart size Increased bounce rate Lower repeat visitors How Loading Time Effects your Bottom Line 2014 Ecommerce Site State of the Union
- 8. EFFECTS OF PAGE SPEED: UX & TRUST User Expectations Neurological impact of poor performance Impact on your company’s brand Slower Web Pages Lead to User Frustrations Browser Diet: Impact of Performance
- 9. EFFECTS OF PAGE SPEED: SEO Page Relevancy vs. Load Time Studies Show Page Load Time Time to First Byte Page Size How Website Speed Actually Impacts Search Ranking Google: Using Site speed in Web Search Ranking
- 10. EFFECTS OF PAGE SPEED: RECAP Revenue User Experience (UX) & Trust SEO
- 11. OVERVIEW Effects of page speed on ecommerce websites Detecting page speed issues Resolving common page speed issues
- 12. DETECTING PAGE SPEED ISSUES Using Analytics Analyzing a Page Inspecting individual files
- 13. DETECTING ISSUES: USING ANALYTICS Google Webmaster Tools Google Analytics
- 14. DETECTING ISSUES: ANALYZING A PAGE Web Based Google Page Speed Insights Pingdom WebPageTest.org DevTools Audits PageSpeed
- 15. DETECTING ISSUES: INDIVIDUAL FILES Understanding Waterfall Diagrams Checking Headers Timing Chrome DevTools: Evaluating Network Performance
- 16. DETECTING PAGE SPEED ISSUES: RECAP Using Analytics Analyzing a Page Inspecting individual files
- 17. OVERVIEW Effects of page speed on ecommerce websites Detecting page speed issues Resolving common page speed issues
- 18. RESOLVING COMMON ISSUES Server Sided Solutions On-page best practices Improving Perception
- 19. RESOLVING ISSUES: SERVER SIDED SOLUTIONS .htaccess DNS Adjustments Cookieless Subdomain Parrellize Requests across domain names CDNs mod_pagespeed
- 20. RESOLVING ISSUES: ON-PAGE BEST PRACTICES Optimize Images Tools: Compressor.io (Web), Riot (PC), ImageOptim (Mac) Reduce the number of requests Concatenating & minifying Image Sprites Minimizing 3rd Party Plugins Social Media Icons Light YouTube Videos Chrome DevTools: Evaluating Network Performance
- 21. RESOLVING ISSUES: PERCEPTION OF PAGE SPEED Render Above the Fold First Inline Critical CSS Lazy Load Images Use Progressive JPGs Optimize Animations & DOM updates Other PJAX & InstantClick Loading Indicators
- 22. RESOLVING ISSUES: RECAP Server Sided Solutions On-page best practices Improving Perception
- 23. OVERVIEW Effects of page speed on ecommerce websites Detecting page speed issues Resolving common page speed issues
- 24. TAKE AWAYS Review Your Site Google Page Speed Insights Pingdom Use these checklists Google: Web Performance Best Practices BrowserDiet
Editor's Notes
- Before Presentation: -- Log into BTO Sports Analytics
- Mobile (http://googlewebmastercentral.blogspot.co.uk/2013/08/making-smartphone-sites-load-fast.html) Google Webmaster Central published an article in August 2013 Pages should load under a second Desktop (http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) Time for the First Byte: 200ms - 350ms DOM Content Loaded: 1000ms - 2000ms JS Load Event Fired: 900ms - 2200ms Total Download Size: 1MB - 2MB DNS Lookup: 10ms - 20ms HTTP Requests per page: 50 - 75
- According to a Study by Trilibus Sampled 155 responsively designed websites
- Last slide in intro! The median top 100 retail site takes 5.4 seconds to render primary content, and 10.7 seconds to fully load. The median top 500 page is 1.5 MB in size (38% bigger than the 1095 KB we measured in 2013), while the median top 100 page is 1.6 MB(66% bigger than the 1007 KB we measured in 2013). While 75% of sites use a CDN to cache static resources closer to end users (thereby improving server round trip time), most sites don’t take full advantage of other optimization best practices, such as image compression and progressive image rendering.
- A 1 second delay can result in: 7% reduction in conversions 2% drop in cart size 8% increase in bounce rate 79% of shoppers who are dissatisfied with website performance are less likely to buy from the same site again, and 40% of them will tell their friends Checkout, login and home pages matter most
- 47% of consumers expect a web page to load in 2 seconds or less Most participants would wait 6-10 seconds before they abandon a page. 500ms connection speed delay resulted in up to a 26% increase in peak frustration 8% decrease in engagement 95% of the consumer’s decisions are made at the subconscious level Patients with damage to emotional parts of the brain cannot make decisions, Slow sites can seriously undermine overall brand health
- From Google: While site speed is a new signal, it doesn't carry as much weight as the relevance of a page. SEO MOZ Study found: Page load time No clear correlation between document complete or fully rendered times with search engine rank Time to first byte clear correlation was identified between decreasing search rank and increasing time to first byte Page size (bytes) decreasing page size to decreasing page rank
- Where do you start? Lets take a top down approach to solving page issues
- Demo Log into BTO Sports Analytics Review Crawl Stats Find Speed Suggestions Webmaster Tools Crawl Crawl Stats Time Spent Downloading Page Google Analytics Behavior Site Speed Speed Suggestions
- Waterfall Diagrams You want them thin & steep Modern browsers like Chrome can download up to 8 resources at a time in some cases Beware long horizontal lines that “hold up” other content from loading
- .htaccess Compression Mod_deflate, gzip Expires Headers Serve resources with far-future expires headers mod_include.c DNS Adjustments Cookieless Subdomain CDNs mod_pagespeed combining and minifying JavaScript and CSS files inlining small resources, and others. dynamically optimizes images by: removing unused meta-data from each file resizing the images to specified dimensions re-encoding images to be served in the most efficient format available to the user
- Optimize Images Tools: Compressor.io (Web), Riot (PC), ImageOptim (Mac) Reduce the number of requests Concatenating & minifying Image Sprites Minimizing 3rd Party Plugins Social Media Icons Light YouTube Videos 12 http requests, with 400 kB of data before the user has hit the play button
- Render Above the Fold First Inline Critical CSS Lazy Load Images Use Progressive JPGs Optimize Animations & DOM updates -- CSS3 Transitions vs Pos:abs -- Don’t update the dom in a loop Other PJAX & InstantClick Loading Indicators