DEV Community

Cover image for How We Do WordPress Website Speed Optimization: Achieve Scores 100 Desktop, 97 Mobile on Google PageSpeed Insights (No Plugins)
Vipin Agarwal
Vipin Agarwal

Posted on • Originally published at startdesigns.com

How We Do WordPress Website Speed Optimization: Achieve Scores 100 Desktop, 97 Mobile on Google PageSpeed Insights (No Plugins)

We employ proven strategies to optimize the loading speed of our clients’ WordPress websites, without the need for a single plugin, and we draw insights from our clients’ successes.

As Google makes website speed a major factor in ranking, entrepreneurs and website owners start focusing on optimizing website speed so that they get high rank in SERPs. So one of our clients also approached us to optimize his website speed, which was very poor at the time.

We started by studying his website. After some research and study, our team of expert web designers, developers, and marketers came up with a plan to improve the website’s loading speed.

We write down the changes, updates, and optimizations we are going to make, as well as some changes that we did not discuss before to improve loading page speed.

Without taking more time, here is the process we follow to achieve 99 desktop scores and 97 mobile scores on Google PageSpeed Insights. Check report here: GL Google PageSpeed Insights Report

Image description

Processes We Followed and Tricks We Used to Optimize Website Loading Speed

1 Pick a Spee­dy and Dependable Hosting Provide­r

Starting off, we changed to a differe­nt hosting provider than previously used by client. Quick loading is ke­y for any website, so a solid hosting serve­r is a must. Think about going with a reputable provider. WP Engine­, CloudWays, SiteGround, or Bluehost are options.

We­ opted for WP Engine for our customer. A manage­d WordPress hosting could be the answe­r for peak performance.

Discuss Your Web Redesign Project Free Today!

2 Use a Lightweight Theme

The second important step is to choose a lightweight theme, customize the theme completely, or start building a custom website. We suggest you choose the theme even if you want custom website design because themes come with basic configuration files, so you don’t need to create basic settings and configuration files.

We chose the Astra because it’s very light, and we customized it completely with custom elements as per our client’s requirements.

3 Optimize Images

We’re shrinking all pictures, but not the­ir quality. Compress­ your images using tools like TinyPNG before­ they go on your site. Pick the right format for your picture­s (JPEG for snapshots, PNG for colorful graphics), and remember to think about using we­bp format.

4 Minimize HTTP Requests

We optimize HTTP requests by merging files, using CSS sprites, and minimizing files.

Combine CSS and JavaScript files.
Use tools like Autoptimize to minify and combine files.

5 Use a Content Delivery Network (CDN)

Implement a CDN, such as Cloudflare or MaxCDN, to serve static content from servers closer to your users’ locations.

6 Use Async or Await

If there are e­lements that you want to load first and close, don’t forget the use of async and look forward to it. The­se functions prioritize what masses first by way of letting you highlight the­ crucial parts, along with the primary content. When you operate­ async and anticipate to wrap these esse­ntial elements’ loading proce­ss, you may make sure they will appe­ar earlier than something else­.

7 Load scripts after complete page loaded

We suggest you don’t load too many scripts on the first try. Our client’s website uses script-generated animation in the hero section; we use images to first show the effect and load the script after the complete page is loaded.

8 Don’t load sliders or any animation on the first page load

The client website has a slider section; we load it as a simple section at first, and after the entire page is loaded, we activate it with the help of some scripts.

9 Reduce the shifting of elements to keep CLS under control

We reduce the shifting of the HTML elements; for example, if a section height is 100 pixels in theme CSS and you want it to be 60 pixels, then you should load the first your custom CSS before the theme CSS files. This keeps CLS under control.

10 Use loaders

We use loaders for images and graphics, so the loader first loads, and the image appears after it. When you use loaders for search engines do not count them as graphics, this keeps the LCP low.

11 Reduce Redirects

Minimize the use of redirects, as they create additional HTTP requests and delay page load times.

12 Use a Fast and Secure DNS Provider

To reduce DNS lookup times, choose a fast DNS provider.

These are some of the techniques we used to achieve similar results for our client website, Goodman Lantern.

You can verify the page speed yourself and have faith in our efforts. If you also want to optimize your website’s loading speed, contact us today. Our team of expert web designers and developers will 100 percent help you.

Article originally posted on https://www.startdesigns.com/blog/wordpress-website-speed-optimization-no-plugins-used/

Top comments (0)