hartv

Hey @fellyph

I was able to solve the problem.

I still don’t fully understand the reason why and when amp_sanitizer and amp_style_sanitizer begin to take 500 ms, I changed some plugins, suddenly it works and then again it does takes more time.

Response Time rises when opening the page while being logged in, I think the top admin bar somehow causes an issue here. It can be clearly measured that response time is lower when using a private browser tab.

But: CSS minification is/was the solution.

I did some more testing and tried adding Autoptimizer for using with CacheEnabler (this is the way css minification is intended with Cache Enabler according to some blogs in the net) but some options for CSS minimizing are only for premium users there.

Finally I used the “W3 Total Cache” plugin which offers caching and CSS minify, I was able to solve most of Googles PageSpeed Insights recommendations by using that plugin, and regular and AMP pages are much faster now.

That particular “Waiting time” shown in Firefox, which included amp_sanitizer and amp_style_sanitizer, is now reduced from over 1,5 s to just 47 ms with my local internet connection here.

So, thank you very much for your support!

Hi @fellyph

thanks for your detailed reply, this is very helpful to understand at least a tiny bit of how things work in detail.

First of all, here’s the server timing: screenshot-servertiming-full.png

There is about 500 ms on amp_sanitizer, amp_style_sanitizer and amp_parse_css.

I set up a fresh wordpress installation on another domain to make tests there. After installing exactly the same plugins, using the same theme (twenty nineteen), copying the custom CSS code and copying the sample page which I also linked here as the page I need help with I got way better timings on the test installation: screenshot-servertiming-xyztestsite.png

However, after Installing the Query Monitor plugin, server response time was extreme: screenshot-servertiming-withqm.png

The test installation seems to take no time with amp_parse_css, with or without the query monitor plugin, while the main install has 500 ms there.

Regarding dynamic elements or dynamics styling: I don’t know exactly how these work, I did not put a single line of javascript anywhere, I just use the Custom CSS thing in customizer, using @media only screen and (max-width: 768px) … for smaller views.

There are just some historical differences between both installations: the main WordPress installation is from early 2019, I changed the theme multiple times in the early days (even used elementor) and the whole installation got a lot of updates in those two years. There is still “classic” footer widgets in use, I have not recreated the footer widgets with the block editor yet. Using classic widgets in test side did not make any negative effect. And, of cause, the main installation has way more pages, sites and comments in database.

Is this of any help to further investigate the problem?

best regards and thanks a lot

• This reply was modified 3 years, 3 months ago by hartv. Reason: fixed link

Yes, I’m still experimenting a bit.

Your solution works by the way. Thank you a lot for your help.

Sure. I basically wanted to change all first-letter-colors of the whole navigation menue on top using the custom CSS option. The html of the navigation looks something like this:

<nav id="site-navigation" class="main-navigation" aria-label="Top Menu">
<div class="menu-primary-en-container">
<ul ... class="main-menu">
<li ... class="menu-item ..."><a href=...>Main 1</a></li>
<li ... class="menu-item ..."><a href=...>Main 2</a></li>
<li ... class="menu-item ..."><a href=... ...>Submenue</a> <button ...>
<ul class="sub-menu">
	<li ... ><button...></li>
	<li ... class="menu-item ..."><a href=...>Sub 1</a></li>
	<li ... class="menu-item ..."><a href=...>Sub 2</a></li>
	<li ... class="menu-item ..."><a href=...>Sub 3</a></li>
</ul>

So I tried to change the first-letter colors of those elements with CSS. If I use something like

.menu-item li:first-letter {
	color: #ea4023;
}

It only affects the text Submenue and Sub 1, Sub 2, Sub 3 but not Main 1 and Main 2. I also tried various other classes like .main-menu but results are always the same. It is easy to modify this on previous, official wordpress themes but this time I’m stuck.

I was unable to find a solution for now, so in case of someone finds this thread: It is a Gutenberg issue as Gutenberg puts the links to the large files when adding the gallery.

I set the large file resolution to a value above the already resized pictures, ran some thumbnail regen plugin and added the gallery again, this workaround did the job so far.

Thank you for this constructive feedback. I’ve considered this and changed the words and rating of my review in a way which I hope satisfies both of us. I know that such comments and ratings can be frustrating and demotivating.

I now understand you as developer, but as end-user there is still a different view. If I need to modify every plugin with writing code, it is a huge effort and there are tons of free plugins which are easier to integrate as end-user. I’ll try to communicate this in a more respectful manner and less demotivating way next time.

My profile is brand new here, this is right. On the other hand, there are some towns mapped from scratch on OSM, lots of fixes and I’m also active in a regional organization for building free wifi in our city, writing funding applications, managing our wp-site there and doing end-user support. This is where all the efforts also get commented with “that sh** isnt working”. So please do not judge my contributions to open communities by one profile as this isn’t fair.

I’m very sorry if you took this personal and did not want to criticize your efforts, but free is not the only aspect I was considering here. I just wanted it to be more smooth integrated into the whole site. The lack of customization, even basic things, can make the whole site make look like some kind of “unbalanced design”, which was the missing part here. Most of the plugins I’m using are easy to customize, at least have some basic options, to make the integration more user and end-user friendly.

Please do not attack people like this after getting such a rating (it is just a rating and no unfair allegations), I have to say, it’s discussions like this that stop people from contributing to open source projects and communities.

There are awesome parts in your plugin too like those nicely smooth jquery-stuff but if the rest of the page is more basic, this doesn’t look much “integrated”. That integrated look and feel may be important (at least for me it is very much) and led me to a 3 star rating.

I hope you accept the detailed explains and rating here, which is not meant to be personal or disrespectful in any way.