Post

← Blog

Getting your website ready for takeoff

Over the past few years JavaScript, browsers, and the entire Web have evolved a great deal. But the main goal of building applications has stayed the same - get it ready for real users. While there is no universal recipe for preparing your website for release, with each project we encounter the same challenges. So here at Innvation, we would like to share the list of tasks that we follow to ensure a smooth product release.

Optimize your assets

The biggest bottleneck of your web application could be ignoring assets optimization.

Minify/uglify

Make sure that you have minified/uglified your JavaScript and CSS code, without this a user can wait a very long time before something proper is shown. This directly affects page the load time, and the longer a user waits - the less likely he will stay or come back later.

Critical-path CSS

Consider using Critical-path CSS to extract styles that will be shown to the user at the beginning and load the rest of the CSS later.

“CSS is required to construct the render tree for your pages and JavaScript will often block on CSS during initial construction of the page. You should ensure that any non-essential CSS is marked as non-critical (e.g. print and other media queries) and that the amount of critical CSS and the time to deliver it is as small as possible.”

https://github.com/addyosmani/critical

Reduce image sizes

Ilya Grigorik in his article explains why it is necessary to optimize images:

Images often account for most of the downloaded bytes on a web page and often occupy a significant amount of visual space. As a result, optimizing images can yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen.

SVG files often contain a lot of unnecessary information, such as layer information, comments and XML namespaces that could be removed without affecting SVG rendering in a browser. In this case, you can clean your vector files with a tool like svgo.

You can compress raster images by using lossless or lossy image compression which can significantly reduce file size resulting in faster image loading for the user.

Optimize delivery

Configure your server (NGINX, Apache) to use gzip and compression. Gzip compression will significantly reduce file size. With cache server enabled stored content can be returned without contacting any other servers.
Also, now HTTP2 is supported in all modern browsers and you can use it alongside HTTP1.1 to serve resources faster by reducing the number of requests.

Load async

First - place your script tags immediately before the closing </body> so it won’t block the rendering of HTML that is above it. This works in all browsers. Consider using async and defer script tag attributes that are supported in all modern browsers. The async attribute indicates that if possible the browser should execute the script asynchronously. Defer is like async but the browser will run scripts when the page is finished parsing and then runs in the order that they were included on the page.

Mobile friendly

Each year more and more people use smartphones and tablets. When developing a new website these devices can’t be ignored and your mobile site should be made responsive. Prepare your markup and styles to deliver a better UX on different screen sizes. Don’t stick to one screen size, it can look ugly on different sizes, which can adversely affect user activity on mobile devices. Discuss with the designer when and what should be shown and define breakpoints when the view is changed for different screens. Don’t forget about screen orientation and update margins properly when orientation is changed so the user can have a better UX whichever way they hold their mobile device.

Different devices, browsers, and systems

Browsers are cross-platform applications which mean that the same code could be run on different devices and platforms. Don’t forget to test your website on the most common browsers, devices, and platforms because the same website may work fine on Windows Chrome Desktop but not on iPhone Safari. Each system, device, and browser has differences so it’s better to double-check that every works properly before a user contacts support.

Support images for HDPI displays

If you have a high-resolution display, let’s say Retina, you probably have encountered issues with image rendering. That is because some raster images won’t scale properly on those displays. The solution is to use vector graphics which will have proper automatic picture scaling. But sometimes you can’t avoid using raster pictures. In that case, you can prepare an x2 icon and then use it on HDPI displays.

Favicons

If you thought that a browser uses a single favicon file - you would be wrong. Different browsers, systems, and screen density can affect what favicon would be requested from the server. To support most browsers and platforms, you need more than a dozen pictures. Instead of doing separate icons manually you can use a favicons generator, like http://realfavicongenerator.net/.

Social networks

If you would like to share your website on social networks like Facebook or Twitter and have a nice preview then you'll have to put info into specific meta tags. Each social network has different tags that it supports. For example, Facebook looks into tags that have an attribute property that starts with og:
<meta property=”og:{tagName}” content=”{tagValue}” />

On the other hand, Twitter uses another attribute name that starts with Twitter:
<meta name=”twitter:{tagName}” content=”{tagValue}”>

Different social networks have different format specifications. For example, an image for a Twitter summary card should support an aspect ratio of 1:1 with minimum dimensions of 144x144 or a maximum of 4096x4096 pixels and must be less than 5MB. On the other hand, Facebook’s minimum image size is 200 x 200 pixels and for small images (smaller than 600 x 315 px) you should keep your images as close to 1.91:1 aspect ratio as possible to display the full image in the News Feed without any cropping.

Before you make your website public it’s recommended to validate it with proper tools, for Twitter https://cards-dev.twitter.com/validator, for Facebook https://developers.facebook.com/tools/debug/.

Summary

By completing these tasks before the release of your website you will avoid many problems that often arise. For your convenience, here they are in checklist format:

  • various operational systems (Android, iOS, Windows, Mac OS X, Ubuntu, etc.);
  • different browsers (Chrome, FireFox, Safari, Microsoft Edge, Microsoft IE);
  • mobile friendly;
  • proper view on desktop, tablet, mobile screen sizes;
  • landscape, portrait screen orientation;
  • optimize images and icons;
  • support images for very high-resolution displays (Retina, etc.);
  • prepare favicons for all devices;
  • include meta tags like title, description so search engines will show needed info about your website;
  • meta tags for social networks (Open Graph, Twitter Card);
  • optimize, uglify, minify your code before shipping website;
  • load assets asynchronously;
  • and it should be fast, as much as possible;

NB: In our ever-changing digital world this list will be updated as needed.