Nowadays, people are paying a lot of money to Increase website speed, but after reading this article you can do it on your own in just 3 steps.
Hi, my name is Ashwani Chaturvedi and I have been working on wordpress for almost, 5 years the only problem I realize with wordpress is that the more plugin you install the more loading time sucks the user experience of your web page.
In this article, I will specifically target the WordPress website and its optimization.
So, if your website is continuously failing in google’s “core web vitals”, and you are shown with bad page loading metrics for mobile users and desktop users, then it’s probably a problem of “FCP and LCP”.
If you will be able to optimize the FCP and LCP for your web page, then 90% of the optimization will be completed. So FCP and LCP are the main factors and “Image optimization” is the third factor.
So in this article, we will be talking about the procedures to optimize 3 factors of our web page, which are as:
- FCP (First contentful paint)
- LCP (Largest contentful paint)
- Image optimization.
Note– So if your web page is failing to pass the 80% grade in the Core web vitals, then you are probably shown the following issues:
- Poor FCP (first contentful paint) score
- Poor LCP (largest contentful paint) score
- High CLS (commutative layout shift) score
- Server response time (time taken by the server to respond)
- Poor Image optimization
- High FID (first input delay)
- TTFBS (total time to first byte)
- INP (interaction to next paint)
All the above-mentioned factors are optimizable, but optimizing the “server response time” may be difficult because in order to optimize the server, you may need to play with the database and sometimes it depends on the type of the server.
So before we get to the optimization part, first of all, we need to understand the meaning of the above terms.
- FCP– First content full paint is the time taken to serve or represent and execute the first content or visual graphics to the end user.
FCP may be affected by the Javascript or CSS codes. A heavy CSS file or long Javascript code may increase the FCP score or the time-lapse to paint the first content.
- LCP– Largest content full paint is the time taken to serve the main content of your web page. It may be a text, image, color, or responsive Javascript code.
- CLS– Commulative layout shift is the metric which measures the responsiveness of the content or how the content is changing its layout. Sometimes you may have seen pop-up ads which are examples of CLS.
- Server response time– This metric represents the time taken by the web server to respond to the request made by the web browser. The time taken by the web server to accept the request and execute the operation is known as- server response time.
- FID– First Input Delay, is the time taken to interact with the responsive content of the web page. It is governed by the responsive Javascript code. Example- clicking a drop-down menu button.
- TTFBS– “Time taken for first byte”, is an important performance metric, which measures the server response time to a particular request. For example, you clicked on a submit now button to submit a form and this phenomenon takes some time.
- INP– “Interaction to next paint, an user interaction metric, which is based on the responsiveness of the web page. This metric measures whether the interaction with the web page is responsive or not.
So, till now we get to the conclusion that CSS and Javascript are the main culprits responsible for poor page optimization. So the first step for optimizing a web page starts with the optimization of CSS and Javascript.
Just follow the below steps to successfully optimize your website.
3 steps to optimize website speed
- Install a Plugin called “OMGF“, which will load google fonts locally on the web browser. After Installing this plugin, the responsibility to load the font and its style will depend on the web browser, which will certainly help you to load fonts in less time and reduce the stress on the web server. watch the tutorial here.
- Install a cache plugin called “WP Optimize“. WP-Optimize is the best alternative to many premium cache plugins, which offer critical features like- database optimization, cache, minify Javascript and CSS, and optimize images. watch out for the tutorial here.
- Now we need to install a last plugin called “WP Meteor“. WP Meteor is the most important plugin which needs to be installed. This plugin simply delays the loading time for the Javascript codes.
After installing the plugin, you need to do the following settings as shown in the below image:
The WP meteor plugin will simply make your Javascript codes load when the full content of the web page like text, and images is loaded.
For example, this plugin will prevent loading the advertisements of AdSense before the contents. The ads will only be loaded when the content is fully loaded.
Also Read–
How to reduce FCP and LCP to get fast website speed?
The trick to making fast relies on the following factors:
| Image | CSS | Javascript |
|---|---|---|
| Highly affects web pages. Should be less than 90kb. | Affects CLS, FCP, and LCP. | Affects CLS. FCP, and LCP. |
Images– The images must be served in the “WebP format” rather than the JPG and PNG formats.
The size of the image must not be greater than 90 kb, as it will badly affect the loading time.
To optimize the Image section perfectly, you must have enabled the Cache and “Lazy loading”, as lazy loading will give maximum priority to the main content.
CSS & Javascript– Must enable the “minify CSS and Javascript”, and should have the “lazy loading” for the Javascript code.
Use AMP– If possible, use AMP pages for mobile devices. Generally, the AMP pages provide limited customizability, but they are perfect for loading the pages on mobile devices.
Disable the sidebar and header for posts Sidebar and header sections are not important for posts, so removing them sidebar and header section may help you to gain some less loading time.
Server Optimization– Server optimization is related to database optimization. If you are a WordPress user, then you should have fewer plugins and lightweight files on your server to reduce server stress.
So, now I think you have understood how things work in web page optimization. If you will follow the above steps then I guarantee you that you will better results in page optimization, and will also pass the Core web vitals matrix.
In the below image, you can see that my web pages have got better scores in the “Page speed Insight” and “Lighthouse” Analytics.
How to analyze page speed?
Currently, there are many tools to analyze the page speed of your website, but below are some trusted ones:
- Page speed Insight
- Lighthouse (Chrome developer tools)
- GT Metrix
The most simple one is the “Lighthouse chrome developer tools”. Just open a new Incognito window in chrome browser, and paste the link of your web page, and when it is loaded, just right-click anywhere on the web page and then click on “Inspect”.
Step 1– Click on the below-shown Arrow Icon.
Step 2– Now from the drop-down menu, select “Lighthouse”.
Step 3– Now select “Mobile” or “Desktop”, and then click on “Analyze now” just shown in the below image, and then you are done.
