7 Ways To Improve your Web Application Performance On a Budget
•Download as PPTX, PDF•
2 likes•867 views
Web page performance is vital to any online business. Luckily it doesn't cost a lot of money to grealty improve the performance of both your web sites, and your entire web application. This presentation points you to a number of tools, techniques, and best practices that you need to know about in any optimization effort.
Recommended
Recommended
More Related Content
More from Lenny Rachitsky
More from Lenny Rachitsky (18)
Recently uploaded
Recently uploaded (20)
7 Ways To Improve your Web Application Performance On a Budget
- 1. 7 Ways to Improve Your Web Application Performance (on a Budget)
- 2. Introduction
- 4. Goal #2 No need to take notes
- 5. Goal #3 Goal #3 Finish early
- 6. Goal #3
- 7. Goal #3
- 8. Agenda Best practices Free tools/services 3rd Parties The Cloud Making the most of your monitoring – Proactive Making the most of your monitoring – Reactive Social Media Bonus
- 10. Steve Souders
- 12. 14 Rules
- 13. The Power of Less Combine Minimize Compress Cache Sprites
- 14. Combine
- 15. Minimize
- 16. Compress
- 17. Cache
- 18. CSS Sprites
- 19. Location, Location, Location CSS at the top JavaScript at the bottom Inline = Bad Post-load
- 20. Cuzillion
- 21. #2 Free tools and services
- 22. Firebug onLoad blocking DOMcontentLoaded
- 23. Firebug No blocking
- 24. Google Page Test
- 25. Google Page Test
- 26. Google Page Test
- 28. WebPageTest.org
- 29. WebPageTest.org
- 30. WebPageTest.org
- 31. just-ping.com
- 32. Smush.it Image on the front page
- 34. #3 3 rd Parties
- 35. CDN’s
- 36. CDN’s (pricing)
- 38. DNS
- 40. #4 The Cloud!
- 44. Lessons so far
- 45. #5 Make the most of your existing monitoring(Proactivel y)
- 52. #6 Make the most of your existing monitoring (Reactively)
- 55. Add new monitors
- 56. Script Recorder
- 57. Alerting
- 58. #7 Social Media
- 63. Bonus Method Bonus Google Analytics + Event Tracking
- 65. Agent Dashboard Event 2 Event 1 Event 3
- 66. Code to time here
- 67. Sample Graphs
- 68. Links Links to everything mentioned: http://bit.ly/PerformanceLinks Link to the presentation: http://bit.ly/PerformancePresentation
- 69. Thank You! Questions? Thanks for your feedback! Lenny Rachitsky Senior Engineering Manager Lenny.Rachitsky@neustar.biz Call Us: 877-524-8299 Email Us: WMOutsideMktg@NeuStar.biz Learn More: www.webmetrics.com http://bit.ly/PerformanceLinks http://bit.ly/PerformancePresentation
Editor's Notes
- Thank you Shirin I’m going to try to dive right into the useful stuff and keep the introduction as short as possible I have three goal’s for this talk…
- #1. I want to make sure everyone leaves today with at least one actionable take away or new nugget of knowledge to make your web applications and web sites faster.
- #2: I’m going to put these slides online along with notes and links to everything I talk about so there’s need to take notes. Just sit back and enjoy.
- #3: I’m going to try to finish early and give everyone an opportunity to ask questions, and also hopefully get to a bonus tip that didn’t fit into the original talk. I don’t think anyone ever wished a webiner took longer then expected, and I don’t want to take any more of your time then is necessary, so I’ll do my best move today’s talk along.
- So…before you think you’re in the wrong webinar, let me explain. About 6 months ago I proposed to my girlfriend at Disneyland. As you can see she was pretty surprised and it was a a good time.
- Like all of the the cool kids, we put together a web site for friends and family to come RSVP, find registries, suggest music, contact us, etc. What I want try today is to use this site as a simple test case aswe go through the various ways to improve your own web application performance.
- Here’s a quick overview of what I’ll be covering today. As promised, there are seven broad categories that we’ll go over, and If there’s enough time at the end, I’ll also cover a bonus tip that is pretty interesting. So let’s get started…
- First of all lets talk about the fundamental concepts of web page performance.
- Most of the advice in this first section comes from the work of a gentleman named Steve Souders, who’s kind of the godfather of page performance. He was Chief Performance Yahoo! at Yahoo for a number of years, and is now a page performance evangelist at Google. I definitely recommend you check out his book, High Performance Web Sites, for the gory details but I’m going to cover the most important points here and link you to more details at the end of the talk.(Maybe: I actually had met him yestarday at the O’Reilly Velocity which was pretty cool).
- The broad idea here is that on average 80% of the performance of web pages comes from the client side downloading and rendering each page, meaning that if you’re looking to make the biggest impact to what your visitors experience, the front end is generally where you want to focus first. For example if you look at this waterfall graph, only 5% of the page load time came from the base page, which is the time it takes for your application to complete. If you cut the performance of your application code by 50%, that’s going to be a very small impact to your end user.
- These are the now classic set of 14 rules that Souders put together that focus on improving front end performance, and they’re all useful, but I’m going to focus on two broad areas that cover 10 of these rules that give you the biggest benefit. And note that you don’t need to spend any money on anything here.
- The first broad concepts that encapsulate a number of the best practices is something I’ll call the power of less. Basically you should aim to reduce what your visitors need to download when loading your pages. It’s pretty simple if you think about it. The less you send, and the fewer connections the user has to make, the faster the page will load. But don’t be deceived by the apparent simplicity. There are a some real nuances and non-obvious approaches here that are important. Let’s run through the specific concepts here.
- #1. You want to cut down on the number of external css and javascript files that your page references. The more external files you have on your pages the more connections your clients need to make to your servers, the longer it’ll take to complete the page. The way you do this is by merging all of your CSS into one file, and all of your Javascript into another file. Pretty easy. This way you end up with just two external files, one for all of your CSS and one for all of your Javascript. In terms of the development and release management workflow, you still work in as many separate files as you want and keep it organized in any way that makes sense to you, but when you push to production you can use one of many freely available tools that merges all of your files for you and you end up with just the two consolidated files.
- Now that you’ve got the two large CSS and javascript files, you want to squeeze out as much unnecessary stuff as possible. You do this by minimizing your CSS and Javascript files to remove the human readable spaces, the tabs, and the newlines, which add a good amount of useless size to those files. Again, you don’t have to do this manually, there there are some great tools that you can use to make this process automatic, which I’ll also link to at the end of this talk. Generally, you’ll do this at the same time you merge the files in the release process. In the end you’ll have a CSS and a Javascript file that are as tight as they can possibly be before you get to the third best practice…
- Compression. You want to compress as much of your content as possible before it goes across the wire. Every web browser these days (except maybe Lynx) support receiving compressed content out of the box, and there’s no reason not to take advantage of that. Compressing cuts down on the download time by about 70%, and will save you both in bandwidth costs and with increased performance. Depending on your web server, it’s generally a matter of enabling a few settings and potentially installing a new module. Once that’s in place, you never have to think about it again. You’ll want to have it automatically compress all of your HTML, plus all of the CSS and javascript files. There’s no need to compress image files, as they are already compressed and it actually slows them down.
- #4: You want to make sure to set up your web server to cache as much content as possible. This helps returning visitor performance in a big way. In this example, notice the massive difference between the first and repeat visit. There are a lot of gory details here that we don’t have time to cover, but again I’ll link to some step by step instructions at the end of the talk. From a high level though, you want to look at the Expires headers and Etags and how your web server is handling those.
- Last in this section is the concept of CSS sprites. The basic idea is that you combine as many images you can into a single image file, and then use CSS magic to position them around your page. This is Amazon.com’s sprite image, which they manipulate in CSS when displaying every page. The clear benefit is that your visitors only download one file, versus one for each image. You’ll notice this applies to everything from the main logo to the small icons at the bottom. This concept actually comes from video games, which is pretty cool.