For me, the “2. local file system caching” is the solution.
I just don’t know how to get this implemented on my server
Hi Christian,
I just browsed your website and noticed the link tags for the stylesheets are incorrect.
Currently this is on the website - <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" as="style" onload="null;this.rel='stylesheet'">
I’m not sure how much this will improve the performance but it’s worth a try. The correct syntax for preloading the stylesheets is:
<link rel="preload" as="style" href="/bootstrap/5/css/bootstrap.min.css" onload="null;this.rel='stylesheet'">
I would also look at leaving this out and let it load normally (with defer attribute) <link rel="preload" as="script" href="/dmxAppConnect/dmxRouting/dmxRouting.js">
It’s Brian, common mistake
2 Likes
Thank you for the information, I will implement it
Anyone wants to build a Wappler extension for this?
Edit: Here’s how:
But have you actually looked at your pagespeed insight details for this exact page: mehr/ueber-uns?
All it complains about is the Large Layout Shifts and Largest Contentful Paint …
Large layout shift “issues” are the following elements:
<div class="col-12" id="Intro">
and
<footer class="bg-light-grow-1">
While the Largest Contentful Paint element “issue” is the:
<div class="col-12" id="Intro">
again.
I see some weird stuff on your page. For example you have some elements using show/hide which briefly flash on page load because of the expressions used - this shifts the layout:
<div class="mb-3 col-12" id="OutroTitel" dmx-hide="!getPage.data.queryGetPage.PageOutroTitel">
<h1 dmx-text="getPage.data.queryGetPage.PageOutroTitel" class="section-title">OutroTitel</h1>
</div>
<div class="col-12 mb-5" id="Outro" dmx-hide="!getPage.data.queryGetPage.PageOutro">
<p dmx-html="getPage.data.queryGetPage.PageOutro">Outro</p>
</div>
what are these? are they needed there?
It’s better to wrap them in conditional region instead of using dmx-hide.
I also see a lot of modals placed in the footer, take them out of the footer and include them after the <footer> element.
Another thing - what are these inline styles? Why have you added so many inline styles to the text?
So … before even discussing any kind of caching there are a lot of good practices to be integrated on your pages first.
1 Like
Also - why have you edited the includes App connect inserts on your page?
You should not edit these - i see you moved the AppConnect.js include down the page and added defer to it. This should not be done. The App Connect js include should be used as it is added on the page and where it is added on the page. No defer is added it to it, so you should not add it also.
Thank you very much Teodor,
I implemented it immediately.
I’m working on everything else now
they were inserted by Medium Editor
I changed it
How can I change this?
There’s nothing much you can do about this.
You insert long dynamic text that “shifts” the layout when the page loads. So the intro div, for example, changes its height from 0px to almost 900px when the data is loaded. This is why the Large Layout Shifts score is lower.
What are these errors?
What do you see when you check using Rich Text:
https://search.google.com/test/rich-results
Click Test and let the test run, on the results page click View Tested Page, and select Screen Shot.
Another thought is you mention Wordpress. It is possible it made changes to your .htaccess file which may be causing these issues if they were not removed when moving away from Wordpress to Wappler… The same for robots.txt. Maybe have a look at both files to confirm they have no custom Wordpress specific garbage in them?
I think everything is good here.
Before installing the new site, I cleaned the folder.
My Robot.txt:
User agent: Googlebot
Disallow: /nogooglebot/
Disallow: /web-admin/User agent:
Allow: /
Couldn’t a cache solution help exactly here?
Instead: load the layout and then the query-content
Do: Load the cached page (HTML with rendered query-content)
This is called server side rendering.
1 Like
Large layout shifts are nothing to do with server rendering.
They result primarily from having dynamic elements such as images and iframes with no height/width set.
If using dynamic images either code the dimensions or use a placeholders image ro save the DOM having to rerender the page as new data is loaded.
Set fixed sizes for iframes loading external content.
That way the placeholders are rendering in order and there is no need for the browser to rerender the page to accommodate the new content Placeholders are really effective to deal with layout shifts.
1 Like
