Menu Close

Speed Up WordPress load page & site

How to speed up your wordpress site? Follow & Consider next cases of your setting.

  • Use a Solid Framework/Theme
  • Utilize Caching
  • Implement a Content Delivery Network
  • Optimize WordPress Database – Beware the 100 Page WordPress Limitation
  • Optimize Images using Lossless Compression
  • Gzip Compression
  • Reduce Number of WordPress Plugins
  • Optimize Web Font Performance
  • Optimize Font Awesome Icons
  • Lazy Load Images, Videos, and Disqus
  • Minify and Concatenate CSS and Javascript
  • Reduce Misc HTTP Requests
  • Disable Hotlinking
  • Disable Pingbacks and Trackbacks
  • Specify Image Dimensions
    Fix The admin-ajax.php Slow Problem
  • MySQL Tuning
  • Choose a Reliable Web Host
  • Avoid landing page redirects
  • Improve server response time
  • Leverage browser caching
  • Minify resources
  • Optimize images
  • Optimize CSS Delivery
  • Prioritize visible content
  • Remove render-blocking JavaScript
  • Use asynchronous scripts
  • Avoid plugins
  • Configure the viewport
  • Size content to viewport
  • Size tap targets appropriately
  • Use legible font sizes

Server Caching
Besides WordPress caching plugins and browser caching you and also take advantage of server-side caching. This is usually done on higher traffic sites.

Prefetch Commonly Used Domains
Prefetching is similar to caching in the fact that you are telling the browser, like Chrome, to lookup the DNS settings ahead of when they are actually needed. It combs the page and queries any prefetched domains that are not already cached so they load quicker later on.

It works by adding a link to the head of your web page with a relationship of ‘dns-prefetch’ and the url of a domain which holds assets needed for the page to load. That could be a cdn for the site, a social plugin or anything else.
Without prefetching, a browser will render the page top to bottom and when it gets to an asset which needs to be loaded from another domain it performs a dns lookup to find the location of the host and then downloads the assets.

By adding prefetching links we are letting the browser know that these domains will be used before the assets are requested. Browsers can then loook up the hosts whilst rendering the rest of the page, cutting out this step when the assets are needed leding to a shorter download time. This process is non-blocking and will only be performed when possible. For example, on a small page requesting an asset from another site high in the head of the document, it’s likely that the asset will be loaded before there is a chance to prefetch

You can prefetch domains in WordPress by adding the domain syntax to your header.php file between thetags. This process is non-blocking and will only be performed when possible. Here are some common examples.

  • Prefetch Google Fonts: <link rel=”dns-prefetch” href=”//fonts.googleapis.com”>
  • Prefetch Google Code (jQuery) : <link rel=”dns-prefetch” href=”//ajax.googleapis.com”>
  • Prefetch Google Analytics :  <link rel=”dns-prefetch” href=”//www.google-analytics.com”>

Delete un-used themes, plugins and add-ons
Themes and plugins are a great way to extend a site’s functionality. However, we’ve seen many poorly coded plugins and themes that delays page load speed by more than 10 seconds.

During your periodic performance audits, you have to review plugins and themes on these sites to make sure that there’s no performance impact.

Many a times we’ve seen duplicate plugins, poorly coded themes, and external script calls dragging down the website. In these situations, you tweak the plugin, or recommend a faster alternative that doesn’t impose a performance penalty.

Combine CSS and Javascript files
For a single web page to be displayed, a browser downloads up to 50 different files. This includes CSS files, Javascripts, images, etc. The trouble is, web servers often send one file after another. So, the higher the number of files a page needs, the more time it takes to load.

When website owners signup for our Server Management Services, one of the things we test at the outset is the number of elements in a single web page. If a page uses more than 30 files, you work with the webmaster to cut it down to as low as 20.

One thing that has worked well for us is to combine all CSS files into one, and Javascript files into another. You’ve been able to cut down loading speed by almost 8 seconds in some sites by just merging all CSS and JS files.

Optimize images and defer its loading
While an average CSS file have a size of 5 KB, even a small image can be as big as 50 KB. Many webmasters do not think of images as a bandwidth hogger, and do not reduce their size.

Image optimization is one of the basic things we do in the customer sites we maintain. By choosing the right image format (such as JPG), reducing the resolution, and color density, we’re often able to reduce the size of even a banner image to less than 50 KB.

On top of it, you customize the website to defer image loading only when a visitor scrolls to the image location in the page. This makes sure that the initial page load is not blocked by the image download.

Enable compression
A majority of website files are text files such as HTML, CSS and JS. These files can be compressed to less than a 10th of their size, which will result in faster file download speed, and thereby faster page loads.

You periodically audit the page load speeds of these sites, and page compression efficiency is one of things you check.

In some sites that have abrupt traffic spikes (such as during marketing campaigns), compression could cause a performance impact. This is because compressing a page requires server CPU. In such sites, we use statically compressed CSS and JS files, so that CPU usage is saved.