Ecommerce page speed optimization

  • 155 views
Uploaded on

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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
155
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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

Transcript

  • 1. ECOMMERCE PAGE SPEED OPTIMIZATION STEVEN SOULE
  • 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
  • 25. QUESTIONS? THANK YOU SSOULE@MIVAMERCHANT.COM