Need help with SEO optimization

Wappler General Need Help
1

I would like to get at least 98% on my new site.
Unfortunately, I can’t get any further with some of the things Lighthouse complains about.

I hope you can continue helping me there.

  1. Eliminate render-blocking resources
    :+1: I solved it by adding rel=“preload” and defer to the complained about.

:pensive: I can’t get any further here
2. Preload Largest Contentful Paint image

I would like to preload the first slider image here.
But I load the images dynamically.
How do I do that?

  1. Avoid large layout shifts
  2. Reduce unused CSS
  3. Largest Contentful Paint element
  4. Serve static assets with an efficient cache policy
  5. Does not use passive listeners to improve scrolling performance
  6. Avoid non-composited animations
  7. Avoid an excessive DOM size

I am very grateful for your help

1
13836×2160 2.29 MB

2
23860×2160 2.27 MB

The biggest problem lies in the CLS

3
33840×2160 2.33 MB

1 Like
2

Taking one point at a time to save my aging sanity.

Preload dmxAppConnect as you have done, but delete the defer as in <link rel="preload" as="script" href="/dmxAppConnect/dmxAppConnect.js">

Then add an extra line to link to dmxAppConnect as in <script src="/dmxAppConnect/dmxAppConnect.js"></script>

This is what mine looks like:

  <link rel="preload" as="script" href="/dmxAppConnect/dmxAppConnect.js">
  <link rel="preload" as="style" href="/bootstrap/5/css/bootstrap.min.css" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/dmxAppConnect/dmxLightbox/dmxLightbox.css" onload="this.onload=null;this.rel='stylesheet'">

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxLightbox/dmxLightbox.js" defer></script>
  <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
  <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
  <script src="/dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js" defer></script>
  <script src="/dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer></script>
3

I do not see the problem of the Largest Paint image on the page that you have shown. Usually Lighthouse will tell you the name of the problem image in which case all you have to do is to pre-load it as in <link rel="preload" fetchpriority="high" as="image" href="/assets/images/original/thumbs/1.jpg" type="image/jpg">

5

Done and it works

6

Layout shifts are usually caused by images that do not have the width and height specified. I do not see that problem in the page.

What I do see is the is the likes of
<p dmx-html="scGetpage.data.queryGetPage.PageIntro">A nice paragraph</p>

The problem here is that the rendering engine cannot presume how much space to allow for content that comes from the server via JavaScript. The page shift comes when that content is available.

You may consider server side rendering instead. This will most certainly improve SEO.

1 Like
7

But I have to load the image dynamically. I want to load the first image from the slideshow here

This is how I load the slideshow.
How do I get the first image into the preload?
dmx-bind:slides="scGetpage.data.queryGetBanner" slide-url="'/assets/images/'+var_banner_size.value+'/'+image" dmx-bind:width="var_banner_width.value" dmx-bind:height="var_banner_height.value" slide-title="imageTitel" slide-description="imageDescription"

8

Preloading an image will not affect the slideshow. It merely loads it into the browsers memory in readiness for rendering.

There may be a need to preload a number of images in order to satisfy Lighthouse.

9

Sorry, it is approaching midnight in Aus. This is the last reply for tonight.

But before leaving you, there is not much you can do about the reduction of CSS. There are programs available to do this. I have never worried about it.

1 Like
10

Just noticed:

image
image710×308 27 KB

In this case you would have

<link rel="preload" fetchpriority="high" as="image" ref="/assets/images/1200x484/bogenschiessen.webp" type="image/webp">

Great to see WEBP being used. Only the width and height has be expressed in absolute values like width: 1200; height: 484 This is so that the width and height are known to determine the aspect ratio.

1 Like
11

Hi @EinfachChris, I have quickly gone through the page at https://relaunche.cg-events.de/betriebsausflug and found a couple of observations that may hinder SEO

  1. There are three instances of duplicate ID’s. These can be seen when using Wappler.
  2. The page is rendering three hidden Modals before it starts rendering the visible part.
12

Can I change this so that the modals are loaded last?

13

I changed it, it should fit better now

14

Drag the modals to below the Footer

image
image354×596 13.3 KB

It should look like

image
image354×579 12.5 KB

15

Thanks for that!
done :+1:

16

Something doesn’t seem to be working with the preload.
Or should it be like this?

4
43860×2160 3.17 MB

17

image
image1519×45 44.8 KB

This should read as="style", it is not a script.

Normally, scripts are not preloaded (with the exception of those scripts that are required immediately), they should be deferred if in the <head> section. Otherwise they can be placed at the bottom of the document.

1 Like
18

Thank you, I changed it

1 Like
19

What can i do about “Avoid large layout shifts” ?