We’ve all had those moments where the language surrounding site speed can seem a little daunting, and that’s why we’ve put together this handy glossary to help guide you through some common terms.
General Terms to Remember for Page Speed Optimization
Client. A fancy way of saying, “The thing that loads the web page.” Typically your web browser, but search engine bots are clients, too.
CMS. Short for “Content Management System.” Any software that allows editing of content using some interface other than a text editor. OK, that’s pretty broad. But basically accurate. WordPress is a content management system.
CriticalCSS. The set of styles required to display the page’s structure, look, and feel in the viewport or above-the-fold. These are the only styles that should be loaded synchronously on any given page embedded into the HTML output, not a separate file.
Cumulative Layout Shift, or CLS. The measurement of the sum of all unexpected layout shifts during the loading of a page. A layout shift is the visible movement of an element from one frame to the next. You want to reduce CLS on your site as much as possible.
First Input Delay, or FID. The measurement of how long a page takes to respond to a user’s first interaction, like clicking a link or button.
First Contentful Paint, or FCP. The measurement of how long a page takes from the initial load to the first rendered content displaying on the screen.
Note: we’ve also got a post that covers techniques to improve FID and FCP measurements.
The Fold. The line marketing content that’s viewable on screen without scrolling when you first view a web page. Content “above the fold” is visible when the page loads. Content “below the fold” is not. It’s not some kind of origami concept or a new space travel technology.
HTTP Compression. The process where web servers compress files before sending them to the browser, which then uncompresses them. This reduces the amount of pipe used.
Keep-Alive. The setting that tells the server to maintain a connection between your web browser and the site server while you’re browsing, which reduces round trips. The server won’t have to open as many new connections, meaning less processor, memory, and network overhead.
Content Distribution Network, or CDN. A network typically optimized for delivery of “static” information, like images. A CDN uses a network of servers, delivering files from the server closest to the user. That speeds content delivery.
Domain. Your basic web address. For example, our domain is portent.com.
Subdomain. The full web address. Our main subdomain is www.portent.com. We also have things like images.portent.com. The “www” and “images” define the subdomains.
Time to First Byte, or TTFB. The time span between the first client request and the first delivery of data by the server back to that client.
Top-Level Domain, or TLD. Just to make things really confusing, the TLD is everything after the last ‘dot.’ In www.portent.com, “.com” is the TLD. Great for dinner party conversation.
If you’re a normal person who doesn’t spend every day staring at web code and pondering how to shave another 0.5 seconds off of load time, you’re thinking, “Portent, what the hell’s going on with all this CSS and JS and HTML and stuff?”
So, for all you muggles, here’s the quick rundown:
Cascading Style Sheet, or CSS. It’s a language that tells browsers how to make a web page look. Think font sizes, colors, image placement, and the like. ‘.css’ files are a convenient, cacheable way to deliver lots of CSS.
HyperText Markup Language, or HTML HyperText Markup Language. The stuff you use to structure and deliver basic content over the Internet.
PNG and JPG are the two most widely-used file formats while GIF is considered to be slowly declining.
Joint Photographic Experts Group, or JPEG, or JPG. Pronounced jay-peg. JPG files should have the file extension .jpeg or .jpg. JPG is usually best for images with thousands or millions of colors, like photographs. Those tend to be the biggest files, and JPG is a compression powerhouse.
Portable Network Graphics, or PNG. Pronounced ping or pee-en-gee, depending on whose side you’re on. PNGs are ideal for line-art and other images with fewer colors.
Graphic Interchange Format, or GIF. Pronounced either with a hard ‘g’ as in j-if or with a soft ‘g’ as in g-if, who’s to say? Not most industry professionals, that’s for sure. GIFs are mostly used for annoying, endlessly looping video clips. But it used to be the standard for low-color and line art images. PNG has slowly taken over that space.
All of these file types refer to the way the image files are compressed.
JPG is known as lossy compression. It reduces file size by removing data. If images were your refrigerator, JPG would be cleaning out the fridge. That’s why JPG compression is so effective for humongous, many-colored images. It deletes data. That can reduce quality, but done right, JPG compression is nearly undetectable.
PNG is a lossless file format. It works by rearranging data to more efficiently use file space. It’s like those times when you know you should clean out the fridge but would really rather get back to binge-watching your favorite show, so you move things around until you can fit that carton of milk in there. You can turn these into lossy formats by deleting entire colors from images, but that’s a topic we can visit later. For now, assume that properly-used PNG compression leaves images with fewer colors completely unchanged.
We covered a lot of ground in one post, but hopefully these definitions will come in handy the next time you need to decipher some development terms.