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
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.
[php]
<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 month”
ExpiresByType text/html ”access 1 month”
ExpiresByType application/pdf ”access 1 month”
ExpiresByType text/x-javascript ”access 1 month”
ExpiresByType application/x-shockwave-flash ”access 1 month”
ExpiresByType image/x-icon ”access 1 year”
ExpiresDefault ”access 1 month”
</IfModule>
[/php]
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
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.
[php]
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
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>
[/php]
Asynchronous Scripts
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.
[php]
<script async src=”http://www.yoursite.com/script.js”></script>
[/php]
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).
Minify JavaScript, HTML and CSS
Minifying JavaScript and CSS will help in improving a website’s page speed, it is an easy way to enhance the speed of a website. Minifying JavaScript, HTML and CSS will remove all unnecessary spaces and comments and thus reduce the file size. Below are some popular tools, which would be of great use to minimize JavaScript and CSS.
CSS Minifier
Avivo
HTML Compressor
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.
Render-blocking JavaScript and CSS
Before a browser renders a web page, it has to build a DOM tree by parsing the HTML markup language. During this activity, if it encounters a script, it has to stop and execute the script first, before continuing with the activity again. Hence it is recommended to avoid blocking JavaScripts, especially external scripts.
Blocking JavaScripts can cause a delay in rendering a website. Always defer JavaScripts that are not important or make them load asynchronously. Another option is to make these inline with the website’s HTML code, also ensure that CSS is optimized for delivery.
Defer Parsing of JavaScript
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 a user requests a website via a browser, the internet browser has to first gain access to the HTML files. It then reads these files and requests other assets associated with it (assets can be references to CSS, JavaScript or any associated images).
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.
[php]
Syntax: KeepAlive On
[/php]
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
Website’s assets can be classified as CSS, JavaScripts or Images. Hosting website’s assets separately does not directly improve its load time. However, it will improve the server stability, when there is a sudden spike in website traffic. Subdomains can also be used to host assets, which would increase the number of parallel downloads.
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.
- Combine JavaScripts and CSS.
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.
References
For further details, please read Best Practices for Speeding Up Your Web Site by Yahoo Developers Network and Web Performance Best Practices from Google Page Speed.
Author
 |
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. |
