-
Notifications
You must be signed in to change notification settings - Fork 385
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduced Page speed with AMP Version 2.1 #6182
Comments
I can see a difference in the PageSpeed Insights measurements: However, when I use the local PageSpeed audit, I get the exact same scores for both pages: My first hunch then would be that this might be a server/network issue of the development machine. Here's a cleaned-up diff of the 2c2
< <html lang="en" amp="" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1">
---
> <html lang="en" amp="" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1" i-amphtml-binding>
5a6,8
> <meta name="viewport" content="width=device-width,maximum-scale=5.0,user-scalable=no">
> <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload">
> <link rel="preconnect" href="https://cdn.ampproject.org">
583d585
< <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=5.0,user-scalable=no">
597c599
< <meta name="generator" content="AMP Plugin v2.0.11; mode=standard">
---
> <meta name="generator" content="AMP Plugin v2.1.0; mode=standard">
599,606c601,610
< <title>Oyo Coupons Code & Offers, Get 95% Off On Hotels May 2021</title>
< <link rel="preconnect" href="https://cdn.ampproject.org">
< <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
< <script async="" src="https://cdn.ampproject.org/v0.js"></script>
< <script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async="" custom-element="amp-bind"></script>
< <script src="https://cdn.ampproject.org/v0/amp-form-0.1.js" async="" custom-element="amp-form"></script>
< <script src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async="" custom-element="amp-list"></script>
< <script src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async="" custom-template="amp-mustache"></script>
---
> <script async="" src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
> <script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script>
> <script src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" async="" custom-element="amp-bind" type="module" crossorigin="anonymous"></script>
> <script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script>
> <script src="https://cdn.ampproject.org/v0/amp-form-0.1.mjs" async="" custom-element="amp-form" type="module" crossorigin="anonymous"></script>
> <script async nomodule src="https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous" custom-element="amp-form"></script>
> <script src="https://cdn.ampproject.org/v0/amp-list-0.1.mjs" async="" custom-element="amp-list" type="module" crossorigin="anonymous"></script>
> <script async nomodule src="https://cdn.ampproject.org/v0/amp-list-0.1.js" crossorigin="anonymous" custom-element="amp-list"></script>
> <script src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" async="" custom-template="amp-mustache" type="module" crossorigin="anonymous"></script>
> <script async nomodule src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" crossorigin="anonymous" custom-template="amp-mustache"></script>
614c618,619
< amp-img.amp-wp-enforced-sizes[layout="intrinsic"]>img {
---
> .amp-wp-enforced-sizes {
> -o-object-fit: contain;
617a623,631
> amp-img img,
> amp-img noscript {
> image-rendering: inherit;
> -o-object-fit: inherit;
> object-fit: inherit;
> -o-object-position: inherit;
> object-position: inherit
> }
>
4596a4611
> <title>Oyo Coupons Code & Offers, Get 95% Off On Hotels May 2021</title> |
Hi, @schlessera. Thank you for the quick revert. Okay I will install an older release of the AMP plugin right away (Version - Version 2.0.11 ) on the development server too With the old version, I can see 98 scores same as that of the Live server Now on the dev server, I have left the old version for your analysis For almost two years, we are working on this project to improve speed scores as it's directly related to our organic rankings. And we are 100% sure that this AMP plugin release is causing a reduction in speed score by 2-3 points. As soon as we are installing the new plugin speed will be reduced by 2-3 points. |
Ok, great, I got a much better diff now, as both the content changes and the origin change are gone when comparing dev to dev. I also get better scores now on pagespeed insights than before, indeed. As we now ruled out the server/network, can you switch back the dev version to 2.1.0 now so I can run more tests between dev and prod? |
@schlessera Sure I have done now latest AMP release is active on the DEV server. |
What I see from a resource loading perspective is that the v2.1.0 (right) version is equal or faster than the v2.0.11 (left) version: They load the same number of resources, but 2.1.0 transfers less bytes and finishes the overall load faster. However, the Let's try to drill deeper into that... |
Hi, @schlessera Ok, thank you for your hints, but please try to share patch release, which doesn't impact speed scores and those that are too important for organic rankings. The new release of the AMP plugin might be improving the performance in real but its impacting scores |
Going through the profiling runs doesn't show anything conclusive. On most runs, the v2.1.0 is faster in all regards than the v2.0.11 version:
Yes, I agree we need to keep the scores up, but I need to figure out first what is actually lowering them. Every single measurements I've done so far has v2.1.0 be faster, so I'm not yet sure what exactly is lowering those scores... I have a hunch that the ESM support might not be working as expected on the PageSpeed Insights tool, so I'll share a plugin for you to test that switches ESM support of. Give me a few minutes to assemble such a plugin... |
@askmeoffers Can you try installing and activating the following plugin on your dev site (with v2.1.0) to see what PSI measures when ESM is off? https://gist.github.com/schlessera/4127ab30f4235f1acbc11e3eee77701a |
With the above plugin you can run v2.1.0 without ESM by appending |
@schlessera done I have installed and activated it. |
I did a few PSI runs now between these two URLs:
Although 2. is faster in all regards in local tests, it consistently results in lower scores in PSI. @westonruter, @sebastianbenz, @kristoferbaxter: Could it be that PSI does not yet properly support ES modules? The ESM version seems leaner and faster in all regards on my local system, so why would the performance score be lower? @askmeoffers As a work-around for now if you want to get v2.1.0 to production, you can add the following code to your site to disable ESM by default for now: use AmpProject\Optimizer\Transformer\RewriteAmpUrls;
use AmpProject\Optimizer\Configuration\RewriteAmpUrlsConfiguration;
add_filter( 'amp_optimizer_config', static function ( $config ) {
$config[ RewriteAmpUrls::class ][ RewriteAmpUrlsConfiguration::ESM_MODULES_ENABLED ] = false;
return $config;
} ); |
That's quite an obvious increase in runtime, for what is supposed to be less code to execute. Is the ESM version doing something fundamentally different that requires more processing, or does this point to a potential bug? |
On mobile so can't dig deep right now, but are we sure the execution of JS is at play here? From quick glance at the WPT data it appears to be main thread time outside of JS (since the execution is before JS is streamed and executed). Also, what does real user data say? |
Could this extra processing be caused by
This is a dev site atm, since the site owner does not want to push a change to prod that reduces the performance score. |
The synthetic scores are not the source of truth for end user performance, but valuable for comparing versions. My hunch is the end user metrics are actually improved with module scripts (as seen across the Google AMP Cache).
Good theory! I'll try to create a example of this document to test some ideas today using Cloudflare Workers. |
I don't seem to have access to the site using the newest version (https://dev-askmeoffersomsairam.pantheonsite.io/coupon-deal-offer-promo-store/oyorooms-com/?amp_esm=1) Can someone grant me access? |
@kristoferbaxter Thank you for your prompt. |
Thanks! Taking a look. |
The WP plugin already removes the
I'll do some investigation to see why the WP plugin's |
The key reason is that the image is “tiny” at being only 80 pixels high. The other reason is that the image doesn't appear to be a featured image output via @askmeoffers I recommend you add the |
@westonruter, we have added "data-hero-candidate" to the image tag to enforce making it a hero image. @kristoferbaxter we have also changed the meta to suggested But we still see a speed score difference when comparing below over PSI.
Thank You |
We have turned ON the security mode for the dev site as we see too many attacks on dev sites and other security attacks. Still, whenever required to debug and analyze, please contact us ([email protected]) or update us on this ticket. We will remove it. |
We're discussing the issue with the V8 team and have pulled a local copy to further debug. Will update as we learn more. |
I'm seeing this as well. I also went further by moving other AMP scripts down to either right before the respective component (e.g. In short, for an SSR'ed page, these changes can shave 294ms from a needs-improvement LCP of 2.586s LCP, taking it down 11% to a good LCP of 2.292s. |
The example cases used were a comparison of module parsing versus classic script parsing for the same content without preloading. However, let's meet next week to discuss your findings and see if we can replicate across a larger swath of the corpus. If so, we should move to your suggestion! cc @erwinmombay and @jridgewell |
@kristoferbaxter @erwinmombay @jridgewell I've put together a prototype Optimizer transformer which moves all non-render critical scripts to the end of the I've deployed this on three sites behind a feature flag. To try it, add the The following WPT results are for testing Moto G4 - Chrome - 3G with 3 runs:
Update: For implementation in amp-optimizer-php, see ampproject/amp-toolbox-php#327. |
cc @rcebulko as well for the latest post |
@westonruter had a question, how do you get the |
@westonruter Is it possible to get WPT to run more iterations of these trials? From what I can tell, the FCP and LCP fluctuations are within one standard deviation of the mean for each, so it's not clear how much is signal vs. noise so far |
@erwinmombay I'm not sure. I don't know most of the configuration settings for WPT. I just ran it with the following:
@rcebulko The URLs for testing yourself are all linked in the table. The results I believe will be much more telling when there are more AMP scripts on the page. I'm going to try to get another site running this which has many more. |
@westonruter Is there any way to merge this prototype in the AMP plugin and for our site and test it? |
@askmeoffers the prototype is a plugin which you install alongside the AMP plugin: https://gist.github.com/westonruter/e45cd802a75c7deb80a2a1639b4cea7c |
@westonruter, wow, thank you! I am going to deploy it right away also now, with the above-prototyped plugin, can i remove the below lines recommended by @schlessera use AmpProject\Optimizer\Transformer\RewriteAmpUrls; add_filter( 'amp_optimizer_config', static function ( $config ) { |
I would recommend removing that code to re-enable ESM modules, yes. Do note that my plugin is a proof of concept that is requires a query parameter to be supplied ( |
Hi, @westonruter. Thank you, I ran a couple of test iterations (10+ times )on our dev server. The speed score on the google page speed has improved with the query parameter ?amp_postpone_script_loading compared to the previous. Also, there is more stability in speed score than fluctuating results previously. How can we deploy it to a live server so that we do not need to pass any query parameter if this change release takes time? |
@askmeoffers can you please share URLs so we can compare before/after? It's not yet suitable to remove the feature flag because the AMP validator does not yet allow scripts in the body and so your pages would not be valid AMP. |
@westonruter Thank you! I have removed security protection from the dev server. Before URL: https://dev-askmeoffersomsairam.pantheonsite.io/ After URL: https://dev-askmeoffersomsairam.pantheonsite.io/?amp_postpone_script_loading Due to some recent chrome updates, our page speed is fluctuating a lot without this prototype. The CUX report immediately impacts our organic rankings, so I will request you to please release these changes sooner if possible. Thank You |
Thank you. For this page, the changes introduced with the proposed optimization are:
Since there aren't many AMP scripts, the impact is minimal but it does seem to be a win for LCP. PageSpeed InsightsThe changes result in a 3 point bump to the PSI score, 95 to 98. It also reduces the FCP from 2 seconds to 1 second, and brings LCP from 2.5s to 2.3s:
WebPageTestThe following results are from 9 runs respectively (with WPT links in table headings):
|
I've opened a PR to remove I intend this to be included in v2.1.3 next week. The changes to moving non-critical |
@askmeoffers AMP plugin v2.1.3 was just released, including the removal of |
@westonruter Thank you! we will test it and update here soon. |
@askmeoffers Do you have any findings? |
@westonruter Sorry for the delayed response due to COVID-19 issues within our family members. The updates improved the speed but we still see the difference in speed with ESM_MODULES disabled/enabled. When we disable ESM_MODULES Speed is +3 approximately as we noticed earlier. We also tested with the default WordPress theme and other hosting providers( wpengine, pantheon, and flywheel servers) and found that the speed is 100 on PSI when we disable ESM_MODULES but if we enable it then there is a slight impact (reduction by 3 to 4 points). I will share the URL by this week with our reports. Thank You |
Hi Team, Below are URL's With Enabled ESM Module : With Disabled ESM Module Thanks |
Comparing the Here's an example of such a plugin: https://gist.github.com/westonruter/279bcb54336449ce55d8887fb0fcf5b9 It disables ESM modules by default, except of the |
@westonruter Thank you! I have activated the plugin on the live server You can continue debugging Thanks |
I ran the two versions through 9 runs each on WebPageTest. The results are showing a performance improvement with ESM enabled:
WebPageTest was configured as follows: |
@westonruter Thank you! I also notice the same from my end The speed has improved with ESM Mode enabled in a live environment. Earlier we compared the dev environment so that caused confusion Thanks to the AMP team who have enabled us with such a powerful web framework! I will deactivate the plugin now so that ESM mode is enabled and we can close this ticket now. |
Hi Team,
We see our page speed got reduced by 3 points with the recent update on the AMP plugin.
Previously we were getting 98 scores on https://developers.google.com/speed/pagespeed/insights/, but after the updates, it gives a speed score of 94-96 and sometimes lower than this.
As we noticed this issue, so we did not move the update to the Live server
This difference is quite noticeable.
Speed on Live server with AMP plugin version Version 2.0.11: 98
https://askmeoffers.com/coupon-deal-offer-promo-store/oyorooms-com/
Speed on Dev server after AMP plugin updates: 94-96
https://dev-askmeoffersomsairam.pantheonsite.io/coupon-deal-offer-promo-store/oyorooms-com/
Both the environments are absolutely the same apart from amp plugin updates.
Please let us know if any debug information is required.
Thanks
Team - https://askmeoffers.com/
The text was updated successfully, but these errors were encountered: