[Support request] Performance issues

[troyw]

Hey guys,
Please response #1489399 from Tom.

I am having some serious performance issues with this website, which is very unusual for a Generatepress website. I have built many and never had this kind of issue.
Using ‘Web Dev’ my Performance is really bad. As recommend by Tom, I have squeezed the Home Page images as much as they can be compressed and they are within what I would usually consider to be well optimized.

Here is the Web Dev Report;

High
Performance
Eliminate render-blocking resources
Eliminate render-blocking resources
High
Performance
Reduce initial server response time
Reduce initial server response time
High
Performance
Avoid multiple page redirects
Avoid multiple page redirects
High
Performance
Preload key requests
Preload key requests
Medium
Performance
Serve images in next-gen formats
Serve images in next-gen formats
Medium
Best Practices
Does not use HTTPS
Does not use HTTPS
Medium
Best Practices
Includes front-end JavaScript libraries with known security vulnerabilities
Includes front-end JavaScript libraries with known security vulnerabilities

Tom sent me this link but the article does not tell me where to find these setting in GP? https://docs.generatepress.com/article/configuring-autoptimize/

I have tried LiteSpeed Cache which does help, but of course Litespeed cache also has its own inherent issues. So I would rather not use Litespeed if possible.

I built this website to be very light-weight, but the results seem to suggest otherwise and I can’t figure out why.

Based upon the results above, please can you shed some light on what might be causing these issues?

Many thanks

[Leo]

Hi there,

Looks like the issue has been resolved in this topic:
https://generatepress.com/forums/topic/menu-has-broken-since-update/#post-1489563

Please allow us enough time to answer. Thanks!

[troyw]

Sorry Leo,

I was rather hoping I could get some suggestions as to why this site is not performing at all well. I would rather avoid using a Caching plugin at all and usually I can GP belting along without the need for a caching plugin. For some strange reason however, this website is not behaving as it should?
Cheers

[David]

Hi there,

can you provide me a link to the site ?

[troyw]

Thanks David

[David]

Quick GT Metrix report from a Sidney server.
First off the initial request is taking over 1 second ( this almost doubles when tested from Canada ). Thats something you need to ask your host about.

Fonts – the site makes 6 google font requests.
If you can reduce the number of font families or variants (weights) being loaded that will help.
You can deselect any font weight you’re not using:
https://docs.generatepress.com/article/google-font-variants/

Theme Icons – change the Customizer > General > Icon Type to SVG. This won’t make any noticeable difference but will eliminate loading the GP icon font.

And then Google Maps …. if you can avoid loading google maps then i suggest you do so – it makes numerous requests and is pretty darn slow at doing so.

[troyw]

Thanks David. I did the fonts and the SVG setting and it has improved things. Do you know of any better alternatives to the Google Maps other than just an image? Is the Google API any better?
Cheers

[Elvin]

The problem w/ any interactive map plugins is it loads a lot of things.

Regardless of what you use, you’ll probably get a performance hit.

But for the sake of getting better page scores while keeping the functions, devs usually apply a workaround where they don’t load the scripts when the page loads. It is only loaded when the user interacts on it.

Now this can be different things. It can be a button, or a modal, or an image placeholder of the map with an eventlistener where it loads the map scripts when clicked or hovered.

And this applies to other embedded things as well like Youtube videos.

[troyw]

Hey Elvin,
So I guess what you are suggesting is that I could simply use a Map image, but when it is clicked, it takes the user to Google Maps instead? Is that correct?

[Elvin]

So I guess what you are suggesting is that I could simply use a Map image, but when it is clicked, it takes the user to Google Maps instead? Is that correct?

Yes exactly that.

Here’s an example site of it in action.(with embedded YouTube videos) – Demo Site

As you can see on the page’s second section (YouTube video), there seems to be a YouTube embedded already. But if you inspect the page, it’s just an image placeholder w/ an animated button that serves as the trigger.

It only calls or embeds YouTube’s script when clicked, rather than loading it immediately.

Here’s its pagespeed results: – Demo PageSpeed Insight results

You can do this w/ maps too.

[troyw]

Done. That has improved things again, thanks. Using the image widget, how do I force the link to open in a new tab or new window. I can do this with HTML of course, but can I do this with just the link?

[Elvin]

Place it inside an anchor tag w/ target="_blank".

Or if you’re keen on JS you can use this: – https://www.geeksforgeeks.org/how-to-open-url-in-new-tab-using-javascript/

If it’s not a button, use an eventListener. –
Example:

document.getElementById("elementID").addEventListener("click", function() {
  //do code here. Example:  window.open( "https://www.generatepress.com", "_blank"); 
});

[troyw]

Hey Elvin,
How do i place an anchor tag within the Image Widget though? It only accepts a URL. I know how to use html to do this, but in the absence of a field I can add HTML to in this widget, I’m not sure how I can add target="_blank".

[Elvin]

You should see a “Edit Image” button for that widget.

A popup window should open labeled ” Image details”.

You should see an Advanced option dropdown. Expand it and check “Open in new tab”.

Reference: https://wordpress.com/support/widgets/image-widget/#:~:text=To%20link%20the%20image%20to,custom%20URL%20will%20be%20added.

[Author]

Posts