Advertisement
  1. Web Design
  2. CSS
Webdesign

Optimize Your Website Without AMP: Optimization Checklist

by
Difficulty:BeginnerLength:MediumLanguages:

When you want to optimize a website’s performance manually, without using a ready-made approach like AMP, what are the key steps you need to take?

In this video from my course Optimize Your Website Without AMP, you’ll discover a simple checklist you can use to ensure your site loads just as fast as it would with AMP, if not faster. 

Optimize Your Website Without AMP: Optimization Checklist

 

The Optimization Checklist

Here’s the basic optimization checklist we’ll be working with:

  • Should load as fast as—or faster than—an AMP version of the same site.
  • Load web fonts as early as possible to get them coming in.
  • Efficient, small size CSS loaded inline in the head section.
  • Write CSS in external files for more practical development.
  • Combine and minify JavaScript.
  • Set up a build process to make the above two things happen (we’ll use Gulp).
  • Use only async JavaScript.
  • Defer JavaScript so it doesn’t block rendering (run JS at the right time).
  • Vanilla JS so no JS dependencies to minimize the amount of code to load.
  • Prefer simple JS.
  • Create no JS fallbacks wherever possible.
  • Use lazy loading on images and iframes (videos etc.).
  • Prevent reflow to avoid layout recalculation.

As you can see, this checklist is part tasks that we need to complete, it’s part principles that we need to follow, and it’s also part goals that we want to achieve. Let’s look at each of them in more detail.

Load as Fast as—or Faster Than—an AMP Version of the Same Site

The first thing on our list is a goal, and that is, we want our site to load as fast or faster than the AMP version of the same site. It’s a good idea to keep checking on your load time as you go along with your your development process, so that’s what we’re going to be doing as we work through everything.

Load Web Fonts as Early as Possible

Now let’s get into the technical things that we need to do. The first consideration is that we want to get any web fonts that we will be using loaded as fast as possible. 

Web fonts are often relatively large files, and you can’t show your content properly until those web fonts are loaded. So we’re going to make sure that we get those web fonts loaded very early in the picture, probably as the first thing that starts loading.

Efficient CSS Loaded Inline in the Head Section

The next thing that we’re going to do is make sure that our CSS is very efficient and very small in size. 

Sometimes you can be tempted to take a shortcut and include a massive library of CSS into your sites to help speed up the development process, even if most of that CSS is not necessary.

Throwing in a massive CSS file might help speed up your development, but it’s probably going to slow down your website and diminish the performance of your sites in search engines. I say that because load speed is now a ranking factor. So it’s important for your CSS to be as small and efficient as possible.

You’re also going to take that CSS and load it inline into the head section of the site. This is a technique that AMP uses, and it is an excellent optimization technique. So that is one that we definitely are going to be holding onto with our own optimization process.

Write CSS in External Files

Even though our CSS is going to be inline in the head section, we still want to work on our CSS in separate files. Trying to write CSS directly into the head section of an HTML file is really not very practical. So we’re going to get everything set up so that we can work on our CSS files externally, and then have them inline in the HTML files later, so we get the best of both worlds.

Combine and Minify JavaScript

The next thing that we’re going to do is make sure that to the greatest degree possible any JavaScript that we’re using is combined and minified. 

One of the downsides of working with AMP is that you have multiple JavaScript files you have to bring in, and each one of them has to come in separately. But to the greatest extent possible, we’re going to take our JavaScript and combine it into a single file, so that we have the absolute minimum number of browser requests. 

Set Up a Build Process

To make both of those things happen—working on CSS externally and combining and minifying JavaScript—we’re going to set up a build process that will make both of these things happen automatically.

We’ll be using Gulp to do that. That means that you’ll need to have Node installed on your system, and you’ll also need to dabble a little bit in using the terminal. But during the course I’ll step you through what to do, so even if you haven’t worked with the terminal, you should be just fine.

Use Only Async JavaScript

Next up is that we’re only going to be using async (asynchronous) JavaScript. What this means is that the way we’re going to load our JavaScript is not going to prevent anything else on the page from loading at the same time. 

Defer JavaScript

Another thing that we will be doing with our JavaScript is that we’re going to defer it. That means that we’re going to push our JavaScript right to the end of the rendering process. We’re going to make sure everything else in our site is fully loaded before we do anything with JavaScript at all. 

Vanilla JavaScript Only

We’re also going to make sure that every bit of JavaScript we use is vanilla JavaScript, and we’re doing this to make sure that we don’t have dependencies. If we use, say, a lightbox that depends on jQuery, now we have to load jQuery into our site, and that’s more file size and more processing for the browser to handle. 

It’s often not necessary to use multiple JavaScript libraries. You can often achieve the functionality that you want just as well with vanilla JavaScript.

Prefer Simple JavaScript

We’re also going to prefer simple JavaScript. So we’re going to try to keep the file size of our JavaScript down to an absolute minimum. We don’t want lots of bells and whistles; we want to keep everything as tight and efficient as possible. 

Create No-JavaScript Fallbacks

And the last point on JavaScript is that we want to make sure that to the best degree we can, we cater to people who have JavaScript turned off.

With the AMP version of the site that we’re going to be creating, if we turn off JavaScript, you can see that we don’t have much content to look at.

AMP site cover image
AMP site with messages about lack of JS

There’s a little more that we could do with this site to make it a little bit more fallback-friendly. But for the most part, AMP does fully depend on JavaScript in order to give you any type of content at all. 

With our non-AMP version, we’ve still got our background image showing just fine, and we’re actually also inserting some fallback for the font icons here as well, because often people who block JavaScript block fonts as well.

No AMP site

We have a message letting people know why the YouTube video can’t appear, and the same thing underneath where our CodePen would be.

Message explaining lack of YouTube video

Our gallery still shows up just the same, and then down at the bottom, we just have the text version of our tweets showing as a fallback in case there’s no JavaScript.

Lightbox gallery with no JavaScript

Use Lazy Loading

We are also going to make sure we use lazy loading on both images and iframes. If you have a site that is quite long, the person is typically going to look at what’s at the top of that website first, and then they’ll scroll down and have a look at the rest of the content.

But you don’t want to make them wait for the rest of that content to load before they can start looking at what’s at the top of the content. So, with lazy loading, you only load what’s at the top first, and then you gradually load the rest of the content as the person scrolls down.

Prevent Reflow

Finally, we’re also going to make sure that we prevent reflow. Something that you’ll often see, especially on mobile, is that as slower elements load in, like images for example, the rest of the page layout has to readjust itself around the newly loaded image. 

This is bad for a couple of reasons:

  1. It’s just really annoying for a user. They’ll be looking in one place, and then the whole layout changes, and they lose the piece of text they were reading, and they have to find it again. Then it reflows again, and the whole experience is just very bad. 
  2. One of the most expensive things that a browser has to do is calculate layout, and you want to make sure that the browser only has to calculate layout once. So even before your images have loaded, you want to make sure that you’ve allocated the correct space for those images. So the first layout that loads is the correct layout. 

Watch the Full Course

In the full course, Optimize Your Website Without AMP, you’ll put this checklist into practice. You’ll learn exactly how to take an existing AMP-based site and convert it to use non-AMP equivalents. In other words, you’ll learn how to make your sites run blazing fast, with optimization techniques that you decide on for yourself.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.