Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Boosting your conversion rate through web performance improvements

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 19 Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Boosting your conversion rate through web performance improvements (20)

Publicité

Plus récents (20)

Boosting your conversion rate through web performance improvements

  1. 1. ALYSS / OCTOBER 2017 Is it me or is it them? Boosting your conversion rate through web performance improvements
  2. 2. ALYSS / OCTOBER 2017 Alyss Noland Developer Advocate @ BigCommerce
  3. 3. Amazon’s calculated that a page load slowdown of just one second could cost it $1.6 billion in sales each year. Google has calculated that by slowing its search results by just four tenths of a second they could lose 8 million searches per day–meaning they’d serve up many millions fewer online adverts. Kit Eaton, Fast Company
  4. 4. What are we talking about? ● Metrics ● Tools & Testing Strategies ● Performance Improvements ● Practical Implementation Tips
  5. 5. Understanding impact Mobile First It isn’t just for your stylesheets! Mobile first also includes being mindful of data caps and accessibility when dealing with non-LTE speeds. Conversion & Retention Ever given up trying to load a website because it took too long? Your users probably have too. Brand Perception If your website feels fast, that’s great. If it feels slow to the end user, that has more impact (negatively) than some of the other niceties like rewards programs. Let’s clarify: what is web performance? Web performance refers to the speed in which web pages are downloaded and displayed on the user’s web browser. And web performance optimization is the field of knowledge about increasing web performance.
  6. 6. Which metrics matter?
  7. 7. Factors that impact performance HTTP Requests File Compression Caching Minification Image Optimization Redirects Infrastructure 404 Errors CDN Usage 3rd Party Content Fonts JavaScript Plugins Mixed Content Pre- (Fetch, Render, Connect) TTFB Feature overview goes here dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  8. 8. Top offenders When optimizing a site, I focus on: • Page size of top visited pages • Render blocking or slow blocking requests • Total number of HTTP requests • JavaScript performance Insert store screenshot/dashboard (optional)
  9. 9. How do I test my website?
  10. 10. Accessible (read “free”) testing tools ● Webpagetest.org ● Pingdom ● Varvy.com/pagespeed ● Developer tools in your browser of choice
  11. 11. Performance Profiling in Chrome Source: https://umaar.com/dev-tips/
  12. 12. Filter the testing noise When using these tools, you get a lot of data. For example, if you are on a SaaS platform, you may have less control over your TTFB, if you can pre-fetch/render/connect, and the critical rendering path. For folks managing their own hosting, the cost of a CDN may not be as accessible and infrastructure improvements may come more slowly due to budget caps.
  13. 13. Okay, but how do I improve my website?
  14. 14. Page Size Image size Is your website serving up that 4098 x 4098 px PNG that you uploaded? If your host or tools don’t support image optimization, try running images through tinypng.com first and resize. Don’t forget retina devices! JavaScript Try to keep your JavaScript under 300 kB per page (this will change over time). Are you loading JS on a page where it isn’t used? Get more precise! Can you do it with CSS? It is more performant over JavaScript that provides the same effects. GZIP & Minify CSS, JavaScript, and HTML don’t need to be prettified when served to the browser. Get rid of that white space and compress that file once you’re done. The HTTP Archive Report, which gathers technical information from 500,000 of the web’s most popular websites, reports that average page weight increased 16% during 2015 to reach 2,262 kB. In 2013, page size increased by 32%. It will continue to climb.
  15. 15. Render blocking CSS & JavaScript In order to optimize the time to first render by the client: • Use CSS media types & queries for stylesheets needed only under certain conditions • Make JS asynchronous for external scripts • Defer loading of JS that isn’t critical for the initial page render • Leverage server-side rendering if using a javascript framework to construct the page 72.9% Of all websites use JQuery
  16. 16. Optimize HTTP Requests HTTP/2! It’s new, shiny, and it allows multiple resources to be loaded in parallel using only one connection. If you’re still on HTTP1.1, try domain sharding. If you use a CDN, it may already support this. This will enable you to parallelize downloads across hostnames. Reduce the number of assets your pages need to load. Try image sprites (unless you are on HTTP/2), as an example.
  17. 17. Now, what?
  18. 18. Practical Implementation Advice If you’re in the middle of the project, don’t get hung up on the details of optimization. Write code, then refactor and optimize. Set a web performance budget. Make the budget reasonable and achievable. This will keep you from moving the goal post and over-focusing long after the benefits have tapered off. Don’t audit your site just once. It easy to set it and forget it. Schedule quarterly or yearly performance audits to make sure you are within your performance budget. Don’t forget: fast is good, but good ux is better.
  19. 19. ALYSS / OCTOBER 2017 Thank you!

×