Posts Tagged speed optimization

Helpful Tools for Web developers – every web developer must try it

Web Development will take more time to develop a website. so i like to help web developers to do t heir job in easiest and fastest way. i hope this article will help to every web developers even for web designer also

 

Bland Text Generator – This handy tool helps you create dummy text for all your layout needs

 

 

Adobe BrowserLab is a browser compatibility service that provides designers exact renderings of their pages on all major web browsers

 

CSS Typeset is an online CSS generator for the text.

 

Font comparer – Just type in a few words and see how it will look like in different fonts.

 

SpriteBox – SpriteBox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image.

 

CopyPaste Character – Great and simple tool for copy and paste web special characters.

 

CSSWrap – A pretty cool CSS text to path generator.

 

PunyPNG – PunyPNG is an impage compressor for designers and developers. It can reduces the file size of your images without any loss of quality.

 

Pingdom – Pingdom test the load time of your website, analyze it and find bottlenecks.

 

Loads.in – Loads.in calculate the loading time of your website.

 

I hope you will enjoy this post, please share your comments…

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

.htaccess code for web site speed optimization

# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>
# Expires Headers – 2678400s = 31 days
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault “access plus 1 seconds”
  ExpiresByType text/html “access plus 0 seconds”
  ExpiresByType image/gif “access plus 2678400 seconds”
  ExpiresByType image/jpeg “access plus 2678400 seconds”
  ExpiresByType image/png “access plus 2678400 seconds”
  ExpiresByType text/css “access plus 518400 seconds”
  ExpiresByType text/javascript “access plus 2678400 seconds”
  ExpiresByType application/x-javascript “access plus 2678400 seconds”
</ifmodule>
# Cache Headers
<ifmodule mod_headers.c>
  # Cache specified files for 31 days
  <filesmatch “\.(ico|flv|jpg|jpeg|png|gif|css|swf)$”>
  Header set Cache-Control “max-age=2678400, public”
  </filesmatch>
  # Don’t cache HTML
  <filesmatch “\.(html|htm)$”>
  Header set Cache-Control “max-age=0, private, must-revalidate”
  </filesmatch>
  # Cache PDFs for a day
  <filesmatch “\.(pdf)$”>
  Header set Cache-Control “max-age=86400, public”
  </filesmatch>
  # Cache Javascripts for 31 days
  <filesmatch “\.(js)$”>
  Header set Cache-Control “max-age=2678400, private”
  </filesmatch>
</ifmodule>

Other tips to optimize your website using .htaccess snippets

Force trailing slash

Prevent Image hotlinking

Redirect mobile devices

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Embedding Images

To increasing the website performance we need to reduce the http requests, which can be achieved by CSS Sprites. Sprite images require only one http request to load many number of images but that one is difficult to construct and there is no automated tool available to do the same. So i suggest Data URI as alternative.

First i like to tell the Pros and Cons of Data URI

Pros: 

  • Quicker loading
  • no file storage required

Cons:

  • Images can take up almost three times more storage space (that one can be over come using the Gzip compression method).
  • your website can be seen as a spam site because many spam sites use base64 to force browsers to load images.
  • Internet Explorer 5-7 version not supported the Data URI

Steps to do Data URI

Some Useful Data URI Examples.

Data URI for empty.gif

<img src=”data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D” width=1 height=1>

The empty favicon is created with the LINK element

Using this technique we can able to attain 99/100 for google page speed…

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →