Website speed is one of the most important aspects of user's browsing experience, especially for e-commerce websites. One study found that 57% of visitors close the page after waiting 3 seconds for it to load. Another study by Amazon concluded that an increase of 100ms in page loading speed would lead to 1% higher revenue. These numbers tell us that if we do not optimize page loading times, we may lose visitors and profit. This tutorial will show you how to improve your website speed in a few simple steps. If you are a webmaster, this tutorial will help you increase visitors (and revenue). If you are a web developer, these simple tips can make your client extremely satisfied.
How does page loading work?
Best tips for speeding up your website
Parallelization and serving static content from cookieless domains
- Create a subdomain (e.g. static.yourdomain.com)
- Change the cookie domain in your scripts to www.yourdomain.com
Script and database optimization
You can measure script performance by comparing microtime at the beginning and the end of the script. Usually, there is no problem with the script itself, but with the database connection. SQL query performance can be checked by running a query in phpMyAdmin. If you notice problems with database speed, try to break complex queries into simple ones. Avoid JOIN statements as much as possible. Do not use "ORDER BY RAND()" for fetching random rows. Set up a cron job that will execute OPTIMIZE query regularly. Lastly, check if the database query caching is turned on.
Additional script size reductions can be achieved by compression. Although some browsers may not support compression, modern browsers actually do support it. For Windows hosting and IIS web servers, hereis how to enable compression in server settings. In case you are using more popular Apache server on Linux hosting, you need to add the following code to your .htaccess file:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
# Or, compress certain file types by extension:
Shared hostings may not have access to .htaccess. In that case, use the PHP solution and add the following code to the top of your script:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
Although compression leads to increase in CPU load, it has great results regarding the website speed — the size of a file can be reduced for 75%. This saves bandwidth as well. If you are unsure whether your website uses compression, you can check it on thiswebsite.
Leverage browser caching
Browser caching is as much as important as compression and minification. All static content is cached by default, but cache lifetimes can vary. That is why it is important to make cache expire later. This tweak is also done by changing .htaccess file:
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 application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
These days there is much third-party content on websites: Google maps, Google AdSense, Facebook like button and other boxes, etc. It is best to load them asynchronously if possible, in order to prevent their server problems from impacting the speed of your website.
As today's websites have many images, it means that they have a significant role in website speed. They cannot be compressed, but they can be resized. Scale them in an image editing program or on the fly in PHP, but never use HTML to scale images. You would end up loading a large image and then showing a small one in HTML, instead of downloading a small one and showing it as is. Also, specifying image width and height in HTML can improve rendering time. Small images should be merged into one and displayed by using CSS background-position, thus decreasing the number of server requests.
Using a cookieless domain can reduce data size for more than 100KB. Minification reduces the size of scripts by 50% and gzip compression makes files up top 75% smaller than the uncompressed versions. Since some of these methods require a significant effort in order to be implemented in a dynamic environment, it is recommended that you implement only those solutions that would help you achieve your speed-related goals with as little time and effort as possible.