Slow And Steady Wins The Race: Recommendations On How To Improve Your Site Speed
You’ve just started a new website and after some months it begins to slow down.
You may be wondering, what is actually causing the problem?.
It’s not only you, many websites are facing the exact same issue and are looking for recommendations to fix these issues.
Guess what, I have found what you’re looking for and I’m giving you everything you need to help you get a fast blazing website.
In this post, I will be highlighting on google core web vitals and the tools for building a fast loading website.
A website page speed and user experience is based on three factors:
- How fast your homepage loads.
- How quickly people interact with your content.
- The stability of your content.
So what are the core web vitals?
Core web vitals are google updates for improved site speed and better user experience.
Core web vitals assessment is a major google update to enhance the user experience by evaluating website page speed based on user experience and website responsiveness.
According to google, there are three core web vitals needed for optimum page speed and performance.
It considers mainly three metrics to measure a site’s speed and user experience.
- Largest contentful paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift
Let’s break them down.
Largest Contentful Paint (LCP)
It is a page load metric used to identify page load speed for better user experience by calculating the loading speed of the largest contentful module or element on a website’s page.
First Input Delay (FID)
This is calculated based on user interaction with the website for the first time, i.e. the first time a user clicks on a website’s element such as a button or link to view and how much time the browser takes to respond to the user move.
Cumulative Layout Shift
It refers to the shifting of the elements of a website after loading, calculating the cumulative time all the shifting elements took within 500ms of the user interaction with the website.
If your website passes all the three above-mentioned measures, then your website is considered to pass the core web vitals assessment.
You can check your website score for core web vitals here.
But what if you couldn’t pass the assessment?.
That’s what we want to focus on in this post and I’m giving you the best tools to fix the problems.
A website has common errors and development issues that you need to check and update consistently to meet the core web vitals assessment.
So let’s look at some of the best recommendations on how to improve your website’s speed.
1. Change Your Web Hosting
Apart from optimizing your wordpress site, there is another thing that you need to do at the same time, ensure that you have a reliable wordpress hosting company. Each site needs a good web host, and choosing the right hosting provider is one of the most crucial aspects. Some of the best managed wordpress hosting companies that are trusted by webmasters are:
Any of the above are highly recommended for wordpress sites, but if your website is receiving high amounts of traffic then go for kinsta.
2. Use cache plugins
Are you facing a slow speed loading issue on your website?. Would you like to speed up your website and perform better user experience, better quality services?.
More than 70% of your visitors expect website loading speed to be less than 4 seconds. So that’s where cache plugins play a vital role to boost your website speed and performance.
So how do they work?.
Cache plugins can keep away many unnecessary steps each time your website is loading, it also boosts your website speed by creating static files on disk. Whenever any user visits your website, this plugin places a lighter version of files instead of heavy PHP scripts and instantly loads your website.
List of recommended cache plugins:
3. Remove unused CSS
Consider reducing, or switching the number of wordpress plugins loading unused CSS in your page. To identify plugins that are adding extraneous CSS, try running code coverage in chrome devtools. You can identify the theme/plugin responsible from the URL of the stylesheet. Look out for plugins that have many stylesheets in the list which have a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page.
5. Eliminate render-blocking resources
There are a number of wordpress plugins that can help you inline critical assets or defer less important resources. Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.
Best Plugins for inlining or deferring critical CSS:
- WpOptimize – Clean, Compress, and Cache
- Site Kit by Google – Analytics, Search Console, AdSense, Speed
6. Properly size images
Upload images directly through the media library to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used. Avoid using `full size` images unless the dimensions are adequate for their usage.
7. Minimize HTTP Requests
8. Remove Spam Comments
Having some comments on each of your article is undoubtedly a good thing, but keeping thousands of spam comments in your database is definitely a different story. You have to regularly delete spam comments from your website; otherwise they will slow down the speed of your webpages dramatically. To remove them, just click empty spam button in the comments section from your wordpress dashboard.
9. Optimize Images
This step is important, but often been overlooked. You have to upload images with the correct formats and appropriate sizes. For instance, the 8-bit PNG is preferred for a simple and limited-color screenshot, and the 24-bit JPG is preferred for a color-rich photographs. Sometimes, you may really need pictures which contain a ton of extraneous metadata thus drastically increase the sizes of the image files. At this time, you have to compress and resize them before uploading them to your site.
With free tools like Tiny PNG, and image optimizer at your disposal, you can optimize images easily.
10. Pay Attention To Your WordPress Plugins
Using too many plugins can create great burden to your websites, and slows down the speed. Thus, one of the easiest ways to make wordpress perform better is to deactivate and delete some plugins which are not necessary or don’t add much value to your sites, and only retain the plugins you need, not the ones you may want.
11. Use CDN
It copies your content in multiple servers which are strategically located around the global, so once people visit your sites, the desired contents will be delivered from the nearby serve, which increases the speed to a large extent.
While there are so many CDN providers available, I have listed the best ones, and I highly recommend the following:
- CDN Sun
They have the most budget friendly prices and easy-to-use dashboards.
11. Use of Lazy load images
Lazy load images are one of the best techniques that improve page speed. Lazy load images get load with the scroll of the user. Lazy images are not necessary to be displayed on the first fold of the screen. Get the A3 lazy load plugin.
12. Use fast loading themes
Looking for themes that are fast and easy to use?. I highly recommend astra and generatepress for you. These themes loads few scripts and uses light CSS, this helps limit server overloads and reduces cache files. I did a couple of speed testing for some themes so I suggest you look into it further by reading the article below.
13. Avoid Changing Themes
Many of the wordpress themes contains heavy scripts and CSS, changing your themes continuously can overwrite existing PHP scripts and CSS which may cause your site to slow down and affect page loading speed. Make sure to use only one theme, Astra pro is the best choice. Get the lifetime package with all the features and benefits included.
Other possible recommendations
- Make use of AMP pages for fast loading.
- Serve images in next-gen formats — Image formats — JPEG2000, JPEG XR, WEBP.
- Reduce initial server response time.
- Buttons should have an accessible name.
- Image elements must have `[alt]` attributes.
- Form elements should have associated labels.
- Display images shouldn’t be of inappropriate size.
- Check if any browser errors are logged to the console.
Note: These suggestions can help your page load faster but they don’t directly affect the performance score of your website.
All these are recommendations for improving your site speed, the only thing you should bear in mind is that, page speed doesn’t however affect SEO in anyway, it helps to improves user experience.