The following article is to be used for general website optimization guidelines, regardless of the applications being used within your website. Some of these items might be too technical for implementation from a standard web user, and we always recommend that you work with a professional webmaster or web designer for any website optimizations or changes to your website code.
Before you begin optimizing your website, please test your website to get a better idea of its current bottlenecks and design issues. We recommend using one of the most popular website testing tools from Pingdom:
NOTE: The results from Pingdom full page test, will also give you a piece of advice on what you can do to optimize your website, you will find the advisories below very similar to the test results coming from Pingdom.
For the test data to be relevant always test using the same location, and try to use locations in the USA, since your site is hosted in the USA – otherwise you are adding other factors such as latency due to distance in the mix, which makes it even harder to optimize.
Let’s say that Pingdom reports that your home page is 5 MB (refer to the Content Size by content type section under the test results), except that on average visitors may wait up to 5 seconds for the page to load. So if you have a site that is over 1 MB or any page within your site is larger than 1 MB, you should immediately look into optimizing your images (as outlined in the steps below) or optimize your themes, minify your CSS files / JavaScripts being used, etc. Google guidelines suggest that a web page should load within 2 seconds in order to consider it as reasonably good speed, so your aim should be to get it below 2 seconds if possible.
If your page size is large (> 1MB) – please, review the sections of the tutorial below: Image Optimization, Minify CSS/JavaScript first, and then the rest of the tutorial. It is important to note that regardless if you implement caching or any other optimizations as outlined below, the large web page size is going to be always an issue and must be addressed first!
Step 1. Optimize your Images!
Browser web page loading speed depends on the total size of the content that is being downloaded from your website. High-quality images (which are large in size) or bulky images, in general, are the largest contributors to Web page total size, degrading page speed, and making your visitors wait for your website to load!
We recommend that you start by implementing the following image optimizations:
- Image Format: Use JPEG image file format when quality is a high priority. JPEGs can take limited processing and modifications before image quality degrades sharply. For images with icons, logos, illustrations, signs, and text, use PNG format. Use GIFs only for small or simple images and AVOID BMPs or TIFFs.
- Proper Image Sizing: Save valuable bandwidth (page load time), and match the dimensions (width) of your Web page template. Use browser resizing capabilities to make images responsive by setting fixed width and auto-height instructions.
- Image Compression: Image compression should be a thoughtful trade-off between image size and quality. For JPEGs, a compression of 60-70 percent produces a good balance. For retina screens, increase (JPGs) image size by 150-200 percent, compress by 30-40 percent and scale it down again as per required dimensions.
- Fewer Images: Keep the number of images to an absolute minimum.
The following online, and application specific image optimizations tools, are a good start:
Online image optimization tools:
TinyPNG
Kraken.io
JPEG Reducer
JPEGmini (app available for OSX, iOS, Windows)
WordPress image optimization plugins:
CW Image Optimizer
Lazy Load
WP Smush.it (support ended)
Radical Image Optimization Tool (RIOT)
Joomla! image optimization extensions:
ImageRecycle
Lazy load for Joomla
Imgen
Drupal image optimization modules:
Image Optimize
ImageMagick
Image Lazyloader
Image Resize Filter
Step 2. Minify CSS and Javascript
Minification meaning is: removing of unnecessary characters from your HTML, Javascript, and CSS that are unnecessary and which increase your page load time:
- White space characters
- New line characters
- Comments
- Block delimiters
The process of minification reduces your web page total size and improves your page loading times significantly.
You can minify your CSS and Javascript with online tools such as http://www.minifier.org/
Step 3. Critical Path and Render Blocking Resources (Advanced)
When it comes to analyzing the speed of the web pages you always need to take into consideration what might be blocking the DOM, causing delays in your page load times. These are also referred to as render blocking resources, such as HTML, CSS (this can include web fonts), and Javascript. Here are a few recommendations on how to prevent your CSS and Javascript from blocking the DOM by optimizing your critical rendering path.
CSS
- Properly call your CSS files
- Use media queries to mark some CSS resources as non-render blocking
- Lessen the number of CSS files (concatenate your CSS files into one file)
- Minify Your CSS (remove extra spaces, characters, comments, etc)
- Useless CSS overall
Javascript
- Move your scripts to the bottom of the page right before your </body> tag.
- Use the async or defer directive to avoid render blocking.
- Concatenate your JS files into one file (with HTTP/2 this is no longer as important)
- Minify your Javascript (remove extra spaces, characters, etc)
- Inline your javascript if it is small
Async allows the script to be downloaded in the background without blocking. Then, the moment it finishes downloading, rendering is blocked and that script executes. Render resumes when the script has executed.
<script async src="foobar.js"></script>
Step 4. Avoid 301 Redirects
Redirects are performance killers. Avoid them whenever possible. A redirect will generate additional round trip times (RTT) and therefore quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.
Step 5. Caching
Webmasters can reduce response times by delivering cached copies of the requested content instead of rendering it repeatedly in response to every single user request that pings their server. The web cache is the mechanism of temporarily storing copies of Web content to satisfy subsequent user requests from the cache database when specific conditions are met. This process reduces the number of client-server round trips taken in delivering (static) website content to requesting browsers.
Website owners can enable Web caching with the following software add-ons and configurations:
- W3 Total Cache: This is the most popular performance optimization plugin and highly recommended for cache optimization.
- Varnish Software.
- FastCGI Cache for Nginx and Drupal servers.
- Enable browser cache.
Leveraging the browser cache is crucial for assets that are rarely changing. It is recommended to have a max-age of 7 days in such cases.
Step 6. PHP 7
Keeping the various components of a web server up to date is critical for reasons such as security patches, performance upgrades, and so on. If you are using PHP, upgrading to PHP7 can help greatly improve performance as compared to PHP 5.6. If you can not upgrade to PHP 7 at least.
Step 7. Web Font Performance
The disadvantages of web fonts, such as Google Fonts, are that they add extra HTTP requests to external resources. Web fonts are also rendered blocking. Below are some recommendations for better web font performance.
- Prioritize based on browser support
- Choose only the styles you need
- Keep character sets down to a minimum
- Host fonts locally or prefetch
- Store in LocalStorage with Base64 Encoding
Step 8. Hotlink Protection
Hotlink protection refers to restricting HTTP referrers in order to prevent others from embedding your assets on other websites. Hotlink protection will save you bandwidth by prohibiting other sites from displaying your images.
Example: Your site URL is www.domain.com. To stop hotlinking of your images from other sites and display a replacement image called donotsteal.jpg from an image host, place this code in your .htaccess file:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?domain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/donotsteal.gif [L] NOTE: Our cPanel Shared hosting accounts (VPS/Cloud with cPanel as well) come with HotLink protection module
Step 9. Enable Gzip Compression
Gzip is another form of compression which compresses web pages, CSS, and javascript at the server level before sending them over to the browser. GZIP compression saves 50% to 80% bandwidth and will therefore significantly increase the website’s loading speed.
NOTE: All of our shared hosting accounts and most VPS/Cloud servers come with support for Gzip compression. Most available applications also come with Gzip support enabled by default. You can enable gzip compression in our cPanel plans by going to cPanel -> Software & Services -> Optimize Website.
NOTE: All of our Windows shared hosting plans, by default come with Gzip compression enabled, so you don't need to do anything if you are using any Windows Shared hosting plan.
To check if your website is currently utilizing Gzip Compression, please use https://checkgzipcompression.com/
You can enable compression on Apache Web Server (used on all of our Linux shared hosting accounts) by adding the following to your .htaccess file.
<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
# 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> NOTE: If you are using a VPS/Cloud server, you will need to make sure that in your Apache server there is support for mod_deflate.
10. Fix 404 Errors
Any missing file generates a 404 HTTP error. Depending upon the platform you are running 404 errors can be quite taxing on your server. For example, Drupal has very expensive 404 errors. On an ‘average’ site with an ‘average’ module load, you can be looking at 60-100MB of memory being consumed on your server to deliver a 404.
We don’t recommend installing plugins or modules to check for 404s, instead, we advise you occasionally run your website through an external service such as the “Online Broken Link Checker” or a tool like Screaming Frog. This ensures that you aren’t wasting any of your server’s resources on this task. You can also see these in Google Search Console.
11. Serve Scaled Images
You should always upload your images at scale and not rely on CSS to size them down. If you do you will run into this little Google Pagespeed recommendation: “Optimization suggestion: “By compressing and adjusting the size of … you can save 5.8 KB (51%).”
This recommendation refers to your images being scaled down by your browser. For example, maybe the image you upload has a 400px width, but the column it was placed in is only 300px wide. This results in your image being scaled down to 300px due to CSS so that it matches the column size. It is better to always upload images at scale and also upload multiple resolutions of your images and serve the right resolution for the right device.
Note: It is not always possible to avoid scaling with CSS, especially if you are working with high-resolution retina devices.
12. Database Optimization
Cleaning out old unused tables or creating indexes for faster access there are always things that can be optimized.
MySQL
Optimizing MySQL is also very important. Unfortunately, this is very specific to your environment and your setup so we can’t provide recommended configurations.
VPS/Cloud customers only: The MySQL configuration file is normally located in /etc/my.cnf. Here are a few settings though to keep an eye on.
- tmp_table_size
- query_cache_type
- query_cache_size
- query_cache_size
- join_buffer_size
- max_heap_table_size
A highly recommended tool is the MySQL Tuner script. It is read-only and won’t make configuration changes. It will give you an overview of your server’s performance and make some basic recommendations about improvements that you can make after it completes. Here are a couple of other tools you can use as well:
13. Reduce Latency with a Content Delivery Network (CDN)
Speeding up the delivery of your assets around the globe a CDN also can dramatically decrease your latency.
A Content Delivery Network (or CDN) is a system of globally positioned edge servers. These edge servers maintain cached copies of the content (such as images, CSS, JS), which is retrieved from the closest physical location. Since the data travels a shorter distance, this results in reduced latency and faster load times. Caching accounts for a major part of a CDN’s functionality. Subsequent visitor requests for static assets will be delivered from the edge server's cache, instead of the origin, thus reducing origin load and improving scalability.
If you go with a provider such as CloudFlare, their paid packages include support for caching of entire pages, including caching of dynamic pages, which can make a huge performance difference (assuming you have performed all other steps of this tutorial). Note that using a CDN without optimizing your website first, will still give you an advantage but it will not be that significant. We are fully compatible with CloudFlare, and recommend it as a CDN provider.
14. Server Infrastructure
Using a VPS/Cloud server (instead of shared hosting page) for your website and web applications is the most cost-effective and productive option for maintaining an ultra-high performance website.
Features of VPS/Cloud hosting services impacting page speed and website performance include:
- Customization of compression level
- Server Side Cache optimization
- Memory management, memory disks support, controlling garbage data, etc.
- Modules/Extensions/Plugin compatibility and custom deployment
- Database optimization capabilities (increase timeout values, concurrent database users count, this is specially imported for Java clients)
- 100% compatibility with any CDN provider
- Performance, and health monitoring
- Lightweight and speed optimized servers
- High-performance PHP runtime execution engines such as HipHop Virtual Machine (HHVM), Varnish, Nginx, etc
