This is not only about SEO. Now generate leads, Improve your website CONVERSION, make your website LOAD FAST, Catchy DESIGN HACKS, Website SECURITY and many more...

Sunday, August 3, 2014

Web page speed up tips to get +95/100 score in google page speed insights, pingdom and on real browser

Usually on internet when you search for the speed up tips or tricks for many fast loading of any webpage or website then you will find only few tips and they never explain what should we exactly do to achieve that. I mean they never tell you clearly that what code to write and what changes to do and where to get more speed.

Here I am sharing some of the tips to speed up your website 

 
You can contact me on Skype “rashtra”, Gmail rashtra.vijay@gmail.com and can hire me on Odesk also https://www.odesk.com/users/~01c5ebb988a5475de1

Page Speed up tips that should apply on Images

Use proper image types :- For big banners and more colourful  pictures always use jpg image types.
For transparent images use png image format.
For small, animated, less coloured, without any transparent portion use gif image formats.

 

Specify image dimensions :- always mention height and widths for each image in html (web pages)
 

Do not scale image size :- use only original height and width of any image, do not stretch images.
 

Use different images for thumbnails :- Sometime people use the same big image in thumbnails by scaling the size. But this will make your webpage load very very slow. So, for dynamic websites use some php scripts to make thumbnail images separately. Using that script when you upload any image then it will resize and crop that image automatically according to thumbnail size and store in different folder. And for your thumbnails that image will load, which takes very less time in loading.
 

Parallel downloads across hostnames :- Pingdom website shows this error during web page speed test. So to avoide this, make a sub domain and put all your images in that subdomain. And in your web page give path of that sub-domain for each image. You can apply this tricks for any other file also. But we should use it for few that is why i use this trick only for images. In this way all image loads side by side and this speedup loading of our website.
 

Optimize images :- Put all your images in this tool https://kraken.io/web-interface this will reduce the size of all images and you can download those as zip file. Reducing size of image save lots of kbs and improve speeds at high level because images takes most of time in loading.
EWWW Image Optimizer :- Use this wordpress plugin because this automatically reduce size of every image with your post. This is applicable on media images only. You can manually reduce the size of image by clicking “Bulk optimize” under Media.
First use “Start optimizing” button and after optimizing all images. Use “Scan and Optimize” button for rest of the images.


Make Favicon small and cacheable

 
SVG for vector shapes :- Avoid using images for vector shapes and make them in SVG and use in your html. This will save http request and time.



Page Speed up tips that should apply on CSS

Put CSS in <head> tag :- Always use css files in top under the head tag before any other js files. In this way your page loads easily and correct design format.
 

Choose <link> over @import :- Connect CSS stylesheets by using <link> tag only and do not use @import anywhere, not in CSS stylesheets also.
 
Remove duplicate CSS files :- Normally in WORDPRESS we add style.css using <link rel="stylesheet" href="some url here /style.css" type="text/css" media="all"/>
But is we check the source code than there you will find one more same stylesheet in this way <link rel='stylesheet' id='sitename-style-css'  href= some url here /style.css?ver=3.9.1' type='text/css' media='all' />
because wordpress automatically use the style.css file under theme folder. So take care of these things and also remove any other duplicate CSS files

 

Remove unwanted properties :- Some times we use some readymade CSS stylesheets for animation, sliders etc. And in those stylesheets there are many classes for different effects which we are not using. So we need to remove those unused css properties and classes. But doing it manually takes times and chances of error are more. So use the “Dust me selectot” Mozilla firefox plugin. By clicking this tool it will show you the all attached css stylesheet and unused classes in those stylesheets. There is a option “Clean” by clicking this you can save the cleaned stylesheet.
Important :- do not apply this for your main style.css because this tool on work for one page styles and classes, and your style.css have the classes of all other pages. So in this case this will remove the classes  of those other pages. That is why save only other css stylesheets by cleaning from this tool.

 

