by Ryan Irelan
Google AMP (officially known as the AMP Project) is a new way to deliver fast pages to mobile users through special HTML markup, lean HTML documents, and caching (via the AMP Cache).
But AMP is not without controversy, mostly because it requires a new HTML syntax to work properly and a fair amount of template work.
But the promise is a big one: faster pages and maybe better search rankings.
AMP stands for Accelerated Mobile Pages. It’s an open source framework with the goal of delivering faster pages to mobile users. Google has been pushing web page performance for several years (to learn more about it check out my Web Performance Testing course) but mostly wth tools that helped developers measure performance, not create fast pages.
However, Google AMP is an implementation that helps you create faster mobile pages. Instead of providing the tools to measure fast pages, Google is now offering a tool to create them, too.
AMP is a three-part system:
I put together a free lesson so we can “plug in to” AMP, learn what it is, how it works, and then step through a simple implementation together.
by Ryan Irelan
Web pages are getting bigger. In 2015, according to the HTTP Archive, the average web page increased in size by 16%.
2 MB pages are common now.
But assigning blame isn’t a solution. Hand-wringing and finger-pointing do nothing to improve the situation.
However, understanding how your pages perform_while you are developing them_ does.
If we can become more aware of how our feature, design, and development decisions impact the performance of the website, we can address problems before they impact the site’s user experience.
And that’s what we’re after in Web Performance Testing.
by Ryan Irelan
In a previous lesson I covered how to find TTFB, the Time to First Byte. TTFB is one of several metrics we can use to measure the performance of our websites.
In this lesson, we’ll expand the coverage of performance testing metrics and review the most important performance metrics to consider when building and testing your website.
by Ryan Irelan
The main reason to create a performance budget is to have a tangible starting point for conversation around a web page or website. It shouldn’t act as gospel, but it’s a thing you can measure against. It’s your frame of reference. -Dan Mall
A performance budget is a plan.
It’s a guide against which to measure your work: your design and development decisions, and feature choices. The performance budget is meant to aid you during the web design and development process and then be a data point when you deploy the new site to a staging and production server against which to measure other performance testing and metrics.
A performance budget is not a hard line that you cannot cross.
You certainly should not ignore it completely (otherwise what’s the point of having one) but treating it as a best case scenario is a pragmatic approach.
A performance budget lets you make informed decisions.
Consider the performance budget when you are:
Current knowledge is that the term “performance budget” was first mentioned in an article by Tim Kadlec in the context of web design and development teams.
Tim covered this in the context of improving the performance of responsive websites after a trend of heavier page weight sites being designed. On a fast connection the extra weight was nary a problem, but on mobile, where bandwidth is often more limited, loading a full desktop site worth of assets for a more constrained mobile device view was an issue.
You can think of a performance budget the same way you think of a budget for your personal finances. You set a limit on what you want to spend in a given month and then assign values to categories accordingly, until that limit is met.
As the month progresses, you have to make choices along the way. Do you go out to that fancy steak dinner for $200 and deplete your Eating Out budget? Or do you skip it so you can get lunch out for the next couple weeks instead of bringing a ham sandwich to the office?
It’s okay to choose either option, but if you choose both, you’ll exceed your budget.
The same approach is used for performance budgets. Instead of setting a monetary amount we can’t exceed, we set some webpage metric. This could be one of the following:
The first two are fairly straight-forward to test and shouldn’t vary much across environments.
The last one, total render time, is a bit harder to test because it could vary depending on the environment (bandwidth being the wildest variable here) and the web browser used.
I like to use the total page weight and total number of HTTP requests because I can regularly and reliably test it.
The advantage of using number of HTTP requests and page weight is that they nicely adapt to a site that is out of active design and development and in the QA/Launch phases.
This is when you are ensuring the site performance meets your expectations based on the budget you set earlier in the project. No matter which environment we’re in, the number of HTTP requests and the page weight are still good measurements. This is the case even if those environments affect the total measurements (due to extra code for analytics, A/B testing, etc); we still want to hit—or come close to—our performance budget.
A performance budget helps us make informed choices both during the site development and over the course of its life.
by Ryan Irelan
When we do web performance testing, one of the performance metrics that we’ll want to test is Time to First Byte (TTFB).
Before I jump in to how to measure TTFB (via the video below–wait don’t skip!), let’s review what TTFB is and how it fits into the bigger picture.
Firstly, is not a sole actor. It is only one of the four network metrics that can impact page load time.
There are also:
We’ll cover the rest another time, but for now let’s focus on TTFB.
Time to First Byte, TTFB for short, is the amount of time it takes for the browser to receive the first byte of data from the server after the browser makes the request.
TTFB does not include DNS lookup or any SSL negotiation that has to take place before there is a connection to make the request to the server. You can see this demonstrated in the video below where I show how to find out your TTFB using both Google Chrome and the Webpagetest.org.
Let’s roll the video:
TTFB is important to measure is because it can create the perception that your page load is slow.
A fast TTFB will not help us if we have other performance problems with our webpage (e.g. if our page weight is too heavy or its assets not optimized).
Even if we have a snappy page in terms of other non-network metrics, a slow TTFB can give the perception of a slow page speed.
You can do all the work you want on improving other metrics for your webpage performance, however, if the TTFB is unacceptably slow, then your page speed will be perceived as slow by the end-user.
by Ryan Irelan
A performance budget sounds great but how do I implement this in the real world, with real clients?
One bit of advice to get started (I learned this the hard way): don’t have an internal-only performance budget and use it to fend off client feature or design requests without first including the client in the formation of said performance budget.
They’ll be confused and you will probably look defensive at best, aloof at worst.
If you have clients that are not used to having a performance budget in a project, then here are some tips for talking about performance budgets with clients:
It’s always (always!) easier to be upfront and transparent with your clients. Doing the same with performance budget will yield better project results.
The burden is on you–the designer, developer, owner–to show why a performance budget isn’t just some nerdy, tech-y thing that makes us feel good about ourselves and the tools we use. Make it yet another tool that helps you work together with the client toward the project’s larger goals.
The end goal is never to “build a website” so don’t approach sales, design, or development like it is.— Mijingo (@mijingo) May 11, 2015
Our courses are offered in Team Packs (up to 5 people) and Company Packs (up to 25 people), so you can make one simple, fast purchase to train your entire staff.
Prices are listed with each course. Need more than 25 or something custom?Send Your Requirements