Add google font in the footer

Hello. It turns out that the AMP spec doesn’t currently allow for this.

Try adding this to the body at https://validator.ampproject.org/:

<link crossorigin="anonymous" rel="stylesheet" id="custom_google_fonts-css" href="https://fonts.googleapis.com/css?family=Open+Sans&display=fallback" type="text/css" media="all">

You’ll see a validator error:

The parent tag of tag ‘link rel=stylesheet for fonts’ is ‘body’, but it can only be ‘head’.

Here is where the spec mandates that: https://github.com/ampproject/amphtml/blob/aaa68eaef2eaa53bb6a700a65a2393e857fcf56c/validator/validator-main.protoascii#L312

So this is something that will have to be taken up with the AMP core project. If a change is made there, then the AMP plugin could allow font stylesheets in the body as well.

Hi Westorn,

thank you so much for your answer, clear enough.

Well, I’m having worse score using AMP compared to other pages which do not use AMP. AMP is supposed to make the web faster but in my case I’m getting the opposite.

This message:

The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load

Maximum critical path latency: 730 ms
Initial Navigation
/test.php(test.simpledevel.com)
…fonts/dashicons.woff(test.simpledevel.com)
- 300 ms, 25.77 KB
…v14/3qTvojGmg….woff2(fonts.gstatic.com)
- 10 ms, 11.28 KB
/css?family=…(fonts.googleapis.com)
- 30 ms, 1.13 KB
…fonts/fontawesome-webfont.woff2?v=4.7.0(cdnjs.cloudflare.com)
- 50 ms, 76.01 KB

is making page speed much slower. I don’t know yet how to fix it, or maybe there is no way, it is just like that.

I’ll keep investigating but if anybody knows anything, please enlighten me ??

@dssaez Your site is loading fast for me, a score of almost 80 on web.dev. Also bear in mind that’s your amp origin, when served from amp cache that should also boost the performance further, with various optimizations automatically applied. As you are using amp in standard mode I can’t compare the results, but your server setup could have an impact also.

Nice work with the site, you made good use of different amp components.

@dssaez You’ll want to follow this issue: https://github.com/ampproject/amp-wp/issues/958

This will increase performance by implementing “optimized AMP” in the AMP plugin, which you can read about here: https://blog.amp.dev/2019/08/07/faster-amp-on-the-origin-amp-ssr/

The optimizations outlined here are also applied by the AMP Cache, so you could test to see performance of your site loaded from the AMP Cache by testing https://test-simpledevel-com.cdn.ampproject.org/c/s/test.simpledevel.com

For me this yields a 89 performance score, versus 77 on your origin. The AMP Cache version is what visitors to your site will experience when accessing via search on mobile (Google, Bing, etc). This will be improved further once server-side rendering is implemented for layout=intrinsic. See https://github.com/ampproject/amp-toolbox/issues/264

As noted above, we’ll be implementing more of those optimizations directly in the AMP plugin as well to ensure direct visitors to your origin get the same benefits (e.g. desktop).

There is one thing you can do to “Eliminate render-blocking resources”, however your mileage may vary. What you could do is inline the @font-face instead of loading the external stylesheet. This has some big caveats since Google Fonts serves optimized stylesheets based on the browser, but if the specific font is not important and can fallback to another version, you may want to give this a try: https://gist.github.com/westonruter/25474fcdea0dc4ac69f3af551f0f15e9

This inlines the stylesheet as served to Chrome on OSX. So again, beware of cross-platform issues.

The only other thing that I’m seeing from the Lighthouse audit is this opportunity:

Preconnect to required origins: https://cdn.ampproject.org

I didn’t think that was necessary since we have preload links. But could you try adding this to a custom theme/plugin?

add_filter(
	'wp_resource_hints',
	function ( $hints, $relation_type ) {
		if ( 'preconnect' === $relation_type ) {
			$hints[] = 'https://cdn.ampproject.org';
		}
		return $hints;
	},
	10,
	2
);

If that improves your origin Lighthouse score, we’ll add it to the AMP plugin as well.

FYI: I’ve opened a PR to add the preconnect rel=link to the AMP plugin: https://github.com/ampproject/amp-wp/pull/3253

Hi guys @westonruter and @jamesosborne , thank you so much for your help.

@jamesosborne
As you are using amp in standard mode I can’t compare the results, but your server setup could have an impact also.
It is in standar mode, yes, and the server is an amazon VPS which is quite fast and I’m also using LiteSpeed web server with LiteSpeed cache plugin so everything goes very fast, actually I have done some tests with a page a part from the WordPress and I got almost 100 performance.

Nice work with the site, you made good use of different amp components. Thanks

And yes @westonruter I have tested also the AMP cache testing as you have mnentioned “https://test-simpledevel-com.cdn.ampproject.org/c/s/test.simpledevel.com” and I got more or less same score.

As far as I’m concerned the fonts and the AMP scripts (such carousel, fit-text, observer) mess up with the performance of the page speed testing, I have tried other sliders mainly css and a little bit of javascript and they do better. I guess this is something which will get better.

I didn’t have plenty of time today (lot of work) to try it out all the info you mentioned @westonruter so I’ll check it and let you know, but I have tried the “preconnect” filter, I have seen it taken effect on the site but it did not get better pèrformance. For the moment I’ll leave the filter activated. And well done with opening the PR.

Have a nice day ??