[Support request] My page speed is low, How do i fix it

[Obinna]

Hi guys, I recently statrted using generatepress for my blog. iteegeek and my pages are loading very slow. The site speed on google speed test website is around 40 and sometimes less for mobile applications. Please is there any way it can be increased. I have optimized my css codes and all but i still get low figures. I thought generate press was the fastest theme as seen everywhere on the internet. here is a result to the google speed test site https://pagespeed.web.dev/report?url=https%3A%2F%2Fiteegeek.com%2F

[Fernando]

Hi Obinna,

You have performance detrimental functionalities active in some plugins. I would first recommend to use a CDN so that JS and CSS from these plugins are delivered quicker.

CDNs are meant to allow resources to travel shorter in a geographical sense.

We’ve had one customer saying she used this and it helped: https://restorebin.com/free-cdn-css-js/

With WP Rocket, here’s an article which may assist you: https://kinsta.com/blog/eliminate-render-blocking-javascript-css/#how-to-eliminate-renderblocking-resources-with-wp-rocket

Hope this helps!

[Obinna]

Thanks for your suggestion @Fernando but the solutions still did not work. I installed the CDN plugin and still having same issue. Its becoming frustrating.

[David]

Hi there,

there is quite a lot of work to be done here. I can provide some pointers:

1. Google Fonts – Google doesn’t ever flag these as an issue – but they should be loaded locally:

https://docs.generatepress.com/article/adding-local-fonts/

Now looking at the other issues listed on a Google PSI Test:

2. Reduce unused JavaScript
All the scripts listed are related to Google Ads – use a plugin like WP Flying Scripts to defer the loading of those scripts. So they load AFTER your page has loaded.

3. LCP Picture is being lazy loaded, you should look at excluding the Featured image from lazy loading. See #4 on my reply here:

https://generatepress.com/forums/search/first-featured/

4. Reduce Server Response time
This can be improved with Page Caching on your server, if the host doesn’t provide it, then use a plugin.

5. Reduce unused CSS
Dashicons are being loaded on the Front End, i am not sure why, looks like Jetpack is loading them – at least they are coming from Jetpacks servers.

6. Reduce the impact of third-party code ( & Minimize main-thread work & Reduce JavaScript execution time )
Again mostly Google Advert scripts are an issue here, see point 2 above.

7. Avoid enormous network payloads
All those 3rd party scripts are a big issue, but in addition to this you’re loading font icons…. and they’re are lots of them – 11 files in total. All of which are being loaded by the Zoom Social Icons plugin. You may want to ask them why, or use a different plugin.

To give you a better idea of what is going on in your site see here:

https://www.webpagetest.org/result/220707_BiDcDE_5DQ/1/details/#waterfall_view_step1

you can see those red bars at the top of the waterfall? They’re all those icon fonts being loaded.
It will also give you an insight to the impact those 3rd party scripts are causing.

[Obinna]

I already added local fonts. But thanks @David, I will go through the list of other options and get in touch.

[David]

Ok – i see Roboto and Google Sans being loaded from fonts.google – but they look to be coming from the Adverts on the page.
Glad to be of help

[Obinna]

Hi @David, When i used a Flying script and to disable img, script and noscript HTML tags on the site it shows 100% score on Google speed test and also on GTmatrix test. wow! but then, i need the images and the google as they serve their purposes

[David]

The images – you simply want to STOP lazy loading the first image.
To do that:

1. Add this PHP Snippet to your site:

function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

This will add the first-featured-image class to the single post featured images, and the first post in your blog.

2. What Lazy Loading plugin are you using? As in its settings, there will be an option to Exclude images from lazy loading with a specific class…. you can add the first-featured-image

[Obinna]

Am i to add the code in the functions.php file? also i use wp rocket and it has got the lazyloading option which is checked on, but still the site is slow after implementing the function you sent. pheeew!

[David]

This doc explains how to add PHP:

https://docs.generatepress.com/article/adding-php/

TLDR:
Are you using a Child Theme?
If Yes, then you add the code to your Child Themes functions.php
If No, then you add the code using the Code Snippets plugin.

Once that code is added – you go to this panel in WP Rocket:

https://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images

In the field provided add: first-featured-image

[Author]

Posts