1 / 40

Web Performance Optimization

Web Performance Optimization. Think Fast by default. Boban Stojanovski (Senior Front End Developer at Solaborate ). Change of Mindset. Make performance a priority Put performance in requirements documentation Make it part of your development routine

alida
Télécharger la présentation

Web Performance Optimization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Performance Optimization Think Fast by default Boban Stojanovski (Senior Front End Developer at Solaborate)

  2. Change of Mindset Make performance a priority Put performance in requirements documentation Make it part of your development routine Developers have great machines, what about the rest of the world

  3. Golden Rule • 80-90% of the end-user response time is spent on the frontend • http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ -- Steve Souders • The optimizations of frontend is the web developers job

  4. Network load time waterfall

  5. Performance matters Performance matters to the end user Perceived speed vs. Actual Speed (Visual completeness) Many studies show user are more interested in Perceived speed Fast page load time builds trust in your website.

  6. 3 Critical Limits 0.1 Second – the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. 1.0 Second – limit for the users flow of thought to remain uninterrupted 10 Seconds = limit for keeping the user attention on the screen

  7. Performance means money

  8. Performance means money

  9. How to approach optimization • There are 2 things to take into consideration : • Measurement and Perception • There has to be a balance between the two • Efficiency – Speed , Memory … other resources • Noncritical vs Critical optimization paths • Benchmark and quantify results • Make users studies, let them judge the experience (science fiction for most of us)

  10. Quotes “Premature optimization is the root of all evil” - Donald Knuth

  11. Quotes “Programmers waste enormous amounts of time … worrying about the speed of noncritical parts of their apps… We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%. A good programmer will not be lulled into complacency by such reasoning, he will be wise to look carefully at the critical code; but only after that code has been identified” - Donald Knuth “Bottlenecks occur in surprising places, so don't try to second guess and put in a speed hack until you have proven that's where the bottleneck is.” - Rob Pike “The First Rule of Program Optimization: Don't do it. The Second Rule of Program Optimization (for experts only!): Don't do it yet.” - Michael A. Jackson

  12. Quotes “Optimizing non-critical code paths is the root of all evil.” – Donald Knuth Other way to put it “Immature Optimization is the root of all evil”

  13. Promised Refactor Just do it  …. We will refactor (fix it) later Be responsible talk to your boss about total cost Nice way to fix obvious mistakes … have code reviews

  14. YSlow YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

  15. YSlow Rules Minimize HTTP Requests Use a Content Delivery Network Add an Expires Header GzipComponents Put Stylesheets at the Top Put Scripts at the Bottom Make JavaScript and CSS External Do Not Scale Images in HTML Minify JavaScript

  16. YSlow Rules Reduce DNS Lookups Remove Duplicate Scripts Configure Etags Make AJAX Cacheable Post-load Components Pre-load Components Reduce Cookie Size Use Cookie-free Domains for Components Empty image src Reduce the Number of DOM Elements

  17. Images Image optimization Sprites

  18. Sprites

  19. Sprites

  20. Image file types PNG : for transparency and more color PNG-24 for less color PNG-8 JPEG : Lot’s of color (photo like),Easy to change quality,No Transparency GIF : Very heavy. Most animations can be replaced with CSS3

  21. Quiz What file type would you use for the background of these buttons? PNG-8,PNG-24,GIF,JPEG?

  22. Bundling and Minification

  23. Levels of Minification Level 1: Removal of white space and comments Level 2: Remove extra semicolons and curly braces Level 3: Local variable name shortening Level 4: Removal of unreachable or unused code Level 5: Global shortcuts and shortening of function names

  24. 253 bytes 856 bytes

  25. Popular minified libraies

  26. AMD vs Bundling Asynchronous Module Definition (AMD) specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems. Most popular AMD library is “require.js” - http://requirejs.org

  27. RequireJS define( id? , dependencies? , factory)

  28. Other things Only send trough that witch is necessary Compress your JSON response , shorten the names of props and remove null(empty) fields Write better JS Write your own plugins

  29. Common JS mistakes

  30. Solaborate optimization

  31. Благодарам за вниманието Q&A

More Related