Table of Contents
Introduction
Web performance optimization or website optimization is the field of knowledge about increasing the loading speed of your web pages and minimizing the time a page takes in getting 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.
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.
How to measure your webiste performance?
You can use online tools or portals to measure your websites performance. Some popular sites are:
Techniques to boost your website performance(Apache Servers Only)
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.
<IfModule mod_expires.c>
# 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"
</IfModule>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.
<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
</IfModule>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
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.
<?php
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
ob_start( "ob_gzhandler" );
}
else {
ob_start();
}
?>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:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>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
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers**Note: Above website performance stats can be further optimized by using CDNs for images/css/js and by using minified javascript and css.
