Many web developers today overlook the most important aspect of website development, which is its ‘page speed’. Optimizing a website for speed not only improves its search engine ranking, but also reduces the website’s bounce rate, improves conversion and offers a better end user experience, which is crucial for success in today’s web based environment.
Would you as an end user prefer a website that loads swiftly? I am sure the answer is a big ‘yes’. Here are few simple ways to optimize a website’s page speed.
Server Response Time
Even if a website is exceptionally optimized, it will not be of much use, unless the server response time is really fast. When it comes to enhancing a website’s page speed, server response time plays an important role. Here are a few tips to improve the server response time.
- Always ensure that a dedicated server is utilized, instead of opting a shared / hosting server.
- Enhance the quality of a web server.
- Make sure all unnecessary plugins are inactive. Keep active, only the ones that are necessary.
Browser caching reduces the number of HTTP requests, which in turn helps a website to load faster. In order to leverage browser caching, enable the mod expires module. Below is the sample code that can be added to leverage browser caching.
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 month”
ExpiresByType text/html ”access 1 month”
ExpiresByType application/pdf ”access 1 month”
ExpiresByType application/x-shockwave-flash ”access 1 month”
ExpiresByType image/x-icon ”access 1 year”
ExpiresDefault ”access 1 month”
Note: If an expiry date is set to a file and content in that file needs to be changed, ensure that the file is renamed, so that internet browsers can fetch the newly added code.
Gzip compression is a compression utility, which can be effectively utilized to make a website load quickly, it works by reducing the HTML and CSS file size, before sending these to the internet browsers. Enable the mod_defalte module in servers to enable Gzip compression, below is the code that can be used to enable it.
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
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 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Another excellent option to enhance a website’s page speed is to load scripts asynchronously, so that the web page load is not dependent on these scripts. Website visitors no longer have to wait patiently for the scripts to load, before the page is rendered. In the asynchronous mode, the script is downloaded in the background. Usually, third party scripts can be kept as asynchronous, as these tend to go down or become very slow at times.
<script async src=”http://www.yoursite.com/script.js”></script>
Content Delivery Network (CDN)
A Content Delivery Network (CDN) is a network of servers located at various topographical locations. Each server has a copy of all website’s files. Whenever a visitor on a website requests a file or a webpage, it is directly sent from the server that is geographically nearest to the website’s visitor (or from the server that is experiencing a lesser load time).
Style sheets at the Top and Scripts at the Bottom
Placing style sheets in the head section helps a website to load swiftly, as it makes a web page to render progressively. Generally, all internet browsers support parallel downloads up to two components at a given time (images, styles and scripts). But usually scripts block parallel downloads i.e. they block everything until the script has completely downloaded.
In order to load a web page, a browser must parse the contents of all <script> tags, which increases website’s load time. By deferring scripts, which are unwanted initially website’s initial load time can be reduced.
Enable Keep Alive
When the option ‘Keep Alive’ is disabled the process of downloading a website usually increases, thus reducing the speed of a website. Another advantage of enabling KeepAlive is that, it reduces CPU usage as well.
Syntax: KeepAlive On
Image File Format
Images are valuable assets for any website, which convey a powerful message to a website visitor. The most common image formats are GIF, JPEG, PNG etc. Each of these formats have their own strengths and limitations. It is recommended to use JPEG images rather than GIF or PNG images, unless images contain any alpha factor or are transparent.
Optimize Code: Do Not Use Inline CSS
As a general practice, it is suggested to refrain from using any inline CSS styles. Inline styles do not clearly separate content from the design. It may also require extensive maintenance and cause inconvenience to the website administrator and it further increases the web page size.
Host Assets Separately
Minimize HTTP Requests
Another easy way to optimize page speed is to reduce HTTP requests. When websites receive too many HTTP requests their visitors start experiencing a delay in response time, which not only increases CPU usage but also page loading time. So, how can you decrease the number of HTTP requests? Below are the steps.
- Decrease number of objects on a website.
- Minimize the number of redirects on a website.
- Utilize sprites for images.
The above suggestions have proved to be highly effective in optimizing a website’s page speed. To conclude flashy graphics, interesting content and better navigation may help you gain website visitors, but faster loading web pages will help you retain them.
|Narasimha Rao Kalakota is a Technical Lead at Evoke Technologies. He has more than 10 years of experience in LAMP – PHP 5, Apache, MySQL and Linux/Windows. He has a strong understanding of web applications and architectures.