QUESTIONS?

Updates & insights on all things CDN

The New MaxCDN – Built for Design & Speed

MaxCDN 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: Design

Like 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 SPEED

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

// How We Achieved a .50s Page Load

There are literally a ton of factors how we changed to get such a fast page load. To break it down, we'll discuss what we did with the code itself, CSS styling, JavaScript, server/hosting, and the images to achieve this incredible page speed.  

/* The Code */'

Implement all the latest technologies 

HTML5 and CSS3 were heavily used to develop and design MaxCDN. HTML5 allowed us to streamline the code as not only does HTML5 have a shorter document type declaration, it also has native support for asynchronous JavaScript and is more lighter than its brother, HTML4.

   

Minify to the extreme

As we built the new MaxCDN site off WordPress, the WP Minify plugin allows us to automagically combine the JavaScript and CSS declarations into one file. Not only does this reduce HTTP requests, which is part of the amazing Steve Souders 14 rules, it also removes all the white-space in the file, dropping the file size just a tad. WP Minify also minifies all the HTML, thus effectively decreasing the file size of the entire website by a good chunk.

   

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.

If you can write a container in HTML using one div instead of three, do it. If you have to use multiple nested containers, figure out a way to get around it. The DOM parsing isn't the fastest thing in the world (especially when doing any sort of DOM manipulation/searching in JavaScript), so if you can streamline your code, it'll speed things up a bit. Don't complicate things, if you can reuse a CSS class, do it. And if you need to make some changes, you can always add more classes to the div!

   

Lookup domain names early

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

   

Be smart 

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.

   

Use keep-alive

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.

   

Crunch crunch!

For all your non-compressed files on your site, like CSS, JavaScript, and HTML, you can greatly reduce their file size by enabling Gzip (mod_deflate on Apache and simply gzip on Nginx), which compresses your files before being delivered. If you do not know if Gzip is enabled, you can check the Content-Encoding header, and if there is a value of "gzip", your site is already being compressed! Keep in mind, if you are running a low-powered server that is being hit hard, Gzip might have a negative effect for you. As all assets are dynamically compressed, the compression can take quite some power. In this case, I'd recommend installing an HTTP accelerator like Varnish or even Squid to cache your compressed assets before being delivered.    

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.

 

// Tiny things add up

All of these tiny optimizations added up into a super-fast, high performance website, that is now the new MaxCDN. Applying all of these changes is always easier done while creating the website, than compared to rewriting your current one. The new MaxCDN was written from the ground up, abandoning all previous code that has been written. This way, we can focus on these performance tips easier than perfecting old code. I hope this article has informed you of all the speed-up tricks we used on MaxCDN to make it super fast, but if you have any more tips or any comments, hit us up in the comments below!  
  • http://twitter.com/websitesaleslab Website Sales Lab

    Awesome work! .5 of a second load time.. amazing

    • tjasko

      We just kept on trying to squeeze every little byte off the site. It eventually came to a point of a “are we really seeing this” kind of moment.

      • http://twitter.com/websitesaleslab Website Sales Lab

        Like!

  • guest

    This page took 4.5 seconds to load.

    • http://mover.io/ Eric Warnke, Mover.io

      This isn’t the website in question.

  • Chris

    nice job on the post TJ!

    • tjasko

      Thanks Chris!

  • http://www.quickonlinetips.com QOT

    Amazing tips here. Glad you shared your speedy tips with the community.

  • Mariken

    Thanks. Great post!

    • tjasko

      Thanks Mariken! :)

  • http://twitter.com/josephrobison Joseph Robison

    This is absolutely amazing, a great step by step guide for speed, speed, speed. Cloudflare must be your competitor, but what are the differences in the offerings, what with Cloudflare being free for smaller users?

  • http://twitter.com/JulianHearn Julian Hearn

    Hi 0.5 seconds is very impressive, but what happened with this page? I just ran a test and it came out at 36 seconds, looks like you need to optimise your images. http://www.webpagetest.org/result/121220_5G_BYF/

  • http://nyc.locationscout.us rrhobbs

    cleanup on line 1 “has went” = “has gone” = picky, picky, picky

    • tjasko

      Thanks Richard for pointing that out. Sorry about the wrong tense. :)

  • http://www.wordimpressed.com Devin Walker

    Wow, this is a really super post. Fast and furious!

    • tjasko

      Hehe, we definitely feel the need for speed!

  • Dennis Lowe

    Since the 18th December my website has been empty of videos, something got deleted that I was using there namely jwplayer whos location was:
    http://www.maxcdn.com/jwplayer/player-viral
    Can you put it back please?

  • chronicler_Isiah

    I thought current thinking was to have all css in one file so as to cut down http response header requets?

    • tjasko

      You raise a really good point. If you wanted to take the split CSS method approach, you could minify all the CSS files together that is applicable for that page. Only problem with this is that the user will have to download a new CSS file if they go to page on the site that uses another CSS file, even if the same like-styles have been downloaded, but with just a few changes.

      What we did is minify all of our CSS but one file we call”other.css”, which is included on all subpages (as the homepage does not need this styling). This keeps our homepage loading fast, and the user perception of speed when loading a subpage is still quick as the first CSS file is already downloaded. So practically, if you load a subpage right after the homepage on a clear cache, there will be a quick flash of content to be styled. If we minified all the CSS files together, there would be a bit of a delay as the CSS file would be treated as a completely new file for the page, which in reality, there is only ~5KB out of the whole file that has been changed.

      Best advice we can give is try to think of user perception of speed than just actual speed.

  • http://kidakaka.com/blog Prasad

    Awesome set of tips! Man, all the points you hit are spot on!! I am definitely going to give each of these a try! THanks!!

    • tjasko

      Thanks Prasad! :)

  • http://www.poweredbysearch.com/ Dev Basu

    Taylor you’ve done an amazing job at explaining the different ways of making any site load so quickly. We’re on WPEngine too but are clocking in at 7-8 seconds (I know it’s terrible) load time for first page loads. Most of this is being caused by 3rd party scripts that we use (Wistia, Sharethis, Facebook, Infusionsoft etc) but I’ve been trying to figure out more ways to squeeze out performance on our site. We’re also using a CDN and have worked on expires-headers so 2nd time visits to the site are faster. Thanks again for these great tips. I know we’ve got room to speed things up with CSS sprites and other techniques you’ve discussed.

    • tjasko

      Thanks Dev! You might want to take a look into Socialite.js. I think you may like it! :)

  • http://www.facebook.com/brian.rasmusson Brian Rasmusson

    When I tested it, it took 2.3 seconds to load, ~1.3s to start rendering..

    http://www.webpagetest.org/result/121225_7A_DE3/1/details/

    CSS sprites are not used either.

    What happened?

Increase Your Website Speed

If You Use Under 15TB/month MaxCDN is for You. It Has:

  • High Performance
  • Easy to Use Control Panel
  • Easy to Setup
  • Low Monthly Fee
LEARN MORE

Recent Posts

  • Behind The Scenes: tools.maxcdn.com
  • MaxCDN Update on CVE-2014-0160 aka Heartbleed
  • Now Shipping: tools.maxcdn.com
  • Now Shipping: Recipes for EdgeRules
  • Custom Charts from the MaxCDN API

Compare the speed of two websites in 5 seconds.

100% Free

Start Testing
TRUSTED BY