Web Performance Optimization Guide

Last Updated:

We will teach you to be a pro web performance optimizer. For free!
Speed Logo
Web performance is very much important in today’s era as everyone needs speed. Whether you need a better search rank in Google or plan to have a higher conversion rate in your site, you need to make your site blazing fast.

So why do we need to have my page load quick?

Well, when you are online then you will surely want to have a pretty number in your traffic stats. One of the methods to have nice traffic is Google search, so this search engine loves fast sites and your site need to load under 3sec to get a proper ranking.

A fast site is always easy to visit even in slow connection, a slow site will annoy your regular visitors and make them find alternatives. Research have shown that speed optimized sites have low bounce rate which further increases conversion rate and increases your revenue.

The first step is to analyse what makes your site slow, to know that you can simply put your URL on Google pagespeed and check the cause of slow site.

It clearly mentions what problems your site has and possible way to resolve them.

What makes a site slow?

  • Hell, lots of ads.
  • Poorly coded themes.
  • Poor performing host.
  • Multiple external requests.
  • Unoptimized images.

Here’s a basic INFOGRAPHIC for web performance optimization

Webperf infogrphic

Feel free to embed this infographic on your site by providing proper link back. Below is a embed code using our high performance CDN. (Below code contains image link for fully scaled image as well which is much more suitable for download)

<div style="text-align: center;"><a href="https://nutpanda.com/hosting-reviews/web-performance-optimization-guide.html"><img src="https://nutpandavol.b-cdn.net/images/webperf.png"></a></div>

Image Optimization

Images makes up most of the disk space and bandwidth in a website. Images can make a boring content website look great, amazing and interesting. Though images have their own benefits, they have their cons too. You can use online tools like Optimizilla and TinyPNG to optimize your images.

SVG optimization

Also, webmasters now should prefer newer image formats. Recently developed progressive JPEG and SVG can make a great difference on how your site loads. NutPanda recommends Progressive JPEG, SVGs and WebP formats for best performance.

Increase your PHP memory limit

PHP is one of the most popular back-end languages. Sometimes in a WordPress site a plugin or server-side script may need a larger than default PHP memory limit to do all things faster and in a linear way and make the page load as quick as possible.

In a WordPress site, go to the wp-config.php file and fine the line which mentions ‘That’s all, stop editing! Happy blogging.’ There put this code with limit of your wish.

/* That’s all, stop editing! Happy blogging. */
define( 'WP_MEMORY_LIMIT', '256M' );
Remember, before you do it you might want to contact your hosting provider.

Minify HTML, CSS and JS

Html is the code which the browser receives and renders to form a webpage. Minifying a HTML code eliminates all extra white spaces and helps to download the code faster. You can use online tools like WILLPEAVY to minify your HTML, CSS and JS; in case of a WordPress site you can use a plugin name Autoptimize which does the same.

Reconfigure you cron jobs

Cron jobs are the one which makes sure your content remains updated. You should also remember it has a huge toll on your server CPU usage. WP-Cron manages all the scheduled events in a WordPress site. It sometimes causes high CPU loads and memory consumption especially for websites with very large databases and/or traffic which might result to slow load time.

Cron Jobs

Follow these steps:

  1. Navigate to wp-config.php file where you have installed WordPress.
  2. Open it up in file manager or your favourite text editor.
  3. Add the following: define(‘DISABLE_WP_CRON’, true);
  4. Save the file and re-upload.
  5. Login to cPanel and navigate to Cron Jobs.
  6. Add a new cron job to run once an hour with the following command: wget https://www.yourwebsite.com/wp-cron.php > /dev/null 2>&1
  7. Make sure to replace yourwebsite.com with the correct URL to your wp-cron.php file. Click Add New Cron Job.

CSS SPLITTING

CSS and JS together play and important role on as how your site loads. Sometimes CSS can block rendering until the whole CSS file is downloaded. To optimize delivery, you can divide your CSS files and make sure you only load your CSS when they are required.

CSS optimization

For example, main.css can be splitted into; basic.css and remaining.css

Here basic.css contains CSS for the first view and remaining.css contains CSS for rest of the page.

Utilise a CDN

Serving all your content from your origin server is a thing from past. To make sure your site loads fast you might want to offload your static content on a CDN. Content delivery network help to distribute your content worldwide so that the data is served to the visitor from the nearest server, hence making your side load faster. Not only it makes your site load faster but also reduces load from your origin server.

CDN
Image: Incapsula

We recommend Cloudflare and Incapsula as a CDN provider which has it's free and paid plans.

Incase you are looking for a good performing budget friendly CDN then you must check out Bunny CDN which provides great performance at low cost. We use their service to load CSS, JS and images.

You can easily utilise a CDN, companies like Cloudflare provide free CDN to everyone. You simply can sign up for their service and check your performance boost. The increase in performance will also help you to increase your conversion rate.

Prefetch URL DNS

Prefetching DNS of a site before actual need help to decrease the load time of you site. Prefetching tells the browser to resolve the DNS of the URL even before it is needed. It helps to speed up the download when in actual need. Below is sample code which needs to be placed in the head section of your HTML code.
<link rel="dns-prefetch" href="//www.example.com">

Like prefetching you can also prerender a specific URL, to be remember prerender should be used for resources which are going to be required within few milliseconds.

Here’s the code:
<link rel="prerender dns-prefetch" href="//www.example.com">
Also, you must make sure to add these codes before ending your <head> tag.

Load Scripts from public CDN’s

Public CDN providers like CDNJS and JSDELIVR are doing a great job nowadays. They have proved to be faster in loading scripts. So instead loading scripts for fontawesome, bootstrap and jQuery from a local copy on your webserver, use a public CDN. Make sure to keep a local fall-back copy of those scripts just in case the CDN is not available. Below is a sample code to load jQuery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script >!windows.jQuery && document.write('<script src="LocalScriptPath.js"><\/script>')</script>

Enable Caching

Caching is very important in case you own a dynamic website. WordPress site needs to have a caching plugin to load your site faster. NutPanda recommends Cache Enabler by KeyCDN to cache your site contents.

Cache Enabler is easy to use and a powerful tool to optimize your site performance. A pro tip, Cache Enabler works great with Autoptimize.

Switch Webhost

Not every time your developer or your theme is the culprit behind slow website. A website resides in a server, the availability, speed and server software to determines the speed at which your will load. No matter how well you optimize you site, if you have a poor host then you site will suffer. So even after following the above steps the site loads slow, then it’s the time to switch host. See our best curated list of top performing web hosting provider.

Web Server

Hope these quick optimization techniques helped you too score well. I case you liked our content and are interested to learn more about web technologies and digital marketing then feel free to subscribe. For any query you can drop by a mail at the mail address mentioned in footer.