How to make WordPress website load faster?

If you are reading this post, then you are probably looking for tips how to improve site performance, especially WordPress sites. In this post, I will mainly focus on some the ways, that can be used to make your WordPress website load faster. Before, diving into actual ways, lets see how your website is made up of.

Any website contains:

  1. Content ( Text is what I am talking here)
  2. Images
  3. SCRIPTS ( especially Javascript and JQuery is what I am referring here)
  4. Links (Hyperlinks)
  5. Videos etc
  6. HTML markups
  7. CSS

Every time page loads up, browser makes HTTP requests to server to get some/more or less of these resources. To make WordPress website load faster, we have to optimize our code, structure, content in the way that takes minimum time to load from server. And how can we do that? Here are some of the ways.

In addition to this, when working with WordPress website, we know we have integration of several modules namely, WordPress Core , WordPress themes, and WordPress Plugins. All these modules work together, to make your WordPress site come alive. Now, lets dive into optimization techniques to increase your WordPress performance.

STEP: 1. Image Optimization

I  listed images Optimization as the first step because, most of the clients whom I worked for had bad load time due to heavier images. Whenever you load any images, all the images are requested from server, and larger is the image, more time it takes to render and slower will be your page. In WordPress there are several WordPress plugins that allows to optimize your images at bulk, individually or other ways. I don’t really recommend extra plugins to this task but if you are plugin maniac, here are lists of plugins that you can use.

As the proverb says, prevention is better than cure I prefer to optimize the image manually while writing the posts or pages or any Custom Post types. How, I do that, here are some ways to do image optimization.

  1. By using Photoshop: Open the image in photoshop, and click on File and save for web. Here you can choose png-8 format and exact size that you need for the website and then you can save your image with contextual names.
  2. You can also use online image optimizers like dynamic drive. I do use both of the tools to optimize the images.

STEP: 2. Compression /Minification

Another important aspects of website performance is compression. There are various things to keep in mind:

  1. Minify JS
  2. Minify CSS
  3. Minify HTML
  4. Minimize redirects

Lets go with each of them one by one.

Minify JS

“Minifying” code refers to removing unnecessary bytes, such as extra spaces, line breaks, and indentation. Keeping JavaScript code compact has a number of benefits.

  • For inline JavaScript and external files that you don’t want cached, the smaller file size reduces the network latency incurred each time the page is downloaded.
  • Minification can further enhance compression of external JS files and of HTML files in which the JS code is inlined.
  • Smaller files can be loaded and run more quickly by web browsers.

There are several tools that can do that. There are popular plugins that does this including W3 Total Cache and others.  Professional developers uses tools like gulp, to minify js, css easily. There are some tools are freely available to minify JavaScript, including the Closure Compiler, JSMin or the YUI Compressor.

Minify CSS

There are several tools are freely available to minify JavaScript, including the YUI Compressor and cssmin.js. Minification of CSS has similar advantages as minifying JS. In addition to there there are several tools like gulp to automate and enhance your workflow.

Minify HTML

Minification of HTML has similar advantages as minifying JS. HTML, CSS, and JavaScript can be minified by removing unnecessary whitespace and comments. Further optimizations may be possible through the use of tools which rename variable names in your resources.

Minify Redirects

Every redirect triggers an additional HTTP request-response cycle and add round-trip-time latency. So, it is considered better performance wise to reduce the number of redirects.

How to make WordPress website load faster : part -2

About the Author

dr.code.skm

I am backend developer with passion in Web Application development using latest technologies like Laravel, PHP7, React, ECMAScript 6 and WordPress. I prefer spending time analyzing big data with Apache Spark. Apart from that, I do photography.