Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Performance in Action: speed up your websites

1,839 views

Published on

Web Performance in Action is your companion guide to making websites faster. These days, you never know what kind of technical constraints the people browsing your website might be under, so it's more important than ever that your website loads quickly.

Save 42% off of Web Performance in Action with code sswagner at:
https://www.manning.com/books/web-performance-in-action

New from manning.com

Published in: Internet
  • Be the first to comment

Web Performance in Action: speed up your websites

  1. 1. Why should you care about web performance? Save 42% off Web Performance in Action with code sswagner at manning.com.
  2. 2. What is web performance? You’ve probably heard about performance as it relates to websites, but what is it and why should you and I care about it? Web performance refers primarily to the speed at which a website loads. This is important because shorter load times improve the user experience for your site on all internet connections.
  3. 3. Why is web performance important? A faster website means that the user is more likely to see what your website has to offer. This helps you achieve goals as simple as getting more users to visit and read your website’s content, or as lofty as getting users to take action. Slow websites test users’ patience and might result in them abandoning your website before they ever see what it has to offer.
  4. 4. Why is web performance important? If your website is a major source of revenue, it literally pays to take stock of your site’s performance. If you have an e-commerce site or a content portal that depends on advertising revenue, a slow site affects your bottom line. Web Performance in Action teaches you all about web performance, basic performance-boosting techniques, and ways to apply them in order to optimize a client’s single-page website.
  5. 5. Why is web performance important? People more likely to interact with content that loads quickly. By making your site faster, you improve the user experience by speeding up the delivery of content. In addition, the performance of your website impacts not only your users, but also your website’s position in Google search results.
  6. 6. Why is web performance important? Slow websites also have a measurable effect on user engagement. On e-commerce sites in particular, nearly half of users expect a website to load within 2 seconds. And 40% of users will exit if it takes more than 3 seconds to load. A 1-second delay in page response can mean a 7% reduction in users taking action (https://blog.kissmetrics.com/loading-time). This means not only a loss of traffic, but a loss of revenue.
  7. 7. Understanding web performance issues. To understand why web optimization is necessary, you need to know where the problem lies, and that’s in the basic nature of the way web browsers and web servers communicate. When it’s said that web performance focuses on making websites load faster, the primary focus is on reducing load time. Load time is the time it takes from when a user requests a website and the moment it appears on their screen.
  8. 8. Understanding web performance issues. The mechanism driving load times is the time it takes for the server’s response to reach the user after the user requests content.
  9. 9. Understanding web performance issues. There are several steps involved when a user requests a website and each one incurs latency, i.e. the amount of time spent waiting for requests to go from A to B and back to A. One of the primary aims of web performance is to reduce latency wherever possible. The amount of latency for a single request is trivial, but loading practically any website involves more than a single request for content.
  10. 10. Identifying areas of improvement. To optimize a website, you need to identify areas where it could be improved. Chrome’s network tools can come in handy for analyzing the number of requests on a page, the amount of data the page contains, and the amount of time it takes for the page to load. You can see a waterfall chart of a potential client’s website on the next slide.
  11. 11. Identifying areas of improvement.
  12. 12. Identifying areas of improvement. The kind of devices your users are using must also be taken into account.
  13. 13. Optimizing a website. Our goal is simple: reduce the amount of data transferred. Having less data flying back and forth reduces latency, which means faster load times. This reduction in data can be accomplished in a number of ways. Let’s take a look!
  14. 14. Optimizing a website – minifying assets. Minifying assets is basically what it sounds like – making things smaller. Minifying is a process by which all whitespace and unnecessary characters are stripped from a text-based asset without affecting the way that asset functions. Whitespaces, line breaks, and other characters are there to help people read code, but web browsers don’t need them.
  15. 15. Optimizing a website – minifying assets. Here is a minification of a CSS rule.
  16. 16. Optimizing a website – minifying assets. The CSS, JavaScipt, and HTML of a website can all be minified. The chart on the right shows load times, pre and post minification.
  17. 17. Optimizing a website – using server compression. Server compression works the same as when you compress files (e.g. for easier emailing). Web servers can accept and decompress content on the user’s behalf. This is useful because much downloaded content from website is text, which compresses well.
  18. 18. Optimizing a website – using server compression.
  19. 19. Optimizing a website – using server compression. By employing server compression you can reduce the “weight” of your page and the amount of data getting transferred. This leads to faster load times.
  20. 20. Optimizing a website – image optimization. Image optimization has come a long way and today’s algorithms are really good at reducing image size without losing image quality. You can save a lot of space by optimizing images and there are a whole host of tools available to help you reduce image size and minimize undesirable side effects.
  21. 21. Optimizing a website – image optimization. Here is an example of an image, pre and post optimization.
  22. 22. Optimizing a website – image optimization. We can save a lot of space by optimizing images, and the result looks basically the same – as you can see from the previous slide. Our load times are getting faster!
  23. 23. Optimizing a website – the final “weigh in.” Let’s pretend that we have been applying the methods we have discussed to a theoretical client’s website. Here is what we would have accomplished:
  24. 24. Optimizing a website – the final “weigh in.” We have significantly reduced the size of the website and latency. As you can see, Load times improved by approximately 70% for all visitors on
  25. 25. Optimizing a website – the final “weigh in.” Your optimization efforts have improved load times for the client’s website by nearly 70% for all users, regardless of which device they may be using to visit the site. As you can see, even basic performance-tuning techniques can be effective and can improve the user experience in a measurable way. The best part is, we’ve only scratched the surface. You can download the first chapter of Web Performance in Action here, for free!
  26. 26. Make your website fast as it can be! Save 42% off Web Performance in Action with code sswagner at manning.com. Also see:

×