How to make your website load faster even when it has many images

Do you want to see a perfect example of “doing what you preach”?

Here it is.

We’re launching a lifetime deal for IMGHaste, an insane tool to optimize your website speed with a few clicks.

And I wanted to check if their site was actually fast on Google Speed Insights:

They score perfectly.

IMGHaste team knows one or two things about website optimization, and they run on WordPress, so you don’t need to code your website from scratch, as some developers suggest.

There are many blog posts about how to speed up your websites.

And they’re great until you need to deal with CDNs, VPNs, htaccess, minified JS and CSS and need to change your website stack.

Most WordPress users, though, are not technical enough, and they rely on plugins to make their websites faster. Ironically, more plugins are counterproductive for website performance.

I honestly don’t understand Google Speed Insights suggestions, for instance. Ironically, more plugins are counterproductive for website performance.

So, what can you do?

Follow these good practices to make your website faster without coding skills that we gathered from the IMGHaste team.

I’m writing this in a language a non-programmer can understand—because I’m a non-programmer, too.

Image compression is not enough—convert your images to WEBP

Have you noticed that images come in formats like JPG and PNG?

Most of us differentiate them because PNG has no background – but that’s not the technical explanation.

Almost every blog post I read about website optimization talks about compression and suggest tools like TinyPNG to reduce the size of your images.

While TinyPNG is such a great tool, the actual solution is not compressing your PNG images, but not using them at all.

There’s a third format called WEBP.

WEBP is an open-source image format introduced by Google to make images as light as possible without compromising quality. Such reductions are dramatic.

Just take a look at these examples:

The size of the JPEG images of this website is 3,1MB: With IMGHaste all images were transformed to WEBP the size was reduced to 505KB—in a matter of seconds.

Here’s another example:

Just by installing a plugin, this website’s image size is reduced from1,2mg to 774kb.

After knowing this, you will notice many websites are already adopting this format, but the vast majority still doesn’t.

Converting from PNG to WEBP just takes a few clicks with IMGHaste, btw.

Install Google Tag Manager

Does Google Tag Manager improves your website performance or optimize your code?

No, but it makes things easier.

Whenever you want to install a chat widget, a user tracking app, a marketing automation tool, Google Analytics, or the Facebook Ads pixel, you need to add a new script on your website.

If you don’t want to deal with your website source code, chances are you will install plugins for each of these implementations.

But if you install Google Tag Manager once, you will be able to install all future apps on Tag Manager, without touching your source code.

If you’re new to Tag Manager, no worries, we wrote a step-by-step guide on how to install Google Tag Manager + the Facebook pixel.

Uninstall non-essential plugins

A standard tip on speeding up a WordPress website is by avoiding as many plugins as possible.

Yet, the line between essential and secondary stuff is blurry, especially when you want to install everything with just a few clicks.

Such a promise comes with a cost—making your website too heavy.

This time, I want to help you discern what is essential and what is not by telling you which popular plugins I would avoid and finding a turnaround to use them still.

Monster Insights

Monster Insights gives you website data just like Google Analytics. There’s no authentic reason you would like to visualize your website traffic data on WordPress instead of Google Analytics or Google Data Studio.

If you just want a friendly way to visualize your website performance, just grab our free Google Data Studio templates:

Header and footer

This plugin may not affect your site performance, but you don’t need it if you use Google Tag Manager. It’s a matter of copy-pasting, and you can avoid duplicating tags.

It turns out that when there’s more than one developer during a project, one may install tags through this plugin, and others will decide to do it directly, leading to re-processes.

Popups and webchat plugins

Think of apps like Sumo, Mailerlite, Mailmunch, OptinMonster, Drift, Crisp, or any app that offers popups, banners, website chats, and other similar features. These all can be installed directly on Google Tag Manager.

Google Tag Manager doesn’t only make installation easier. You can do more powerful things like filtering the pages you want a script (aka a piece of code like a plugin) to execute, or quickly set up events.

Use a cache plugin

Using a caching solution is a quick win. With it, you will make sure your server doesn’t consume too many resources for serving the site to users.

Our recommendations are W3 Cache and WP Rocket.

Use a CDN (without losing SEO from your images)

CDN stands for Content Delivery Network.

Your website doesn’t load the same in every country and location.

You may not know it, but if you use a hosting provider whose servers are in the US, your site will load faster to users in the US because they’re near the server. If someone visits your website from Argentina or South Africa, the distance is more significant, affecting the load speed.

Imagine that whenever someone visits your site, there’s a signal that should go from the server to the visitor’s PC. The larger the distance, the more time the website will take to load.

A CDN—a network of servers located globally— “identifies” the location of a user and will serve your website from the nearest server there. For instance, if you’re in Brazil, the CDN will serve your website from Amazon’s servers in Latinamerica, reducing the distance between a server and a user (and the website load time).

Our website performance measurement tools reliable?

One of the first things I asked the IMGHaste team was which performance measurement tool they suggested.

I expected that they told me that Pingdom was better than Google products, or at least, Google products like Web.dev, Page Speed Insights, and Chrome UX were the best by far.

In fact, they use Pingdom, GTMetrix, and Google Speed Insights.

But their answer was none.

It turns out they all have a different way to measure your website.

Pingdom assumes that every user has a fiber connection, so they will test your website with 1GB or bandwidth, which is not realistic.

The answer was that the only real KPI for measuring performance is using your own user’s metrics; these tools may lead to false-positive or negative results.

And the tool he recommended was Google Analytics. According to the IMGHaste team, Google Analytics was far more accurate than Google Speed Insights. With it, you can get actual data from speed performance at a user level.

To use a page builder or not to use it

I’m a marketer, not a developer.

Depending on the Facebook Group I’m visiting, I will see different points of view when it comes to using Page Builders like Elementor, Divi, Oxygen, Beaver Builder, Thrive Themes, and Visual Composer.

A purist developer will insist that to achieve the highest performance; you need to code your site from scratch to be as customizable as you need.

To me, they’re ignoring the business and marketing side.

They ignore the fact that you need to do changes fast, post more content and landing pages frequently, and do it quickly and sometimes alone.

While using visual editors will be harmful at some level for your website, they save hours so you can iterate and build fast. You’re sacrificing milliseconds of performance for hours of work saved.

Want to speed up your site with a few clicks?

IMGHaste has a product that the PitchGround community is loving; it solves a problem in a few minutes that saves thousands of dollars—all on a lifetime deal.

Udit Goenka
Udit Goenka
Articles: 97