WordPress speed optimization

Nida.tools

Before we dive into why, how & what, we recommend you run a page speed test on our website, such as GTmetrics or/and Google Lighthouse and let’s talk from there…

Before introducing you to the WordPress speed optimization plugin of Nida.tools, the technologies used and so forth, we would like to start out by talking a bit about the importance of page speed and its correlation to SEO, UX & conversion rates, how to measure page speed and then going into the difference between perceived and actual loading times and finally show you the All-In-One WP optimization package, which isn’t going to move the bar by 5 or 10%, but with up to several hundred percentage. Excited? Let’s go!

Table of Contents

Why is Page speed important?

We have all been told to speed up our WordPress site in order to increase the user experience, improve our search engine ranking and increase our conversion rates, but where is the correlation? Let us show you.

How page speed affects Search engine ranking

Have you ever asked yourself one of the following questions?

“How does page speed affect my search engine rank?”

“Are page speed and search engine ranking interconnected?”

The answer is yes! Let me walk you through the following steps: What Google says, Google’s new update: Web Core Vitals. What third-party data scientists say.

What Google says:

We all know that the Google algorithm isn’t completely publicly available, but Google never had any trouble telling us about the importance of page speed.

Google wants to improve the online experience by punishing sluggish websites. They even talked about a “badge of shame” which could appear in Chrome on websites that are deemed to consistently load slowly.

