Ultimate Guide to Page Speed: Glossary

The Portent Team Mar 3 2016

Preface: Let’s make a ruckus
Chapter 1: A Guide To This Guide
Chapter 2: Why Page Speed Matters To Digital Marketing
Chapter 3: What Impacts Page Speed?
Chapter 4: Novice – Image Compression And Such
Chapter 5: Intermediate – Server Compression And Geekery
Chapter 6: Advanced – Varnish, Apache and nginx
Chapter 7: Tools
Chapter 8: Glossary ← You are here
Hidden Track: WordPress Optimization

Random terms to remember for page speed optimization

These are those sundry little phrases we throw into proposals so we can charge more:

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.

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.’ 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.

The fold. The line marketing content that’s viewable onscreen 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.

Time to first byte, or TTFB. The timespan 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.

File types

If you’re a normal person who doesn’t spend every day staring at web code and pondering how to shave another .5 seconds off 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:

CSS Cascading Style Sheet. 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, cachable way to deliver lots of CSS.

JS Javascript. A ‘.js file’ is a separate file that can be included in an existing web page. The javascript in the file ‘fires’ normally, but because it’s in a separate file, it may load faster. It can also be a lot easier to manage.

HTML HyperText Markup Language. The stuff you use to structure and deliver basic content over the Internet.

A quick primer: File formats

There are two widely-used and one slowly-declining file format:

JPEG or JPG (Joint Photographic Experts Group, pronounced jay-peg) refer to the same image format. We’ll use ‘JPG’ in this book. 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.

PNG (Portable Network Graphics, pronounced ping or pee-en-gee, depending on who’s side you’re on) are ideal for line-art and other images with fewer colors. GIF (Generic Image Format) is 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. We won’t talk about GIF compression in this book.

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 refridgerator, JPG would be cleaning out the fridge. That’s why JPG compression is so effective for humungous, many-colored images. It deletes data. That can reduce quality, but done right JPG compression is nearly undetectable.

PNG is a lossless file format. They work 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 way beyond the scope of this book. For now, assume that properly-used PNG compression leaves images with fewer colors completely unchanged.

Where to next?

Preface: Let’s make a ruckus
Chapter 1: How to use this “book”
Chapter 2: Why Site Speed Matters
Chapter 3: What Impacts Site Speed?
Chapter 4: Novice
Chapter 5: Intermediate
Chapter 6: Advanced
Chapter 7: Tools
Chapter 8: Glossary ← You are here
Hidden Track: WordPress Optimization





New Call-to-action




1 Comments

  1. Hey Mohan,

    Good question! You can’t control expiration headers for 3rd party resources, which these are. The only real way is to host them in your environment so you can control their expiration headers. That being said, we definitely do not recommend hosting any Google Analytics files in case they make changes to functionality, etc. Unfortunately, we are at the mercy of some of the 3rd party analytics/metric technologies we use.

Comments are closed.