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

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

Golden Rule 80-90% of the end-user response time is spent on the frontend -- Steve Souders The optimizations of frontend is the web developers job

Network load time waterfall

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.

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

Performance means money

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)

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

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

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”

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

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

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

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

Images Image optimization Sprites

ElementsSpritesInlining High number of extra HTTP requests (one for each image) Moderate number of extra HTTP requests (one for a CSS file, and one for each sprite) Low number of extra HTTP requests (one for a CSS file) Small image file size; images save space when packed together Larger page size due to base-64 encoding Compatible with all browsersCompatible with all current- generation browsers Only compatible with latest versions of WebKit, Mozilla browsers, Internet Explorer (IE8+)

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

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

Bundling and Minification

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

856 bytes 253 bytes

Popular minified libraies

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” -

RequireJS define( id?, dependencies?, factory)

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

Common JS mistakes

Solaborate optimization

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