web_performance_presentation

Improving Web Performance

Why is it Important ?

JavaScript & CSS

Create JavaScript & CSS as separate files

Put Stylesheets at the Top

pages appear to be loading faster

progressive rendering

Put Scripts at the Bottom

prevents blocking of parallel downloads

Minify JavaScript and CSS

Un-Minified Code

Easy to read & debug.

Minified Code

Smaller filesize, faster download & execution.

Tools

CSS Sprites

What are they ?

How to Use them?

Image Declaration

#container li {
    		background: url(sprite_image.png) no-repeat top left;
			}

CSS Rules

.sprite-akamai{ background-position: 0 0; width: 375px; height: 134px; } 
.sprite-cdnjs{ background-position: 0 -144px; width: 246px; height: 65px; } 
.sprite-cloudflare{ background-position: 0 -219px; width: 272px; height: 186px; } 
.sprite-google{ background-position: 0 -415px; width: 360px; height: 88px; }

CSS Sprites used by Amazon.com

Using Gzip Compression

Without Gzip Compression

Browser:

Connects to server and requests page. Server that browser supports gzip "Accept-Encoding: gzip".

Server:

No gzip support. Ignores gzip request. Sends uncompressed page.

Browser:

Receive page. Display page.

With Gzip Compression

Browser:

Connects to server and requests page. Server that browser supports gzip "Accept-Encoding: gzip".

Server:

Acknowledges gzip support. Sends gzip encoded page with header "Content-Encoding: gzip".

Browser:

Receive page. Decode gzip encoded page based on header "Content-Encoding: gzip". Display page.

Improving Web Performance – Why is it Important ? – JavaScript & CSS

kmathur7

Improving Web Performance – Why is it Important ? – JavaScript & CSS

0 0