High server response time (>1 sec) when using amp

  • Resolved hartv

    (@hartv)


    3 years, 3 months ago

    Hi all,
    I’m running a small blog and some time ago I noticed that I’m getting a bad rating at core web vitals in search console for all pages on mobile. There is a way to high server response time when opening amp pages. Normal pages can be viewed without much waiting time.

    Here’s my site health report: 2021-11-23-sitehealth.txt

    As can be seen in site health report, I’m using the folowing plugins:
    – AMP
    – Cache Enabler
    – Contact Form 7
    – Disable Emojis (GDPR friendly)
    – Disable Google Fonts
    – Easy FancyBox – surpressed in AMP
    – Gutenberg
    – Honeypot for Contact Form 7
    – Polylang
    – The SEO Framework

    The timing problem can be seen in browser or in various online site check tools, here are two screenshots:
    With Amp and Without Amp

    There is something called “amp_sanitizer” and “amp_style_sanitizer”, i’ve tried to search for these but I could not find anything useful for my problem here.

    My webhoster is located in Germany (Strato), I try to not to use too much bloaty things but to be honest I don’t understand much about hosting, php or even sql. Just have some very basic skills. My webhosters support is not of any help, the support is completely lost and a good reason to switch to another company if that would solve the issue. They can’t even tell that I’m running wordpress

    On my webhost configuration, I switched from PHP 7 to 8, turned “Php boost” on and off, that had no positive effect.

    I’m using CacheEnabler plugin for caching, already turned it on or off and changed it for wp-optimize cache, without any effect. I also cleaned the database with wp-optimzie and tried the wp-omptimize cache, without any positive effects.

    I disabled various plugins and noted that disabling a simple gutenberg block plugin for faq schema pages acutally improoved the page load time by a few hundred miliseconds.

    The page is using twenty nineteen theme and there is a lot of custom CSS in customizer to modify it the way I wanted it to look like. I removed all custom CSS but that also doesn’t seem to be the problem.

    Any help is very appreciated.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @hartv,

    Thanks for getting in contact with us, and writing a super rich description about your problem, it will help us a lot.

    Thinking About AMP vs. non-AMP, first AMP is running on the top of a normal version, everything that is added in a normal version to process the content will affect the processing over AMP, but we use cache to improve this time. It means some items, such as Object cache and AMP cache related.

    We will recommend checking overall site performance using plugins such as query Monitor and improve non-AMP performance. It will eventually also boost AMP scores

    Please make sure that your site does not have dynamic elements or dynamics styling, in which case, AMP needs to optimize CSS for each request.

    If you think AMP could be causing an issue please login as administrator and add ‘?amp_verbose_server_timing=1’ and share the server timing with us.

    Some extra information

    “Amp_sanitizer” will improve the HTML for your AMP pages, and “amp_style_sanitizer” will reduce your CSS, with tree-shaking. Those extra work will improve your front-end resources. That can be checked when you test your website in a slow connection:

    https://gtmetrix.com/compare/GVie9Fvo/IA9gysZO

    Related to Cache plugins, WP Rocket is fully compatible with AMP, you can have look here: https://amp-wp.org/ecosystem/plugins/

    Thread Starter hartv

    (@hartv)

    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

    Hi @hartv,

    Thanks for getting back, regarding the dynamic styling, it could be generated by plugins, that change the id and class of elements to improve the CSS, but it increases the processing time for AMP. Could you change the settings panel from Cache enabler.

    I saw it has a CSS minification options if you can test AMP with that option disabled to see if it has some improvement.

    Once you are able to test it let me know.

    Thread Starter hartv

    (@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 @hartv,

    Parsing of CSS(amp_style_sanitizer) with PHP can be very slow, but the improvements on the front-end with tree-shaking will balance it, and the plugin do it once and storage in a cache, but some plugins can disable it or make the process repeats every single time if the minification is changing the IDs or classes. It creates the impression that you are adding new CSS to your website. I hope that is adding more information about the process, and also you can check your documentation at link below:

    https://amp-wp.org/documentation/how-the-plugin-works/amp-and-css/

    Related to the logged processing time: Usually, some caches are turned off for logged users to be able to see the changes straight away.

    It was a pleasure to help you, if you have any questions feel free to open a ticket.

    Plugin Author Weston Ruter

    (@westonruter)

    (I haven’t read this whole thread, so apologies if this was already covered.)

    When the plugin first encounters unique CSS, it causes the PHP-CSS-Parser to be invoked which causes significant latency. To prevent the latency in subsequent requests, the parsed CSS is cached in a transient. If there there is CSS with randomly-generated code (e.g. class names), then this will cause a cache miss with every request. When a persistent object cache is not active, then we monitor for this scenario and turn off parsed CSS caching since it can result in the wp_options table filling up with transients. We expose this as a Site Health test with a button to restore parsed CSS caching.

    So yeah, ensuring that your CSS doesn’t have random content (or random URLs/filenames) will ensure that cache hits will occur and the CSS parsing latency will be avoided.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘High server response time (>1 sec) when using amp’ is closed to new replies.