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