Website Performance Optimization

Website Performance Optimization:

Web performance optimization or website optimization is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user’s web browser.

With the average internet speed increasing globally, it is the requirement for website administrators and webmasters to consider the time it takes for websites to render for the visitor.

Faster the website download speeds there is a high level increase in user satisfaction. Especially for users with slow internet connections and those on mobile devices. Web performance also leads to less data travelling across the web.

Source: Wiki

There are a lot of factors that play a vital role in affecting the speed of page load. Some aspects which can affect the speed of page load include browser/server cache, image optimization, and encryption (for example SSL), etc.

You can use online web portals to measure your websites performance. Some popular sites are:

1. www.gtmetrix.com
2. Google PageSpeed Insights
3. www.webpagetest.org
4. tools.pingdom.com

Techniques to boost your website performance(Apache Servers Only):

1. Set Expire Headers in .htaccess

Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache.

The whole idea behind Expires Headers is not only to reduce the load of downloads from the server but rather to reduce the number of HTTP requests for the server.


# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"

2. Enable gzip compression

Reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.

When a user hits your website a call is made to your server to deliver the requested files. The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen.

Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.


  # 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

3. Image Compression

Reduce the load times of pages by loading appropriately sized images.

If you don’t have any tools to optimize png/jpg images. Such as :

a. www.jpegmini.com
b. www.tinypng.com

4. If your server does not server support mod_deflate and mod_gzip you can use the below php code at the top of your headers file.


5. ET Tags

ETags (Entity Tags) are a mechanism that web servers and browsers use to determine if the component in the browser’s cache matches the original server.

To disable entity tags:


Header unset ETag
FileETag None

6. Browser Caching

With browser caching, we’re instructing browsers to hold particular files for a specified period of time. So, when the file is needed again, the browser pulls from its local cache instead of requesting it from the server again.

Add Expire Headers
– Add Cache Control Headers

# BEGIN Cache-Control Headers

    
        Header set Cache-Control "public"
    
    
        Header set Cache-Control "public"
    
    
        Header set Cache-Control "private"
    
    
        Header set Cache-Control "private, must-revalidate"
    

# END Cache-Control Headers

Live Example:

Website performance of www.makemypost.com before using above techniques

makemypost_web_performance_earlier

Website performance of www.makemypost.com after using above techniques

makemypost_web_performance_after

**Note: Above website performance stats can be further optimized by using CDNs for images/css/js and by using minified javascript and css.

Related Post