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

• http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ -- 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

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

Sprites

Sprites

<img> Elements Sprites Inlining

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 browsers

Compatible 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” - http://requirejs.org

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&A