Combine external CSS :- After doing this cut and paste of all css codes in only one css file. This will save your http request and improves in speed.
 

No inline CSS :- Cut all inline css properties from html pages and make a class name in your external stylesheet and use that class for those html tag from where you cut inline css codes.
 

 Avoid CSS expression:- Example #myDiv {  border:  10px solid Red;
width:   expression(constExpression(ieBox ? "100px" : "80px"));
}


CSS sprites :- CSS sprites are the thing to show background images for different sections or div from one big image. Means we collect all small icons and images to make one image and give url of that image for almost all background image properties and just change in position to get that image. In this way we can save many http requests.
 

Avoid bad request: - Do not give url of any such image that is not present on server. Same thing apply for html reference urls in src and href.
 

Minify CSS :- This means remove all unnecessary semicolon, px, line breaks, white space etc etc from our stylesheet to minimize its size and no. of lines of code.
Do not do this process manually because it is time consuming. Use this online free tool devilo.us you have to copy and paste your css code in it and use “highest” option in dropdown.
Important, take care of your css gradients and @font code. Because it not property optimize these codes, so do not put these codes in this tool and just compress all other CSS styles by simply copy and pasting.

 

Use Shorthand properties :- If you are a good CSS coder than use shorthand CSS coding techniques and use common classes for matching styles.
 
Optimize the order of style :- If you can not make one stylesheet by combining all due to some reasons then in this case place those stylesheet in a specific order so that the main stylesheet loads first.


Page Speed up tips that should apply on JS

Put JS in bottom:- Always use JS files at bottom of the page because our main concern is to load the page first and then the effects. By putting JS in the bottom out website loads for visitors first and they can start interacting and during this time JS files can starts loading in background we will not lose our customers.
But always use some important jquery or JS files in header only (jquery.min.js or jquery-1.10.1.js) and also html.js but you can use html5.js by applying conditional tag only for ie.

 

Remove duplicate JS :- Sometimes accidentally we use two js for the same work. This happens specially in the case of jquery. Users use jquery-latest and same file by using some version like jquery.min.js or jquery-1.10.1.js but all these files works in the same way. So try removing these files and check functionality first.
 

Do not use external JS :- In my personal opinion we should download all external javascript and jquery files from other sites and put them on our server only. In this way those files loads much faster.
 

Conditional coding for JS :- Sometimes we use different JS for different pages but put them together in header file and due to this all those JS loads on each page and slow down the process. So make a code to put conditions so that only required JS files will load for particular pages. If you do not know how to do this then you should contact or hire a php developer with good skills.
 

Minify JS :- Try to use only “min” version of JS files but if you used the uncompressed version of js files due to some reasons then you can compress them from free online tool like jscompress.com after completing your website coding work.
 

Combine external Javascript files :- Combine all external JS files but do not combine those with any important jquery files. I recommend to combine only those files which are for small task or functionality and do this process manually without using any plugin or online tools. This process should be done by any professional javascriptcoder.
 

Inline JS :- We know that we should not use inline css codes but we can use the inline javascript codes. If you are using small few lines codes for any particular page then in this case do not make one more external javascript file and put that code in the end on html file.
 

Defer loading JS :- Means loads JS only after loading the html and CSS. Use Ajax for Defer loading content when possible. Ajax allow us to load only some part of the page without loading the whole page again. Make Ajax caheable. Use GET for ajax.
 

Optimize the order of JS :- We did this thing fo CSS stylesheets and can follow the same process for javascript files and put the important javascript file before any other less important js files.
 
Prefer asynchronous resources: - When a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it. With an asynchronous script, however, the browser can continue parsing and rendering HTML that comes after the async script, without waiting for that script to complete.
<script>
var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script>

Page Speed up tips that should apply on html

Meta Tags :- <link rel=”prerender” href=”site-name-here.com” />
<link rel=”dns-prefetch” href=”site-name-here.com” />

 

Specify a character set early :- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 

