Faster and More Accessible: The New advancedwebranking.com

We’ve recently launched the new advancedwebranking.com, and we’re pretty excited to share it with you.

One of the things we were aiming for was to unify the site with our updated branding, but more precisely, we focused on improving the accessibility, organization and performance. This translates into faster load times, less data burden, and a more consistent and better experience overall.

We started over from scratch

We gave up on our oldie in-house static files generator and chose Jade (lately known as Pug), which is a Node template engine.

Jade is accompanied by Gulp, the build system we chose to be in charge of all sorts of tasks such as:

• Compile the Jade files into HTML files.
• Compile the SCSS files and add vendor prefixes using Autoprefixer.
• Extract and inline critical CSS in HTML pages.
• Uglify the JavaScript files.
• Minify PNG, JPEG, GIF and SVG images.

HTML

One of the main targets we had was to achieve a clean, beautiful and SEO-friendly markup that validates successfully too. We think it turned out perfectly.

CSS

The old site’s CSS had thousands of rules, declarations, and unique values resulting in a not-gzipped file size of 117 kB. Now, we cut it down to 22KB and 6.2KB gzipped.

Also, we extracted and inlined critical-path CSS in HTML pages using the awesome Critical tool. Critical CSS refers to the CSS that is required to paint the top section of a page, so the main idea is to inline the critical styles and fetch the rest in a non-blocking manner.

A11Y

In terms of accessibility, we tried to follow the best practices and guidelines required by any good web accessibility checklist:

• Declare a language attribute on the html element to enable screen readers to read out the text with correct pronunciation.
• Use semantic headings and structure for a good document outline and a proper semantic search optimization.
• Ensure links are recognizable and have a :focus state
• Use appropriate alt text for both screen readers and search engines.
• Define roles as banner, navigation, or main for the document’s content regions.

SVG

One of the most costly actions in terms of load time on the web in general is the HTTP request. So it was clear that reducing the number of these requests was one of the top priorities.

With the new site, SVG became the main image format we chose to display icons and other graphics. The icon sprite system we’ve built uses <symbol> and <use> to access these icons.

Roadmap

There’s always more work to be done when it comes to improving performance and accessibility, but we’re proud of the improvements we’ve made so far.

We’re constantly iterating and in the near future we’ll be focusing on things like:

HTTP/2

Comparing to HTTP/1.x which is ordered and blocking, HTTP/2 is fully multiplexed. It uses one connection for parallelism, therefore making HTTP requests very cheap.

HTTP/2 is backwards-compatible with HTTP/1.1 so it’s all about progressive enhancement in here. We’re looking forward to Amazon’s EC2 to support Apache’s mod_http2 module.

CDN

We’re seriously considering to move to a CDN to host our static assets in order to improve the speed at which the content is delivered to our users.

That’s It!

That’s pretty much it for now, we’d love to hear what you think of the new advancedwebranking.com!