Setting up AMP on a WordPress Site (AMP UP Ep. 3)
Articles Blog

Setting up AMP on a WordPress Site (AMP UP Ep. 3)

August 11, 2019

AMP Up, the show where we take a website that needs a
little help and we AMP it up. Today, we’re working on a
site called Coming Out Space. This site is an
open source library of diverse coming out stories
for the LGBTQ community, and for anyone else
who wants to learn. The site is about to unveil an
exciting new coming out story from world famous YouTube
personality, Gigi Gorgeous. This auspicious occasion
provided a perfect opportunity to spiff up the site. Said the site
founder, Nate Warden– NATE WARDEN: We’ve wanted
to move Coming Out’s website to AMP for a while, because the
majority of our site traffic actually comes
from Google search. And we know that speed
is an important factor in search rankings. And also the majority
of our site traffic– probably 50% to 60%– comes from mobile devices, so
speed’s extra important there. BEN MORSS: Coming Out Space
is built on WordPress. Unfortunately, I’m not
a WordPress developer. Fortunately, Jessica
Duarte volunteers her time to develop this site, and she
was excited to learn about AMP and to try out the new
official AMP WordPress plugin. Hey, Jessica. JESSICA DUARTE: Hi, Ben. BEN MORSS: I also just happen
to be personally acquainted with Alberto Medina, who’s
leading this plugin effort. He’ll tell us a bit about how
to use this plugin and about progressive WordPress
sites in general. Hey, Alberto. ALBERTO MEDINA: Hi, folks. BEN MORSS: Now that
we’ve met everyone, let’s take a look at
those story pages. So this is a pretty standard,
straightforward site. And yet, it’s got about
20 JavaScript files and almost as many CSS files. So our plan is to make
the story pages all AMP, all the time, right, Jessica? JESSICA DUARTE:
Yeah, there’s really no need for a paired mode where
each page is AMP and non-AMP. Since the AMP pages look
identical to the non-AMP pages and they’re faster, why not
just make it AMP all the time? BEN MORSS: And I imagine
that very little of the CSS and JavaScript actually is
used in this page anyway. It’s just texts, and images,
and photos, kind of basic stuff. But then there’s this
fancy menu over here. This menu is made by
this Tap Tap plugin, and it does use JavaScript. But I bet we can keep the same
look and feel by using AMP. JESSICA DUARTE: Let’s try
that automatic AMP plugin. BEN MORSS: So while Jessica’s
installing the plugin, I’m going to try to
remember what Alberto once told me about how to use it. Think, Ben. Think. ALBERTO MEDINA: Ben,
activate it and see what happened with the AMP site. If you see any visual
or functional disparity, just use information that
the plugin gives you, and you will find where
to fix the problem. You have everything you need. Just do it. BEN MORSS: Right. JESSICA DUARTE: OK, I’ve
installed the plugin, and I’m going to set
it to native mode so it will convert the
pages to AMP all the time. And I’m setting it only
to convert the posts, because that’s where all
of our story pages are. Let’s see what it does. [MUSIC PLAYING] BEN MORSS: How did we do? JESSICA DUARTE: We did so great. It looks amazing. [APPLAUSE] It’s so good that
I’m going to have to compare it to our
actual non-AMP page to see what didn’t work. BEN MORSS: Well, here’s
one thing, of course. The fancy menu
doesn’t work anymore. That isn’t surprising,
because the AMP plugin removed its JavaScript. JESSICA DUARTE: Something a
little bit more significant though, is that I’m noticing
on our video story pages, the videos are not
coming through. And that’s because we were
loading our videos using a combination of an ID entered
into an advanced custom field on the backend, and
a short code with a plugin called Fluid Video Embeds. Now, this plugin is injecting
a lot of code into the frontend to load that YouTube video. And we really need
a better solution. AMP to the rescue. With AMP, we can use what are
called AMP YouTube elements. And we can still use
our ACF information– our ID that we entered
into the backend– with AMP YouTube. I’m just going to change
that right here in my code, and take a look
at the difference. It’s unbelievable how
much faster it is now. I couldn’t believe it
when I first saw it. It is almost impossible
to tell how long it takes, because it’s just immediate. It’s so much easier as a coder
to implement AMP YouTube videos in WordPress because
I no longer need to use the plugin, of course. But also, as some people
often use jQuery plugins to make the videos responsive. But AMP YouTube video embeds
are responsive automatically. BEN MORSS: I’m seeing a
general principle here. If you’re a WordPress
developer, if you use plugins to do
things, you can often instead use the AMP components. And you’ll have less
JavaScript and less extra CSS. JESSICA DUARTE: Yeah, it’s
easier and it works way better. All right, so let’s continue
looking at our page here. I see that another really
important part of our page is missing now with AMP, and
that is our social sharing icons. So I’m going to take a look
at our template here and– yes. As you can see, we are
using a Jetpack plugin to load some sharing buttons
at the bottom of our page. These are important. We can’t do without them
because we want everyone to share our coming out
stories as much as possible. So we need to find an
alternative solution. The great news is that AMP
has another element called AMP Social Share that allows
us to very simply insert sharing buttons for any social
media platform into our page. And took some of that code from
the AMP documentation pages and put it in. I’m going to delete
this Jetpack code. And that also means I
can deactivate Jetpack. BEN MORSS: So Jetpack is
really a great plugin, and it has all
kinds of features, but using only for one
feature in this case. JESSICA DUARTE: Exactly. It seems like a lot for
just one little feature. So let’s take a look here. I’ve entered my social sharing
buttons with AMP Social Share. I can also give them
a height and a width, because I want to
make them round like the rest of the site. I want them to match
across the entire web site. So I can add a class, in
addition to the height and width, and simply
use a border radius in my CSS to target
that AMP element and make the icon circular. So it’s really easy, and
they work right off the bat. BEN MORSS: So I’m
also noticing there’s some fonts, like Font
Awesome in there that are being used in the page. And also there’s
extra CSS still, so how do we get the fonts
you don’t want off of there? JESSICA DUARTE: So
currently, we are loading all of our CSS
using a WP and Q-function in a file called bones.php. It functions off PHP in
most WordPress web sites, but our theme uses
a separate file. So I’m going to go in there
and take a look at what we’ve enqueued to begin with. And with WordPress,
I can use something called a wp_dq-function
to actually remove those on our single pages. So in the same function where
I added my CSS for my social sharing buttons– the
amp-style.css file that I showed you– in that very same function,
I can simply use wp_dequeue. And using the IDs from all
of the CSS style sheets that were enqueued originally,
I will simply dequeue them. BEN MORSS: While
she’s doing that, Alberto, about this
plugin, what do you mean when you say a
progressive WordPress site? ALBERTO MEDINA: The web
has evolved quite a bit in recent years. So when we talk about the
notion of progressing WordPress, we are thinking about
a WordPress platform where things like modern
developing workflows, coding and performance best
practices, and the integration of modern web APIs
are all commonplace. So, in a nutshell, it’s
a WordPress platform where doing the right thing and
building user-first experience is easy. BEN MORSS: What does this mean
for WordPress that there’s this new AMP plugin out there? ALBERTO MEDINA: I
think that everybody agrees that we all want a
progressive WordPress platform. The question is,
with an ecosystem so big like WordPress,
how do we work through the progressive
flow as fast as we can? And here is where
AMP enters the game. Because what AMP gives
you, in and nutshell, is a set of powerful
capabilities and optimizations out of the box that
enables everybody to address three main issues:
load time performance, runtime performance,
and usability. So by integrating
AMP into WordPress, we are enabling any developer
on any site, independently of their skills or the size
of the engineering team, to build awesome user
experiences in WordPress. BEN MORSS: That is
kind of magical. So without being a
programmer or even knowing what actually is being spat
out by the WordPress plugins, you can just make your site
AMP and it’s just faster. ALBERTO MEDINA: Exactly. The good thing is
that the plugin enables that in the
standard content creation workflow of WordPress. BEN MORSS: So you can
add components and things to your WordPress site
and they come out in AMP. ALBERTO MEDINA: Exactly. BEN MORSS: Of course,
if you have plugins that add all this
JavaScript and CSS, and the plugins suddenly
lose the JavaScript and lose part of this CSS,
things will stop working. So I guess the key is
how to find those things and replace them with
the right AMP components. ALBERTO MEDINA: Exactly. But the good news is that
if you see the set of things that you have to do as a
pie, the plugin gives you 90% of the work, and
then you have to do 10%. And the 10% consists
exactly what you said. For every error you can say,
when the plugin dealt with it properly– because there is no
functionality or visual parity that was lost. I’m fine with those. But some, for example,
navigation manuals, could be a problem if they
are enabled by JavaScript. So when you activate
the plugin and you see that the menu
doesn’t work, you can see where the navigation
script was deleted. And you say, oh, OK. I can use, for example,
AMP Bind to do this. Right? So and then you do it. BEN MORSS: I think because this
is occurring right here today, we actually have the menu
that runs this JavaScript. We’re now replacing
the menu with AMP Bind is our exact plan. And most of the
stuff that was there before that the plugin removed
wasn’t being used anyway. ALBERTO MEDINA: And
that actually points to one of the new capabilities
of the plugin that’s different from before is
that now the plugin utilizes the underlying theme
of the whole site. So now, that’s why you see
that they look identical, and the plugin could have
tweaked certain things. But 90% of the work
is done, because it’s using the same template system. BEN MORSS: Yeah, the design
didn’t really change. ALBERTO MEDINA: Exactly. Nothing changed. BEN MORSS: Why should it. ALBERTO MEDINA: And it provides
[INAUDIBLE] CSS to be taken. The plugin is capable
of determining which CSS plays a role
in every individual page. And everything that
doesn’t, it wipes it out, keeping you doing the 50
kilobytes limit of AMP. BEN MORSS: That was
impressive, too. Because the site
before had 340K of CSS. ALBERTO MEDINA: Exactly. BEN MORSS: I know
it has not much CSS and, except for the menu,
most things look the same. ALBERTO MEDINA: That’s just one
of the powerful capabilities, and now everybody can leverage. BEN MORSS: Very nice. So how’d that go
with the enqueuing and dequeuing and so on? JESSICA DUARTE: It worked. So now on our story pages,
the CSS that I don’t want isn’t being loaded by
the WordPress website. BEN MORSS: Are any validation
errors left here still? JESSICA DUARTE: No, I made a few
changes and we’re in the clear. No validation errors. BEN MORSS: All right. So this video is
already long enough now. Let’s just kind of
shown Nate the site. And just don’t
show him the menu. JESSICA DUARTE: You think that’s
really the right thing to do? BEN MORSS: Who are we
to say what is right? I mean, I’m not a
moral philosopher. [BUZZER_] No, she’s right. We can’t show Nate the
site with a broken menu. So we’re running out of time. Instead, we’re going to just
fix the menu in the next video. Tune in next time for AMP Up,
Coming Out dot space, part two, the fancy menu. [MUSIC PLAYING] Thanks for watching. To learn more about AMP, just
subscribe to the AMP channel. And see you next time on AMP up. [SCREAMING]

Only registered users can comment.

  1. Overcomplicated. It needs to be better integrated with the Version 5 page builder and common plugins automatically. Site owners don't all have access to developers, or the money to spend on all this rework to be compatible with AMP. There's also the issue of monetisation – which often uses JavaScript

  2. On my website, the posts have AMP, but when I activate the lazy load plugin to reduce the load times of the entire website, the AMP posts are unbalanced. The question is whether AMP is compatible with lazy load. thanks

  3. Why are you guys relying so heavily on plugin. Why not come up with a theme framework ? Also, please see that when you offer plugin, people generally expect everything to be done automatically. Plugin is creating an impression that no coding is required. People generally never read any comments / description and just go ahead and then blame that the plugin broke their website 🙁

  4. Also, is there any way to set ongoing precedents on the plugin for CSS & Javascript (e.g. change <youtube> to <amp-youtube>) or would I have to do this manually every time I create a new page? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *