Presentation on Instant page speed optimization
Post on 08-May-2015
5274 Views
Preview:
DESCRIPTION
Transcript
Resources
• Code.google.com
• Yahoo Developers
• Web Site Caching (Book)
• Few more websites, came across while writing recipes.
2 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
Adding an Expires or Cache-Control header contd..
The following are the two cache-related header parts that you should know (rfc 2616, section 14.9): • cache-request-directive = "no-cache" | "no-store" | "max-age" "=" delta-seconds | "max-stale" [ "=" delta-seconds ] | "min-fresh" "=" delta-seconds | "no-transform" | "only-if-cached" | cache-extension • cache-response-directive ="public" | "private" [ "=" <"> 1#field-
name <"> ] | "no-cache" [ "=" <"> 1#field-name <"> ] | "no-store" | "notransform" | "must-revalidate" | "proxy-revalidate" | "max-age" "=" delta-seconds | "s-maxage" "=" delta-seconds
11 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 = 3600\n";
• Apache
### activate mod_expires
ExpiresActive On
ExpiresByType image/gif seconds
12 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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
Sanjeev Kumar Jaiswal http://www.aliencoders.com
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 Sanjeev Kumar Jaiswal
http://www.aliencoders.com
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
Sanjeev Kumar Jaiswal http://www.aliencoders.com
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
top related