“In the future, Chrome may identify sites that typically load fast or slow for users with clear badging,” Google’s Chrome team wrote in a blog post named “Moving towards a faster web” (LINK: https://blog.chromium.org/2019/11/moving-towards-faster-web.html). “This may take a number of forms and we plan to experiment with different options, to determine which provides the most value to our users.”

This suggests Google may not only punish slow-loading websites but also rewarding those with a good track record of load times, “Our long-term goal is to define badging for high-quality experiences, which may include signals beyond just speed.”

The Google Search team already announced speed would be a ranking signal for desktop searches in 2010 and as of July 2018, page speed would be a ranking factor for mobile searches too.

(https://developers.google.com/web/updates/2018/07/search-ads-speed)

According to Google, page speed is a ranking signal.

Google’s new update: Web Core Vitals

Google lately announced their new update Core Web Vitals, which is putting a lot of focus towards the three metrics shown below:

What is LCP?

Largest Contentful Paint is a Core Web Vitals metric that site owners can use to assess user experience and understand if a user will find a web page useful based on the render time of the largest blocks visible to the visitor.

Fast loading time is important to create an enjoyable user experience. Not only is load time a critical factor for a positive user experience, but a web page that loads quickly is more likely to rank higher in Google as well as impacting engagement and conversion rates positively compared to a page with slow loading times.

LCP measures the time it takes different content blocks to load within the user viewport (which is a fancy word for “current screen”). This metric tells you how quickly content sections render on the visible screen, and nothing below the fold is considered.

What is FID?

Online consumers want pages that are fast and easy to engage with. First Input Delay measures input latency (the time it takes a page element to respond from a user’s input) to identify pages that could cause your audience frustration.

Modern websites use an array of advanced technologies and dynamic content widgets to serve content to their audience. While this type of content can improve content delivery, these enhancements can cause delay times that require a user to wait for their browser to act on their input.

Developers need to reduce the time users spend waiting for a browser to respond to their input to improve engagement and usability across the site.

FID measures how responsive a page is when loading element inputs from a user. This means that FID only records events like clicks and key presses.

Site owners should aim to provide a good user experience with FID below 100 milliseconds.

It should be noted that FID is difficult to measure because this data can only be measured in the field. This means that your score will depend on variables outside of your control, like the device capability of users and Internet speeds as experienced by your audience.

What is CLS?

It got to be as easy as possible to engage with links and buttons on a website to drive sales and increase conversion rates.

Cumulative Layout Shift is a metric that identifies links or buttons that shift after a web page has loaded, and reflects the level of difficulty users will experience when trying to engage with elements on your site once a page renders.

UX and design are necessary for a good user experience, and a user will become frustrated if a web page shifts elements while a user is reading.

CLS helps developers determine if images or links shift on the page so website owners can improve usability, drive click-through rates, and thereby improve online sales.

CLS in simple terms, is a metric which helps you understand if content like text, buttons, and banners are pushed around while a user is reading content on a given page (between two rendered frames).

Wouldn’t it be confusing if the elements suddenly changed position? Wouldn’t it hinder the experience on a page?

It’s important to ensure all content stays in place after a page loads on the user’s device. CLS therefore looks at metrics to determine the visual stability of a page from a user perspective by considering several factors such as layout shift, impact fraction and distance fraction.

What third-party data scientists say:

Neil Patel, teamed up with Ahrefs, to dig into the question of page speed and Google rankings. This study is especially interesting because he broke page speed down into specific metrics such as:

Time to first byte – how long it takes for a web server to send back the first byte of data. A basic measure of responsiveness from the server.

Start render – when the first visual part of a site appears.

Visually complete – the site is fully visible, but there’s still things loading in the background

Document complete – the document is loaded, but asynchronous code might still be running.

Fully loaded – everything is done.

The results showed that sites ranking in the first 5 positions at google had noticeably lower page load times than sites ranking at the 6th position. In fact, the site in position 6 was, on average, 20% slower than the site in position 1.

You can view the full chart below:

Image by Neil Patel (https://neilpatel.com/blog/does-speed-impact-rankings/)

 

Additionally, Neil and the team found that top-ranked websites have faster site speeds for page load time to first byte (TTFB).

This was the largest correlation noted in the study. Notice how the chart below, tracking only TTFB speeds, has a massive increase in site speed between positions 1, 2, and 3.

Image by Neil Patel (https://neilpatel.com/blog/does-speed-impact-rankings/)

If you’re interested, Neil’s study also digs into how search rankings correlate to the other mentioned metrics, but the conclusion from their research showed that page speed has a significant impact on Search engine ranking and especially the fact that time to first bite had the largest correlation between the broken-down speed metrics.

Okay, so at this point, we can conclude:

1. Google says that page speed is a ranking factor

2. The data suggests correlation between page speed and Google rankings

3. Both Google’s Core Web Vitals and the third-party data-scientists tell us that TTFB (Time To First Byte) is one of the most important metrics if we break down the elements of load time, so maybe we should focus towards improving load times starting from there.

How page speed affects conversion rates

You have properly heard the term “conversion rate” its one of the most important metrics for many types of websites and now we will dive into what it is, why its important and how its connected to page speed.

 

Firstly, let’s establish what is conversion rates?

A user converts when they take the action that the webpage owner wanted them to take. As an example, an e-commerce page selling lamps aims at making the visitor purchase and click on the ‘buy’ button.

Websites can have different purposes and therefore different actions as a conversion. Other examples could be signing up to a newsletter, contact form, completing a survey or maybe just clicking to the next page on the website.

The conversion rate is the percentage of total visitors to the webpage who convert. To make it simple, If 100 users visit the page advertising lamps, and 2 users actually click the ‘buy’ button, then the conversion rate is 2%.

Conversion rate optimization is the action of trying to increase this figure as high as possible.

Conversion rate optimization is an ongoing process, because unless a page’s conversion rate is 100%, which is highly unlikely, it can always be optimized further and with time user behavior and trends tend to change.

So how does page speed affect conversion rates?

Website performance has a well-known and measurable effect on conversion rates.

Studies have consistently shown that fast loading webpages will result in a higher conversion rate. In other words, the quicker a webpage loads, the more likely a user is to perform the action desired by the website owner.

But how much are we talking?

– According to Amazon every 100ms of load time equals 1% less sales.

– Walmart found that for every 1 second improvement in page load time, conversions increased by 2%

– COOK increased conversions by 7% by reducing page load time by 0.85 seconds

– Mobify found that each 100ms improvement in their homepage’s load time resulted in a 1.11% increase in conversion

Source: https://www.visiontechteam.com/speed/

So for all running a WooCommerce or any other WordPress E-commerce site, load time is crucial for your conversion rates. A fast and lightweight WordPress site is a must-have.

How to measure page speed?

You have to check your WordPress site before going into load time optimisation, in order to know exactly what’s the current load time and is there a specific metric i simply got to improve on (e.g, Fully loaded site, TTFB, CLS etc.). There are several different tools to analyze page speed and here are some of the ones that we go to (in random order):

· GTMetrix

· Pingdom

· WebPageTest

You should test using a combination of tools since they test for different things and have different servers, which can affect the results.

The tools mentioned above will analyze the content of the web page and from the analysis it will generate the performance report as well as giving suggestions to make the specific page load faster.

The report (depending on which tool used) will include load time, page size, time to first byte, number of server requests required to load the content on the page and similar metrics.

If you already have a WordPress website, then you can enter the URL into a speed testing tool and check the specific website.

GTMetrix guide:

GTMetrix analyses a website in terms of speed and optimization. It’s a great tool for checking performance.

Source: GTmetrics.com

GTMetrix presents hundreds of metrics, but these are the ones we’re using for our test:

PageSpeed Score: The score is a percentage out of 100%, as a cumulative from dozens of tests for things like minifying JavaScript, CSS, redirects, image optimization, and much more.

YSlow Score: Scored as a percentage out of 100%, using factors such as cookie sizes, JavaScript, CSS, DNS lookups, errors, and much more.

Fully Loaded Time: How long it takes for GTMetrix to load your entire website. The lower the better.

Total Page Size: The file size of the entire site.

Requests: The number of requests sent to the server to deliver the files. Again, the lower the better.

Pingdom Guide:

Pingdom is kind of similar to GTMetrix, but we like to use a couple of these tools side-by-side to have a “second opinion”

Source: Pingdom.com

Performance Grade: This is a grade out of 100. Higher is better. Some elements that contribute to the score include content size, errors, redirects, requests, and much more.

Load Time: The amount of time it takes Pingdom to load the entire website. Lower is better.

Page Size: The size of your total site files. Lower is better.

Requests: The number of server requests to deliver the content.

WebPageTest Guide:

Source: webpagetest.org

This table presents a lot of different metrics, But for now lets focus on:

First Byte: Tells you how long your server is taking to send the first byte of data.

Start Render: This is when a user went from a blank webpage to something displayed on the screen. It could just be your header as the heavier things continue to load.

First contentful paint: tells you when the browser renders the first bit of DOM.

Speed index: Speed index is how many milliseconds it takes for the visible parts of a webpage to be displayed

Actual loading time vs perceived loading time

Let’s start by dividing loading times up into two categories which both should be analyzed and improved, one is from an objective perspective and the other is from a psychological perspective, which brings us down to:

1. Actual loading time (the objective perspective)

2. Perceived loading time (the psychological perspective)

Based on cognitive psychology, a website should ideally load in less than one second in order to maximize the user experience!

But what is as important is how fast the user perceives it to load and therefore perceived load times become a subject worth exploring and improving!

How we can improve loading time

Earlier we talked about the two different aspects of loading times, the actual loading time and the perceived loading time, now we will dive into how we can improve both of them in order to get a fast loading website.

How can we improve the actual loading time?

 

1. Deactivate unused plugins and themes

Aside from always keeping your plugins and themes up to date, deleting unused themes and plugins is the next step to a fast loading website.

 

2. Clean Up Your Media Library

With time you might start to accumulate unused images and to free up space, you should consider removing unused media.

 

3. Clean Up Your Database

Your WordPress database will start to accumulate clutter over time. This is unnecessary bloat that can slow down your website. However, if you regularly clean up your database, you can reduce your database size for a faster loading website.

To put things in perspective, post revisions can take up a big part space. If you have a post which is 150KB of data and there are five revisions of this post, the total space wasted is about 750KB.

 

5. Remove Render-Blocking Javascript and CSS

If you take a look at your page’s waterfall view using a tool like Pingdom, you’ll likely see that there are a number of JavaScript files (.js files) which are loading before your “start render” line. This is most famously known as “render-blocking JavaScript”.

The function of JavaScript is basically to perform an action on your webpage, like a popup or rotating images in a slider. These actions don’t need to be loaded until your website fully loads the content and styles.

 

6. Minify CSS, HTML, and JavaScript

With time as your project grows, CSS, HTML, and other source code files can build up and cause your site to run slowly. To give your site a speed injection, you should consider removing old code which you are not using and minifying its output. Would you run fastest with a 10 kg backpack or a 1 kg backpack? Easy to answer.

With minification, the backend of your website will be optimized to be a light and powerful machine.

Minification works by reducing the size of HTML, JavaScript and CSS files, and removes unnecessary characters, like spaces, line breaks, and comments.

The result is a reduced amount of data required so that the files run quicker and your WordPress website loads faster.

 

7. Optimize Images

Images are vital to keep visitors engaged. If your website contains a lot of beautiful images, it’s recommended to optimize these images to achieve faster load times on your WordPress Website.

There are multiple ways you can optimize your images, including compressing images, adding alt text and titles, and creating an image sitemap.

 

8. Lazy-Load Long Pages

For sites which have long pages, Lazy Loading can be a true time saver. Lazy Loading prevents the elements lower down on your page from being loaded until the visitor scrolls down to see them, which in the end means that they are only being loaded if necessary and therefore the name LAZY load.

By not loading all of the content of your long page at once, this allows your site to begin rendering faster.

 

9. Limit Comments Per Page

While we seek to get a lot of interaction and attention on ones blog posts, a ton of comments can slow load times down.

Breaking the comment section into pages is a good idea to shave off the time it takes for them to load, this way you get to keep all the engagement but don’t need to load a lot of data all at once.

 

10. Reduce Redirects

Redirects have some uses, but unnecessary redirects can slow things down. It’s best to reduce the amount of additional information requests that your server undertakes.

 

11. Reduce Post Revisions

Post revisions save every content edit you make, which can make your site run slower. To speed up your site, you can choose to limit the number of revisions per post in order to keep it light.

 

12. Disable Pingbacks and Trackbacks

While you might have never heard of pingbacks or trackbacks, they are considered by some to be a legacy feature.

If these features are not being used it’s a good idea to make sure they are turned off as they can cause your website to slow down page speed.

 

13. Run the Latest Version of PHP

Running the latest version of PHP can have a major effect on the loading time of your WordPress site.

 

14. Choose a Fast WordPress Theme

A beautiful UI design is meaningless if your site fails to load fast.

Rather than opting for a feature-rich theme (which involves a lot of code that has to be loaded every time someone visits your site), take a minimal approach by using a theme that is focused super sharp on load time optimization as page builders contain everything we need.

 

15. Use a CDN (Content Delivery Network)

No matter where a user is located, your content should be delivered fast, really fast. Sometimes this isn’t possible, if your website isn’t on an infrastructure that contains data centers around the whole world.

Distance can possibly result in lagging content delivery, but this is where a content delivery network (CDN) becomes your best friend.

A CDN means faster page load times because when the CDN is configured, your website will use an optimized server that’s closest to your visitor.

The data center will store content and files, and then deliver them to users based on their location (yes, that’s really clever).

This can help reduce external HTTP requests because the static content is already ready to go instead of requesting tons of HTTP all at once.

 

16. Leverage Browser Caching

When your web server has HTTP headers set up to specify cache expiration time, it also includes browser directives on how long the web page should be cached in your visitor’s browser.

This tells your visitor’s browser to download the elements of your website (like CSS, JavaScript, and images) locally from there rather than from the network.

This will ensure that the web page loads faster for them as it decreases the amount of data having to be downloaded.

 

17. Move to a Dedicated Server

If your website receives a great amount of traffic, it’s a good idea to host it on a dedicated server, where server resources are not shared.

Even though shared hosting is cheaper, being on the same server as others can lead to clogging of CPU and RAM. It’s like being in an apartment complex and you only have so much water to share (I used to live like that…) if another site hogs up all the server’s bandwidth, then you are left with a slow running website.

To ensure your site has maximum uptime, it’s worth investing in a hosting plan where you receive the full resources of a single server.

 

18. Consider Your Hosting Infrastructure

The hosting you choose can dramatically impact site speed.

Depending on the server and technology, managed hosting is necessary for a fast WordPress website.

 

How can we improve the perceived loading time?

 

1. Integrate preloaders/skeleton loaders

You can reduce the perceived loading time by displaying either a progress indicator, skeleton loaders or similar in order to remove focus from the empty side and show that things are in motion, because the user is informed of how the site is progressing, and how long they must wait before they can interact with the site.

APPs, Facebook, and YouTube also work with so-called progress indicators – also called preloaders.

 

2. Load “above-the-fold” contents first

It is also important to make sure that the website loads in such a way that the area “above the fold” loads first (“above the fold” = the first visible area of a webpage).

This means the visitor will quickly be shown something that they can look at or start reading. After that, the website contents “below the fold” can be loaded, which in the end gives the perception of a fully loaded site long before it’s actually loaded and in the end, we are here to serve the person browsing and delivering them maximum value.

The Nielsen Norman Group did an eye-tracking study which showed that, when the most important content is loaded first (Above the fold), users tend to spend 20% of their time looking at this exact content.

However, in case of this area to take eight seconds to load, the visitor will spend less than one (1) percent of their time looking at this area.

 

3. Use WebP

The loading time can also be shortened if you use WebP. WebP is a more and more used standard for images developed by Google. It allows us to compress the images to sizes down to 1/10 of the original image. The conversion of the image still depends on factors such as the wanted quality level but overall it will yield a positive result each time.

 

4. Preload products

Preloading content functions similarly to the focused loading of the “above-the-fold” area. Therefore, relevant content can be immediately shown to the user and the rest of the site will load in the background. Amazon works this way: the first 3 products are always shown while the rest are loaded in parallel. For this to work, it is imperative that a concrete search inquiry was placed, so that the user can see the results they are searching for.

 

5. Make inevitable wait times visible to the user

For example, with travel portals and flight search engines that comb through thousands of providers, when users have started an inquiry, the perceived value (the long loading time) should be made visible. Thus, these portals usually show a loading bar that shows how far the search is progressing and the concrete number of the thousands of suppliers that were compared for the personal search inquiry.

 

What makes a WordPress theme fast?

In order to create a fast-loading WordPress theme there are several different things to take into consideration, Typically, it boils down to the quality of its code.

Its styles and scripts should be streamlined and efficient. Below we have covered a few of the factors making a WordPress theme fast:

 

Responsive design

The vast majority of themes have a responsive design, because in the end it’s really essential for offering a fast-loading mobile experience and today the majority of browsing is happening from mobile devices.

Responsive web design dynamically loads your website based on the screen size of the visitor to the page, there is no need for a separate version of the site for mobile users.

In the end that means that Google only must crawl your website once, compared to having a separate version of your mobile site.

A separate version would also mean that all the assets on your website would have to be duplicated, resulting in more use of bandwidth and maintenance.

This is also one of the reasons why Google recommends responsive designs.

 

Lightweight

Huge files sizes due to animations, high-quality images and effects will slow down the page performance and today we have page builders which contains all the styling you can imagine, and if that’s not enough go use some custom CSS and get the best of both worlds – a beautiful and fast loading WordPress site.

Lightweight WordPress themes with only the most necessary features will help ensure your site loads fast.

 

Asynchronous or Deferred Loading of CSS and JavaScript

CSS and JavaScript files can slow down a website, but every theme needs some of this code in order to make a webpage beautiful and interactive.

But we can choose to load these scripts in two different ways: synchronously or asynchronously.

Synchronously means that the files load one at a time, in the order in which they appear on the web page. Which means that if the browser starts loading a script, it will stop loading other elements on the page until that script has been fully loaded.

Asynchronous loading enables multiple files to load at the same time, which can be a game changer for speeding up the web page.

Some themes load asynchronously or defer loading of these scripts until they are necessary. These themes will be faster than those that use synchronous loading.

 

GZIP Compression

Compression is basically an action that reduces file sizes to make it faster for servers to transfer files to web browsers. The smaller amount of data there is to send, the faster the page loads in your browser.

GZIP is the most popular compression method today since it can reduce the amount of data by up to 70%, it works by enabling a compression algorithm to run on each reaquest, which slims the overall size of the request which gives less data to download which makes for a quicker response in the end.

 

Reduced HTTP Requests

Every HTTP request adds to your site’s load time. As a site grows, the amount of HTTP requests will increase and eventually create a noticeable delay between the user clicks and when it loads.

Both the number of files requested, and the size of the files can affect loading time.

WordPress themes with fewer and lighter files will make less HTTP requests and therefore load faster.

On HTTP2 the protocol can handle multiple requests per TCP connection which allows us to load in css files and javascript files at the same time. Hence the amount of requests when using HTTP2 matters a lot less than on a HTTP/1 protocol website.

 

What kind of tools and technologies have Nida.tools used in order to create the fastest WP optimization plugin?

Now it’s time to dive a bit into the nerdier stuff and yes, we mean that in the best possible way, we are nerds who are proud to be so.

With that said, let’s not waste time and instead explore what kind of technologies, features and tools you can expect to find in our All-In-One optimization package which ultimately will help you improve your actual loading time, as well as your perceived loading time.

Nida.tools is built with the highest standard of coding and all the standards and has been something we have been putting a lot of attention to, so let’s dig into what really separates Nida.tools from the rest and why it’s bringing the fastest load times of any WordPress speed optimization plugins.

The Nida.tools plugin includes:

 

CDN

By using a CDN your assets will be served from a static endpoint, which ensures an extremely fast response no matter where in the world your visitor is visiting from.

In short this lets you ensure fast load times – it allows the user to fetch a cached copy from the CDN if they have used the file before – thus making initial load faster.

This is great in an environment driven by reusable plugins like WordPress.

Page Cache

Utilizing the internal caching system of WordPress – Nida.tools comes packed with a page cache to ensure a clean experience for the end user who is using your website.

The page cache is by default not turned on since this is a tool which should be turned on when going into production mode.

Object Cache

Nida.tools comes packed with an object cache which is bound with the Object Cache of WordPress.

It utilizes Memcached, Redis and file caching structures to handle object cache.

This will ensure that the database is not getting used as often, which is good since the database almost always will be the slowest point of your system.

Asynchronous Loading

Nida.tools loads only the parts of the page that you need – and then asynchronously loads in the rest of the page when scrolling.

This feature is by default not turned on, since it is a tool which is built for the production environment.

This allows for a very small initial output, and afterwards with small and fluent data gathering it allows for a great experience when traversing the page.

Lazyload

Images and videos are a huge culprit when it comes to initial loads – this is where lazy loading comes in.

Basically, the video or image is told to wait for the initial spawn to complete before they start spawning. Which enables us to delay the download of the files.

With Nida.tools you get a tool that handles this from the get-go, so when you transition to production mode your tools ensure a highly optimized output.

Skeleton Loaders

The key here is Perceived Load Time.

Basicly the object is to ensure that the site gives a loading structure that has relevance to the content. As fast as possible.

By doing this we allow the user to nearly instantly get a loading response, allowing the user to know that the site is loading.

Which in effect gives a much better perceived load time.

Page specific scripts

One of the sure culprits to find on almost all websites are javascript files which are getting loaded in, even though they are never getting used.

The whole task in doing this on a page to page basis is often a quite huge one.

We try to simplify this task, to allow people to easily ensure an optimized page output.

Page specific CSS

Nida.tools has a service center which offers different tasks that require advanced server technologies that most WordPress hotels don’t offer.

In the start these features will be a free part of the theme, but only for a limited time.

As the service center and the features grow, this will later on require a small fee for the services on a monthly or yearly plan.

Image optimization

Optimization of images through our service center allows both for image conversions or simply just optimization of existing images.

This service will always be a free service on the service center for all theme owners.