Archive
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
How The New H3XED Website Loads In 380 Milliseconds
Jul 31, 2014Web DevelopmentComments (0)
When developing the new H3XED website, I had one primary goal: Give users the content they're looking for as quickly and unobtrusively as possible. To facilitate this, I needed to make the site load extremely fast, have the fewest barriers to content, and work seamlessly and simplistically across all commonly-used browsers.
I have always been an advocate for content over design, but it can be a challenge to make a website that still looks visually appealing and isn't too minimalist. Having a bad-looking design can be distracting in its own way, even if the content is readily available. Here are some key areas that I approached diligently to accomplish this goal:
To make the site fast but still look alive, I decided to use color, gradients, and subtle drop shadows, while having no images or external includes (other than Google Analytics and the images found on blog posts). Images and icons can really bring a site to life, so not using them at all required many revisions to get the design looking right.
I started initially in Photoshop, but quickly moved into CSS, constantly tweaking values and trying new things. I borrowed a bit of inspiration from Google Material Design with the subtly-isolated boxes and drop shadows.
Having no images cut down on the HTTP requests majorly, which is one of the biggest performance bottlenecks for websites.
If you take a look at the source code of this website, you'll notice that all HTML and CSS is minified. This cuts a good 20 to 30% of the file size out right away. With the right setup it's very easy to maintain as well. The server-side code takes care of the HTML minification (there are no line breaks, tabs, or meaningless spaces to start with) and a minified CSS file is created from my CSS Minifier.
Furthermore, there's no framework bloat to be found, as the site is not built off of something like Twitter Bootstrap or Wordpress.
The file size of the homepage is around 5KB plus Google Analytics, which brings the total to around 20KB.
I decided to embed the CSS into the HTML directly, instead of using an external include, based on my past usage data and the size of the CSS. Because the CSS is so small, and most users will be arriving here without any cached data from my servers, embedding the CSS makes a noticeable performance improvement on first visit.
When it's all said and done, the new H3XED website loads in 380 milliseconds using GTmetrix testing. This will vary based on your location. Here is the performance report:
GTmetrix Performance Report
Page load time: 0.38s
Total page size: 15.0KB
Total number of requests: 2
I have always been an advocate for content over design, but it can be a challenge to make a website that still looks visually appealing and isn't too minimalist. Having a bad-looking design can be distracting in its own way, even if the content is readily available. Here are some key areas that I approached diligently to accomplish this goal:
Color and Gradients
To make the site fast but still look alive, I decided to use color, gradients, and subtle drop shadows, while having no images or external includes (other than Google Analytics and the images found on blog posts). Images and icons can really bring a site to life, so not using them at all required many revisions to get the design looking right.
I started initially in Photoshop, but quickly moved into CSS, constantly tweaking values and trying new things. I borrowed a bit of inspiration from Google Material Design with the subtly-isolated boxes and drop shadows.
Having no images cut down on the HTTP requests majorly, which is one of the biggest performance bottlenecks for websites.
File Size
If you take a look at the source code of this website, you'll notice that all HTML and CSS is minified. This cuts a good 20 to 30% of the file size out right away. With the right setup it's very easy to maintain as well. The server-side code takes care of the HTML minification (there are no line breaks, tabs, or meaningless spaces to start with) and a minified CSS file is created from my CSS Minifier.
Furthermore, there's no framework bloat to be found, as the site is not built off of something like Twitter Bootstrap or Wordpress.
The file size of the homepage is around 5KB plus Google Analytics, which brings the total to around 20KB.
Embedded CSS
I decided to embed the CSS into the HTML directly, instead of using an external include, based on my past usage data and the size of the CSS. Because the CSS is so small, and most users will be arriving here without any cached data from my servers, embedding the CSS makes a noticeable performance improvement on first visit.
Results
When it's all said and done, the new H3XED website loads in 380 milliseconds using GTmetrix testing. This will vary based on your location. Here is the performance report:
GTmetrix Performance Report
Page load time: 0.38s
Total page size: 15.0KB
Total number of requests: 2