Web tips for improving the speed of website

Best practices

1. Minimum HTTP request
2. Minified CSS and JS code
3. Sprite images
4. Proper Cache-control

An initial page load required about 36 requests. Out of this, 4 requests were for CSS and about an equal number of JS files. Now If I was you, I would ask myself the following questions.

1. Are these CSS & JS files always required? If yes, can I combine them into one?
2. Can I avoid loading the unrequired CSS & JS files for the initial page load? i.e. download them only when necessary and being used. (E.g. is print.css required for initial page load ?)

The ultrabasic tips to improve the speed would be.

1.use semantic markup

2.useless images- try Raphael JS, HTML5 Canvas, and other native drawing approaches

3.minify your javaScript

4.minify your CSS

5.use gzip

6.remove APIs that you don't use, include only what's needed.

7.use localStorage and Cache Manifest where ever possible

8.use css3 effects such as gradients,box-shadows,text-shadows etc. instead of images and background-images

9.have a clean and simple design

10.hand code to keep your code simple and minimal.

1. use script tags at the bottom

one very important thing .. develop your site keeping users in mind not SEO or ad revenue. keep it simple.

Enable compression via .htaccess

We need to add these lines to our .htaccess file.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
<IfModule>

Azad Mohammed

An editor at AzadEducation

View Articles

I'am Azad, These blogs, tech skills and programing news, I am sharing with my exprience. I have 4+ year experiece in the web development. Also we are learning investing ideas. I believe in "big mind big dream", that will convert in smart mind. You can follow me on Linkedin profile.