We use cookies
This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..
We use cookies
This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..
Published at Jul 25, 2023 11:07
Disclaimer: Our team is constantly compiling and adding new terms that are known throughout the SEO community and Google terminology. You may be sent through SEO Terms in cmlabs.co from third parties or links. Such external links are not investigated, or checked for accuracy and reliability by us. We do not assume responsibility for the accuracy or reliability of any information offered by third-party websites.
Pagespeed is a term often used to describe the page loading speed of a website. It covers the time it takes for a web page to fully load and display to visitors.
Pagespeed is important because it affects user experience and content availability. Since Google announced that website speed is one of the ranking factors, as website owners, this is certainly something to pay attention to.
We realize that every user wants to have a comfortable and fast website experience. In fact, every visitor will leave a website within 12 seconds to 7 seconds in recent years. A huge impact such as decreased conversions, reduced page views, and decreased website visitor satisfaction.
It is unfortunate that a slow website can make users leave our website before they even see the content provided or the products that are offered.
Not only users are affected, but also search engines. Google will penalize a slow website by lowering its ranking in search results.
So, how do we build a great website so that the quality content and products we provide are not in vain? Here's how.
There are many things that cause a slow website, some of the main causes of websites with Wordpress are as follows:
Before optimizing Wordpress speed, it's important to understand why improving website loading speed is important. Usually, the goal is to make the website accessible quickly to visitors.
However, sometimes with the existing design, scripts that have been used such as CSS, js, external scripts (from other websites), and assets, this optimization becomes difficult to do. Therefore, from here we will learn what needs to be done to improve website speed on Wordpress.
How to analyze a Wordpress website to know what causes a slow web load. There are several tools that can be used to analyze websites, here are some examples:
There are a few things to know before increasing web speed, which is to analyze things like LCP, CLS, and TBT. The following is an explanation of these terms:
1. LCP (Largest contentful paint)
LCP is one of the metrics used to measure the speed of a web page. LCP refers to the time it takes to render the largest content element visible in the user's viewport. This content element is like the largest image, video, or text block.
The LCP benchmarks are as follows.
LCP | Score |
0 – 2,5 seconds | Good |
2,5 – 4 seconds | Need Improvement |
Over 4 seconds | Bad |
So, here are 4 factors and effects of LCP on websites
LCP Subpart | LCP factors | Impact |
TTFB | Generally due to Hosting and CDN + Pages that are Cached. | ~40% |
Resource load delay | Due to the largest top content. For example the use of lazy load (loading delay) in the image hero section or article title that uses skeleton. | <10% |
Resource load time | Caused by image/CSS/JS file size, critical CSS, CDN, or expired cache. | ~40% |
Element render delay | Caused by Render-blocking CSS/JS files, JS file size, and font display (optional). | <10% |
How the 4 Factors that influence the LCP work
2. CLS (Cumulative Layout Shift)
CLS is one of the metrics that measure the layout stability of a web page, this happens when the page layout changes unexpectedly causing visitors trouble. For example, when visitors read an article, click on a link, etc.
CLS calculates the difference between the position of elements when loaded, the greater the difference will affect the resulting CLS value. The following is the CLS score benchmark.
CLS | Score |
Under 0.1 | Good |
0.1 - 0.25 | Need Improvement |
.25+ | Bad |
3. TBT (Total Blocking Time)
This is the time required by the browser to wait for a response from the server before it can continue the page rendering process. The longer the waiting time, the slower the page will load and display to visitors.
Here are the benchmarks to calculate the score of TBT.
Total Blocking Time | Score |
0–300 milliseconds | Good |
300-600 milliseconds | Need Improvement |
More than 600 milliseconds | Bad |
After we learn the objectives, know the optimization tools, and some metrics to consider, then we can optimize to speed up website loading with wordpress.
There are several main recommendations that can be applied as follows.
The Wordpress hosting service that we rent has an important role and greatly affects the speed of the website later. Let's say that hosting is a house and our website is the person. Therefore, choosing the right hosting can help the website be accessed quickly.
Here's what to consider when choosing a hosting.
A. Data Center Location
Determine the geography of website visitors, is the target audience Indonesian? Overseas? or the whole world? This location selection is the first thing that must be done in relation to the target visitors who visit the website the most.
For example, if the target visitors are only from Indonesia, then the data center is too far away if the server is in Europe. Normally, Indonesian visitors can use Indonesian or Singapore servers with pings ranging from 10-100ms.
B. Hosting Specifications
Choosing hosting specifications that can accommodate our website properly is the main thing, not too big and not too small for the size of Disk Space, RAM Memory, Bandwidth, and Inodes. I recommend choosing Hosting with NVMe SSD disks instead of HDD disks. Because NVMe SSDs transfer data 25x faster than HDDs.
C. Hosting Providers
There are many types of hosting provided by providers but broadly speaking there are 3 types of services sold:
D. Choosing a WebServer
A web server is a piece of software or hardware that receives requests from website visitors and sends them back in the form of responses such as web pages, images, files, and other data. Choosing a web server is important and currently, there are 3 web servers that are commonly used by hosting providers:
As much as possible to avoid Apache Web server, I suggest NGINX or Litespeed are better.
E. PHP Upgrade
Wordpress uses PHP as its code base and every Wordpress version update also needs to adjust to the latest PHP version to avoid code errors. In addition, it can also increase a few percent of the code script execution speed.
It should be noted, Wordpress must be compatible with the latest PHP version, if an error occurs after upgrading the PHP version, most likely there is additional code, themes or plugins that are not compatible with the latest PHP version.
In this digital era, making changes to wordpress performance optimization is a way for websites to be accessed quickly. Therefore, load speed optimization is one of the important factors. Here are some ways:
A. Update Wordpress Site
Wordpress is a well-maintained open source that is updated frequently. Each update also provides new features and fixes certain security issues and bugs. Wordpress themes and plugins also have regular updates. Therefore, as a website owner, it is necessary to update the latest version of the site, themes, and plugins.
B. Use an Optimized Theme
How to determine a theme that has been optimized? When choosing a theme we need to pay attention to a good theme, not choosing a theme that is poorly coded and can slow down the website.
It is better to use a simple theme than a theme with a large coding size with a complicated layout and flashy animations. If you are looking for a theme reference, consider the following specifications:
C. Page Builder Optimization
Page Builder is popularly used to create page views because it is very easy and fast. However, with a one-page builder component, there will be a lot of HTML, CSS, and js loaded. Then how to optimize it?
1. Elementor
If the website uses Elementor, in the Elementor builder settings some of these features can be enabled to increase Wordpress speed.
2. Divi
For the Divi page builder, you can check the Options section then Performance, and enable it according to the needs of the website.
D. Optimizing Images
Images are one of the factors that slow down website loading the most, due to the size and format displayed on the website. Some things that need to be optimized from images before uploading.
1. Image format selection
Generally, there are 4 image formats for websites, namely png, jpeg, gif, and webp. Of the several formats provided, it is more advisable to use the webp format because it is the latest generation format and is in accordance with the standards for website load speed.
2. Adjust Image Size
Many people upload images with large sizes, for example (2500px) X (1600px) even though the sidebar section only needs a size of (675px) X (432px). So, we need to adjust the layout that we want to display.
3. Compress The Image
Images that have been adjusted in size will reduce the size of the image. To be more optimal, you can compress the image so that it is even smaller and ready to be uploaded to the website. Ideally, the size of the uploaded image is no more than (50kb) for images below (1000px) and less than (100kb) for images above (1000px).
4. Responsive Image
Fortunately, wordpress by default has created a responsive image structure. So, there is no need for settings in terms of responsive images. In addition, responsive images also help from the SEO side to increase the loading speed of a page, improve user experience, be mobile friendly, and reduce bounce rate which refers to visitors who leave the website.
One of the browser tools for image optimization is https://squoosh.app/
E. Determining Background Transparency
Usually, website layouts use background images that have certain images/patterns. However, if the background only uses plain colors or gradients, it would be better not to use images. Thus the website has fewer images loaded.
F. Removing Unused Image Size
Images uploaded to wordpress will be stored on wordpress media and assets files in the wp-content folder. Unused image files weigh down the hosting and make the server require more resources.
Although it doesn't directly slow down the website for the user, deleting unused images will help the upload process because the server will feel lighter. On the other hand, certain themes or plugins can make the image size from the wordpress default.
G. Optimize Existing Images
When we find a website that has many images that have not been optimized, the solution is to optimize them with a plugin. From some research, here's a comparison of image compression plugins.
Plugin | Compressed Size | Saved (%) | Method |
reSmush.it | 36 KB | 63.8% | Lossless |
EWWW Image Optimizer | 97.5 KB | 1.9% | Lossless |
Compress JPEG & PNG images | 34.3 | 64% | Lossy |
ShortPixel Image Optimizer | 37 KB | 63.5% | Lossy |
WP Smush | 99 KB | 2.9% | Lossless |
The Lossy method has a better compression rate, but the result will be more broken when used at a high compression rate. Lossless, on the other hand, has a lower compression rate than Lossy, but there is no difference between the original image and the compressed image.
H. Lazy Load on Images
It is necessary to delay the loading of assets until they can be seen by website visitors. There is no point in creating assets that cannot be seen by users except for ads. Here is the information when using Lazy load on images:
Pros
Cons
Want a fast website but in a fast way too? We can use plugins to fix the problem.
A. Cache
For caching, you can use Litespeed if you are using a Litespeed server as well, as this can significantly increase website speed. In addition, there are already some hosting providers that provide Litespeed by default. In addition, the plugin is free.
Main Features of Litespeed Plugin
If you use another web server like NGINX, you can use Flying Press, but unfortunately, this is not free.
The main features of Flying Press are as follows
B. CSS & JS Script Optimization
By default, wordpress has several HTML scripts that are automatically obtained, JS to load functions on the front-end, or CSS from plugins and themes.
So, it is necessary to do this optimization to reduce the load of scripts that are not used on the website. There are several methods that can be done such as using plugins or done manually when adding scripts separately.
1. Remove unused CSS
Some CSS files in plugins are sometimes not used, it is better to delete these files or do not need to be loaded. Here's an example script of an unused file.
In Wordpress, CSS can be cleaned up using the Perfmatters plugin which can manage CSS or JS faster in a separate file. This is an example of setting up one of the plugins that are disabled and can choose at what page location you do not want the plugin to load.
Besides the Perfmatters plugin, we can also use the WP Rocket plugin to delete unused CSS. By selecting the URL path, class, section id, or tag.
2. Remove unused JS
Just like unused CSS, deleting unused JS file scripts needs to be done as well. An example is the Perfmatters plugin that deletes the js file of the Contact Form 7 plugin on the article details page.
3. Minify or Combine HTML, CSS, or JS files
Minify is a way to reduce the file size by removing white space and comments in a script file. Here is an example of a file that has been minimized. It can be seen for the jquery file size (260kb) after being minimized to (84.6kb). This will have a big effect if the file we provide has a large size.
As for the way to combine, namely by combining files into one which is used to reduce the number of requests, this is not recommended on websites that have many files or plugins. Because it can damage the website in terms of layout and functionality.
To combine files, you can check first whether it has a big impact on the website or not.
There are many Cache plugins that provide this feature. Below I provide one example of the Autoptimize plugin for its features.
4. JS file placement
The last optimization for js scripts is file placement, in caching it is called critical assets to determine which files are loaded first. There are 3 ways to load, namely:
Here is an illustration of the difference during execution, make sure to place the file correctly. Also, make sure to load the files you want to load first before executing them.
To organize the order of files, you can use the Async Javascript plugin.
C. Fonts Optimization
Fonts loaded on the website affect LCP (Largest contentful paint) this is due to the use of external fonts or the display fonts method instead of swap. In addition, it would be nice for fonts to be accessed locally and not taken from external plugins or themes. This can also appear on Pagespeed reports like this.
There are ways to optimize font display or preload on Wordpress:
Some changes will make the wordpress website speed faster, but there are times when we need to check regularly. Because Wordpress plugins and themes can have updates and may affect the existing code and need to be re-optimized.
Storylabs is a website that provides various media content with different categories ranging from culinary, transportation, education, finance, parenting, etc. Storylabs wants to provide a pleasant experience to its readers by providing a website that can be accessed quickly.
At a certain time, the website underwent a major revamp where there were changes in terms of appearance design, the addition of AdSense features, and some websites were constrained by servers which resulted in slow website speeds. In addition, this also results in low conversion rates and a decrease in website visitors. Now to overcome this problem, the Storylabs team focuses on improving the pagespeed of their website in the following ways:
1. Fast and Proper Server Selection
Having a fast server is the basic thing to improve website speed, imagine if the website has been audited but the rendering time of the server is slow. Then it becomes useless, the Storylabs team uses hosting with an Indonesian server because most users are from the Indonesian region and use Litespeed server technology.
2. Analyzing Website Pages
The Storylabs team conducts a thorough audit of the performance of all website pages using tools to identify page loading issues, such as large images, uncompressed css and javascript files, and inefficient cache usage.
3.Compress & Convert Images
The first step taken is to compress the images throughout the website as large image sizes can lead to slow page loading. Compressing images without sacrificing visual quality can significantly improve website speed. In addition, for the image format Storylabs uses webp which is already supported by Google and is supported by several leading browsers today such as Chrome, Firefox, etc.
4. Optimize CSS and Javascript files
Minimize the number of CSS and Javascript files on all pages of the website and separating some CSS and Javascript files for specific pages that use these files. Then combine the CSS files that are needed and delete unused code, this can reduce the number of requests that the website must make. Here the Storylabs team uses the Litespeed plugin to optimize it, besides that the plugin is also supported by the Litespeed server.
5. Use of Cache
Storylabs implements a more efficient caching strategy to reduce the server load and speed up page loading time for users who have visited the website before. With proper caching, unnecessary pages are reloaded every time a visitor returns which saves server time and resources.
6. Improve Google Pagespeed score
By performing Pagespeed optimization, Storylabs managed to improve the user experience significantly. The loading time of web pages is drastically reduced and improves user experience both from the website and mobile. Now visitors can more smoothly explore the website and read articles without having to wait long for pages to load. In addition, the improvements in website speed also improved the ranking of the Storylabs website on search engines which helped more organic traffic.
The Storylabs team illustrates on one of its websites how this improves website performance and this is the result of Google Pagespeed testing.
Before
1. Desktop
2. Mobile
After
1. Desktop
2. Mobile
Improving wordpress load speed affects the experience of website visitors and Google's assessment for ranking on search engines. Therefore, we can see the changes before and after optimization practices. In addition, doing some trial and error will let you know more about how to improve website speed with Wordpress.
Thank you for taking the time to read my article! At cmlabs, we regularly publish new and insightful articles related to SEO almost every week. So, you'll always get the latest information on the topics you're interested in. If you really enjoy the content on cmlabs, you can subscribe to our email newsletter. By subscribing, you'll receive updates directly in your inbox. And hey, if you're interested in becoming a writer at cmlabs, don't worry! You can find more information here. So, come join the cmlabs community and stay updated on the latest SEO developments with us!
WDYT, you like my article?
Free on all Chromium-based web browsers
In accordance with the established principles of marketing discourse, I would like to inquire as to your perspective on the impact of SEO marketing strategies in facilitating the expansion of enterprises in relation to your virtual existence.