OniOnXT replied
Customer Reply
Thank you!
Public Ticket #17047
Performance in AMP
Conversation thread
PenciDesign replied
Staff Reply
Hi,
We just released a new update for AMP today, you can go ahead and update it to the latest version 4.4 by download the latest version of AMP here
After that, go to Plugins > All Plugins > upload the latest version of the AMP plugin and select to replace it with the old version you're using. The problems will gone.
Best Regards,
PenciDesign
OniOnXT replied
Customer Reply
Hi!
I want to add the "data-hero" attribute to the amp page markup for the main image of the "amp-img" entry. But after looking through probably all the files of your plugin, unfortunately, I couldn't find where to edit the markup.
More information about this is written here:
https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/explainer/#hero-image-optimization
Please tell me in which of the plugin files I can find amp-img for the main image of the recording (I attach a screenshot).
Thanking you in advance!
PenciDesign replied
Staff Reply
Hi,
We will have a look and if it's needed, we will release a new update to add supports those points.
Best Regards,
PenciDesign
OniOnXT replied
Customer Reply
I'm sorry, but something is wrong here.
We still have an increasing number of pages that Google Search Console swears at.
They also have a new tool for checking the correctness of AMP pages:
And it describes all the same problems with the Font-display value and FontAwesome preloading that I wrote about earlier.
Please read it. Obviously, there is a problem with fonts that affects the blocking of content.
PenciDesign replied
Staff Reply
Hi,
You can check the rules for building AMP here:
For font & font icons:
https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/
It required to use the fonts from:
- Typography.com: https://cloud.typography.com
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- Typekit: https://use.typekit.net
- Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
or load the fonts from your local server.
If you don't follow it, your AMP pages can't be validated. That's why the blocking time can be increase because there is no way to optimize it.. Even you change it to swap on Google fonts, it still need to wait for the fonts to loads from https://fonts.googleapis.com and caused the issues with blocking time - it's no different.
Best Regards,
PenciDesign
OniOnXT replied
Customer Reply
We are addressing you here only because errors occur in Google Search Console exclusively with AMP versions of pages; we have no errors with regular versions.
Please see the screenshot.
PenciDesign replied
Staff Reply
Hi,
First, you should understand how AMP works. Here is the way AMP works:
If someone on a mobile or tablet search a keyword on google.com => Google will return the search results => if your page appears on the google search results & support for AMP => When the user click on it the AMP page will loads.
The AMP developed by Google self and Google will take care of the speed loads of AMP. So, the scores of AMP pages on Google Page Speed doesn't tell anything and it doesn't require to optimize because there is no way to optimize scores for AMP pages - all rules on AMP pages proposed by Google self. And Google Search Console never appears any message relate to optimizing the indicators of web vitals for AMP.
Best Regards,
PenciDesign
OniOnXT started the conversation
Conversation Start
Hello!
The AMP version of my site has problems with blocking external resources (fonts and icons) and this negatively affects LCP (Largest Contentful Paint).
The problem is with three blocking resources:
1. https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i
2. https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i
I believe the problem is that google fonts are not set to default font-display: swap.
3. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
And icons are included in the header, so they block display.
Please clarify, was this really intended for the amp version? Is it possible to add "font-display: swap" to the fonts and move the Font-Awasome to the body?
Want to join this conversation or access attachments? Sign in first.
