How To Optimize Your Site With Leverage Browser Caching?

               In this article, we shall learn how to optimize your site with leverage browser caching.

The most important cache mechanism for page speed is browser caching.
Most of the static files that are used on web pages can be saved on the computer of your visitor for future access.
Every time the visitor accesses a new page on your website these files will then be accessed from the visitor's computer instead of your server, which will greatly speed up page load times.

You can Leverage Browser Caching for Apache servers by adding a ".htaccess" file.
Below are the two recommended ways of doing this:

1. Mod_Expires
Add the following code to the .htaccess file and edit the access time and file types to your liking:

<IfModule mod_expires.c>
ExpiresActive On
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType application/x-font-opentype "access 1 year"
ExpiresByType application/x-font-woff "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType text/html "access 1 hour"
ExpiresByType text/css "access 14 days"
ExpiresByType text/x-javascript "access 3 weeks"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType image/gif "access 2 months"
ExpiresByType image/png "access 2 months"
ExpiresByType image/jpg "access 2 months"
ExpiresByType image/jpeg "access 2 months"
ExpiresByType image/gif "access 2 months"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

2. Mod_Headers

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

# 1 YEAR
Header set Cache-Control "max-age=29030400, public"

# 1 MONTH
Header set Cache-Control "max-age=2592000, public"

# 1 WEEK
Header set Cache-Control "max-age=604800, public"

# 1 HOUR
Header set Cache-Control "max-age=3600, public"

# DON'T CACHE ANY FILE
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Feel free to download the source code.

Hope you liked this article, do share to your friends, colleagues and social websites.

How To Optimize Your Site With GZIP Compression?

              In this article, we shall learn how to  Optimize Your Site With GZIP Compression.

GZIP Compression is a simple, effective way to save bandwidth and speed up your site.

GZIP Compression is a technique supported by most web browsers and web servers.
When enabled on both sides, it can automatically reduce the size of text downloads (including HTML, CSS and JS) by 55-85%. It is enabled by default on all modern browsers, however all web servers disable it by default, and it has to be explicitly enabled.

Write below code in your web site ".htaccess" file.

<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>

Feel free to download the source code.

Hope you liked this article, do share to your friends, colleagues and social websites.

Automatically logout when user is idle for sometime using JQuery.

       
             In this article, we shall learn how to automatically logout user when he/she is idle for certain amount of time in the web application.
To make it efficient and easy, we shall use jQuery to achieve this functionality.

Below is the <script> code. This should ideally be kept inside the _Layout/Master/Template page so that this code executes in almost all pages of the application.

In this code, we are adding first referencing to the jQuery page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">

        idleTimer = null;
        idleState = false;
        idleWait = 900000;

        (function ($) {

            $(document).ready(function () {

                $('*').bind('mousemove keydown scroll', function () {

                    clearTimeout(idleTimer);

                    idleState = false;

                    idleTimer = setTimeout(function () {

                        // Idle Event
                        $.ajax({
                            contentType: 'application/json',
                            type: 'POST',
                            url: '../Default.aspx/ButtonLogOut_Click',
                            data: JSON.stringify({}),
                            success: function (myData) {
                                window.location = "../Default/Home.aspx";
                            },
                            error: function (textStatus, errorThrown) {
                            }
                        });
                        idleState = true;
                    }, idleWait);
                });

                $("body").trigger("mousemove");

            });
        })(jQuery);
    </script>

Feel free to download the source code.

Hope you liked this article, do share to your friends, colleagues and social websites.