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.
- Set up a build process to make the above two things happen (we’ll use Gulp).
- 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.
Set Up a Build Process
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.
We have a message letting people know why the YouTube video can’t appear, and the same thing underneath where our CodePen would be.
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.
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:
- 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.
- 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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post