The New MaxCDN – Built for Design & Speed
December 18, 2012 | Taylor JaskoMaxCDN has gone through numerous revisions throughout the years, but we wanted to do something different... really different. After spending months on end mocking up designs, straggling to get content together and peer checked, and dabbling with code to make things just right, the new MaxCDN.com is finally here, and man is it looking better than ever.
// Just Getting Started: DesignLike any design process, this took many countless revisions to get just right. There were so many ideas bouncing around when we were designing this, we easily had over ten separate designs, but here are a couple of ideas we were testing: Originally, we wanted the site to look somewhat like the original Twitter Bootstrap website; the large buttons and large text headlines seemed to be the latest trend in web design. However, as we are fanatics of minimal design, we combined the header with the main top section, and used very minimal colors. Once we had the right idea, we just went with it and things evolved from there.
// Built for SPEEDAs the new MaxCDN design is a minimal, streamlined web design, we wanted to reflect that in the code. So many websites are not built for performance in mind, which as we all know, causes less conversions due to longer page load. We wanted to change that... and that's exactly what we did. The new MaxCDN website loads in less than a second and does not even hit 300KB for the page size. Think we're doing some voodoo magic? Check out this speedtest from WebPageTest.org! See the stack of six blue lines near the middle? Right after that is when everything is drawn and when the user can see the page to its fullest. That's at .34 seconds! Crazy 'ey? Now let's get into how we managed to do this.
/* The Code */'
Implement all the latest technologies
Minify to the extreme
Code with performance in mind
Many people think past performance in the code itself when developing no matter the language; it's not always better to code things faster just to get things done. There is indeed a technique called "code optimization", especially when programming for the web. The key thing here is reusing the code you currently have other than just creating a new function, CSS class, or even a new div container.
Lookup domain names earlyMost modern browser have support for something called DNS prefetching, which allows you to resolve domain names before you need them. If you have any assets that will be loaded via AJAX after the document load, DNS prefetching can shave quite a few milliseconds of the load time from those assets, as the domain names were resolved before the file was even downloaded.
Don't get frustrated
This might not tie into web performance, but it's more of a developer's tip instead. If you're stuck and you're not sure how to spec out your code to get a certain function to work, don't fret about it. Instead, just work on something else. I've seen really "hacky" code to get things done, and in the long run, it's caused more time rewriting it than thinking things out thoroughly.
/* The CSS Styling */
CSS3 is the bomb
CSS3 is awesome for so many reasons, I could write a book on it. There are new features in CSS3 that allow you to write less code and do more. For example, if you were developing in the earlier days of the web, you probably remember how "hacky" it was to make a rounded button that can scale both horizontally and vertically. The code was a mess, and now with CSS3, you can accomplish the same thing with border-radius. CSS3 even supports hardware acceleration, drop shadows, gradients, and much more. No need for nasty PNG fixes!
CSS Hat is your friend
Once you get your design finalized in Photoshop, you can use a handy tool called CSS Hat to turn your layer styles into CSS3. It makes it super simple and even easier to replicate your Photoshop design to CSS. This tool by itself speeds up my development so much, that it's worth way more than $30 it's selling for to me.
Use a CSS reset
Like we all know, CSS isn't the same implementation across different browsers. This is why some very smart people wrote a CSS reset, to try to fix those inconsistencies. Personally, I've been using Normalize.css for quite some time, and found that it is one of the most accurate CSS resets out there. There is no need to worry about those inconsistencies (IE, I'm talking to you) and you can now focus on what you do best, writing awesome code.
Use responsive design wisely
When used correctly, responsive design can greatly increase the effect of your website on smaller, mobile devices. However, there has been a huge controversy with responsive design and web speed... it's typically not done well. Most responsive websites are over a megabyte in page size, and wouldn't be as slow to load if they did not have the responsive code in there.
The key to good responsive design is to reuse what you already have, not add more. For example, MaxCDN has about 200 lines of code just to handle the responsiveness, which may seem like a good chunk of code. However, MaxCDN was designed in a way to be easily scalable, so most of that code is just overwriting previous values, not creating new ones.
Basically, responsive design shouldn't be a "second version" of your site. You should use the same existing HTML and change it using CSS media queries, and not by having second alternative divs, which I have seen more than once.
Solid colors are not always bad
The whole minimalistic design trend is something entirely new, as before the "Web 2.0" was flashy with a bunch of eye candy. Now, people are starting to keep their web designs simple, and straight to to point (Microsoft really started the trend with Windows Phone 7 & Windows 8). The good thing about this? Less styling, less markup, and less time spent writing code. This means you'll effectively have less code with a more minimal design. And besides, these minimalistic designs just look stunning, compared to what the web was some years ago.
Split up your CSS
To save a bit of space on some of your pages, it can help if your split your CSS file up into more than one file. What we did was made the main CSS file hold everything necessary to display the homepage at its fullest, and have another CSS file to hold the styles for all of our subpages. This saved us around 5KB on our home page, which might not be that much, but it's better than nothing!
/* The Images */
Start using spritemaps
There is a technique called sprite mapping, which allows you to add combine multiple images into one. Then on the CSS side, you simply specify the coordinates of the top left corner of the image you want to use and its width. But of course, no need to do this manually! There's a handy tool on the web called Sprite Cow that can generate those coordinates for you. For combining the images into one, I typically do it manually in Photoshop, but you can use a Mac application called Sprite Master Web as well. I have not used Windows in years, so I'm not up to date on the best Windows tools to combine images. Do you have one?
JPGs aren't always the best
Keep in mind, this is not 2003; all modern web browsers have full support for PNG and their alpha-channel. Back in the early days, JPGs were used nearly all the time due to their smaller file size (despite the huge compression issue making icons look terrible) and that alpha PNGs could only be used in IE with a nasty PNG fix. For photos, JPGs are amazing and the compression issues are not an issue as it's hard to tell, but as the web is getting more and more minimal with simple icons, JPGs just don't cut it anymore. The PNG format can heavily reduce the file size of your icons and if the icon isn't too complex or has no transparency, PNG-8 works wonders.
Optimize your images
Photoshop loves to save extra metadata in your images by default. Luckily though, in the "Save for Web" dialog, you can set the "metadata" to "none" in a simple drop-down. However, you can do much more. There is an amazing tool for the Mac called ImageOptim that can significantly reduce the file size of your images. Image optimization is fairly complex, so this application combines several programs into one, giving you a really advanced, elegant image optimization tool.
SVGs can save you bandwidth
With the minimalist design of MaxCDN, the majority of images we used came from vector paths. Vector images are notoriously small due to the image be represented with relative paths, and not pixels. This way, no mater how large you make the vector on the screen, it will remain the same file size. You can use vector images using a handy file type that's fairly new to the web called SVG, or Scalable Vector Graphic. If you have an image open in Adobe Illustrator, there's a nice setting in the save menu to export as a SVG. Keep in mind, the exported SVG will have a ton of metadata from Illustrator, so you can strip that out with a tool like Scour. As SVGs define the paths in XML, you can easily edit these files manually as well, which is what I do to strip the files down to the bare minimum. Not only are SVGs smaller, they can even scale nicely with higher-DPI monitors, like the retina MacBook.
SVGs can hurt you
SVGs can be significantly smaller than their PNG-8 counterparts, but they can also be significantly larger, depending on the complexity of the paths. If you're a vector artist, you may be able to optimize these paths in Illustrator or Inkscape, but sometimes, you have to use the PNG version.
Inline SVGs into CSS
SVGs can be easily inlined by converting them to base64 and using data:image/svg+xml;base64, [SVG file]) for your background. This way, you do not need to have extra HTTP requests for every individual SVG. You might be thinking to put the SVGs in a spritemap, but sadly, it's easier said than done at this current point in time. Though, inlining SVGs into the CSS document itself might increase the page size by just a tad. But I personally go the Steve Souders method and add a few more kilobytes than having many more HTTP requests, as every request needs to be "initiated" with the server. Although, there is one thing that goes a little in UX by adding all SVGs into the CSS file directly. When you do this, as soon as your CSS file is downloaded and parsed by the browser, all of your content will be displayed and styled in a flash, instead of waiting for every image to load in the background. This makes the user perception of the site seem faster, even though you may be downloading a few kilobytes more. Having everything show up once is always better than having it show up in the coarse of a few seconds.
This might sound obvious, but do not let the browser download extra images than what it needs to. As MaxCDN uses SVGs nearly everywhere, you still need to add backwards compatibility with PNGs. So what we did is used a tool called Modernizr that gives us the ability to check if the browser has SVG support, and if it does, show the SVG images, and if it does not, show the PNGs. This system is also easy to implement, as it will add a "svg" or "no-svg" class to the body, allowing you to easily use the classes in your CSS file to determine what the browser has support for (body.svg or body.no-svg would be the starting point of your selector).
/* The Server & Network */
Cache, cache, and cache!
With our WordPress web host, WP Engine, they have a back-end system composed of a very specific setup tailored to WordPress to cache practically everything, allowing for a fast, speedy HTTP session. They even go further out, and cache the MySQL database in Memcached to allow for speedy database lookups.
You can use a nice WordPress plugin called W3 Total Cache that will cache WordPress to the extreme, databases and even object cache. If you have a dedicated or virtual server, install Memcached and allow W3 Total Cache to store this data into Memcached, as it über fast. WP Engine does all of this for us automatically, so there is no need for us to use W3 Total Cache.
Web servers have a feature called keep alive, that simply allows the HTTP session to stay open for a bit after all the requests are made. This way, all AJAX calls you may have in the backend do not need to "connect" to the server as the HTTP session is kept alive. All modern web servers have this functionality, so just look up on how to add it! Keep in mind, if you are are on a shared host, you may have to ask them to enable keep alive for you, as it is a server-specific feature, and not changeable in Apache's .htaccess file.
Cache-Control header goodness
HTTP/1.1 implemented Cache-Control that allows the browser to know when to clear the cache of a file, or keep it for a certain period of time. When this is used in conjunction with an HTTP accelerator like Varnish, it can speed up any additional requests by the browser after the first page load, as it knows what to use in the cache and what to re-download again.
CDNs are awesome
When you are using a CDN like MaxCDN to help speed up your website, all files are being delivered to the user from the closest server. This in turn allows for a low-latency connection for all of your static assets.
As MaxCDN.com is a pretty static site in general and it won't be updated every day, we can even go all out with full-site acceleration on the CDN using EdgeRules. This way, the entire website can be served from a CDN, allowing for a super-fast connection.