Presentation on Instant page speed optimization

Resources
•
•
•
•

Code.google.com
Yahoo Developers
Web Site Caching (Book)
Few more websites, came across while writing
recipes.

Sanjeev Kumar Jaiswal
http://www.aliencoders.com

2

Table Of Contents


3

Following HTML Standards
• <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

•
•
•
•

CSS files at the top under the head tag
JavaScript scripts at the bottom of the body tag
Use the tableless design whenever possible
Use proper ending methods of one-sided tags.
Ex: <br /> instead of <br>

• Tags should be properly closed
• Avoid deprecated tags like <b>, <i>
• Use HTML validator (FF Plugin) for better results


4

Rules for using the CSS, JavaScript, and image
files

• Using external files for stylesheets and
JavaScript
• Using correct order of stylesheets, scripts, and
inline JavaScript code
• Don't scale images in HTML
• Removing Duplicate
• Avoid CSS @import
• Avoiding empty image src

5

Minimizing HTTP Requests
•
•
•
•
•
•

Reducing DNS Lookups
Using combined CSS files and scripts
Using CSS Sprites (spriteme.org)
Using imagemaps (FF Plugin imagemap editor)
Firefox plugins Speed DNS
Minify js scripts and CSS files


6

Optimizing Images
• Use text with CSS3 instead of images, if
possible
• Use web format of images like gif or png
• Use photo editor to use exact image size
required
• Use the height and width attributes under the
img tag


7

Enabling Compression
• For IIS Folks!
http://technet.microsoft.com/en-us/library/cc730629(v=ws.10).aspx

• For PHP Folks
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')
ob_start("ob_gzhandler");
else
ob_start();
?>


8

Enabling Compression cont…
For Apache Geeks
• Apache has two compression modes,
mod_deflate and mod_gzip.
http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

• compress specific file types:
<files *.html>
SetOutputFilter DEFLATE
</files>

• or use AddOutputFilterByType
AddOutputFilterByType DEFLATE text/html text/plain text/xml


9

Adding an Expires or Cache-Control header
• It will only help in optimizing the website if it has been
already visited and the cache is not empty, else it has no
effect
• Add the Expires metadata for static contents.
<META HTTP-EQUIV="Expires" CONTENT="Sat, 04 Dec 2021 21:29:02 GMT">

• The response header would contain the Expires term like this:
Expires: Sat, 04 Dec 2021 21:29:02 GMT

• Add Cache-Control metadata for dynamic contents
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="PUBLIC">


10

Setting up browser Caching
• Tools->Options->Advanced->Network->offline
Storage
•
•
•
•

about:config->browser.cache.check_doc_frequency
Gateway Cache like Akamai , AWS etc
In CGI: print "Cache-Control: max-age = 3600n";
Apache
### activate mod_expires
ExpiresActive On
ExpiresByType image/gif seconds

12

Make favicon small and cacheable
• Modern browsers request for favicon.ico by default
• Make it of 16x16 pixels and lesser file size say 1KB
• favicon always gets downloaded while making a
request to the server
• set the expires header to a future date.
• If you are going to change the extension of your
favicon, be sure to use the <link> tag in HTML
• it's a good idea to always have the favicon.ico file in
your root directory, to avoid a “File not found” error


13

Configuring Etags (Entity Tags)
• browser's cache contents are the same or different
from the origin server
• ETags useful for the CSS, JavaScript, and image files
• Enable ETag if served from the same server else disable
• add the following line at the end of httpd.conf or
apache2.conf:
– FileETag INode MTime Size

• To Disable add lines at the end of httpd.conf or
apache2.conf:
– FileETag None
– Header unset ETag

14

Using Apache mod_pagespeed
• It supports only :
– Debian/Ubuntu (32&64)
– CentOS/Fedora (32&64)

• Install
– pkg -i mod-pagespeed-*.deb apt-get -f install (Debian)
– rpm -U mod-pagespeed-*.rpm (For CentOS)

• It installs mod_pagespeed.so for Apache 2.2 and
mod_pagespeed_ap24.so for Apache 2.4
• <IfModule pagespeed_module>#config lines here</IfModule>
• # mod_pagespeed output handler.
– AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html

• mod_pagespeed automatically enables mod_deflate for compression

• ModPagespeed on/off/unplugged

15

Thanks
• Thanks to Ravindran for his valuable feedback
and reviews for this book 
• Thanks to Vignesh and Siva for their guidance
in my regular job.
• Thanks to teammates and AlienCoders Users
who always support me to go for something
big 


16

Support Us
•
•
•
•
•
•
•

Facebook: https://www.facebook.com/aliencoders
Twitter: https://twitter.com/aliencoders
YouTube: http://www.youtube.com/user/jassics
LinkedIn: http://www.linkedin.com/groups/Alien-Coders-4642371
G+: https://plus.google.com/115500638348284368431/posts
Pinterest: http://www.pinterest.com/aliencoders/
Website: http://www.aliencoders.com

17

Presentation on Instant page speed optimization

More Related Content

What's hot

Viewers also liked

Similar to Presentation on Instant page speed optimization

Recently uploaded

Presentation on Instant page speed optimization