Avoid or minimize redirects:-  Do not redirect webpages specially home page. Because this will increase the server work and also increase the load time.
 

Remove white space and minify :- Web page automatically have lots of white spaces and line breaks in the codes which increase no. of line of codes. To remove all those line breaks securely open all your web pages in dreamweaver and press ctrl+f and put this code “[\r\n]{2,}” in find section and “\n” in replace sections without quotes. And tick the “use regular expression” option. Also select “Open documents” options from the dropdown if you want to remove line breaks from all pages. Simply press the “Replace All” button and see all html files are minify securely.
But before saving all files please check again. And if you see any yellow alert in top of the page then do not save that file. Because this can cause error in js codes. It is better to hire some experienced coder for this task.


 

Prioritize visible content:- Like CSS and JS also put important content on top in HTML.
 

Change https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
to
//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js

The opening // instead of https:// is a shorthand -- supported by all major browsers -- which means "the same protocol as the parent page is using". In other words, if your own site uses SSL, then jQuery will be served over SSL. If not, then your users will use plain HTTP for jQuery, and benefit from the faster connection setup un-encrypted HTTP has.


Less nested codes :-Write less nested codes in html and avoid making websites in table




Page Speed up tips using .htaccess

Leverage Browser caching :- use both mod_expires.c  and mod_headers.c
Example :-
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2692000, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=2692000, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=2692000, public"
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
Header unset ETag
Header unset Last-Modified
<FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|woff|tiff)$">
        Header set Last-Modified "Sat, 2 Aug 2014 00:00:00 GMT"
</FilesMatch>
</IfModule>
## EXPIRES CACHING ##

 
Enable GZIP compression:-
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>


Enable compression on Apache webservers
<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>

 
W3 Total cache :-  Use this tool for wordpress websites. But before using you should know how to use this. Because after installing you have to configure this and if you do not know then please don’t install. Or take help from a wordpress developer who knows all about the htaccess and website speed things.


Other tips to speed up loading of a web page

Remove query string from static resources :-  You can't cache a link with a "?" in its URL even if a Cache-control: public header is present. The question mark acts the same as  Ctrl+F5.
 

Reduce Cookie size :- It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.
 

Use cookie free domains :- When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. In this case make a sub domain and put all the static images and other files on that sub domain.


CDN :- Use Content Delivery Network for fast delivery of files.
 

Avoid Using Google Maps and Facebook Like buttons :- Because these API use many external files and some type of codes that will not cacheable and also create many other problems. For better detail please check any page with and without google map in any page speed testing tool.
 

Avoid using Iframe, Flash and Videos
 

PHP flush :- Use the <?php flush(); ?>     Use it  right after the HEAD tag. When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive
 

SQL queries :- Avoid doing SQL queries within a loop. Instead of using a loop, you can combine the data into a single database query.
 

PHP Speedy :- Use PHP Speedy script to speed up the page download time here is the path http://aciddrop.com/php-speedy/
 

Avoid empty src and href :- Also do not use give reference of any such file that is not present on the sever or deleted. Because it will show the “Bad request” problem in page speed testing tools.
 
Few Fonts :- Use only few light weight fonts of the same family. Because fonts also takes times to load.




Where to check speed of a web page.
http://tools.pingdom.com/

http://gtmetrix.com/improve-server-response-time.html
http://developers.google.com/speed/pagespeed/insights/
 


Author :- Rashtra vijay Choudhary  
Website :- www.baagdi.com
Web designer, Art Director, Web developer
 
Portfolio :- http://www.ilifestudio.com/portfolio/

3 comments:

  1. Hi Sir,
    All information given by you in this article are very nice. After 2+ year you come back for blogging. Kindly also write articles on SEO Latest tips and tricks.

    Thanks

    ReplyDelete
  2. I visited various web sites however the audio quality for audio songs current at this web page is in fact excellent.


    Also visit my site; heating & air conditioning repair []

    ReplyDelete