Wisdom Behind Our Site Quicker Than Yours


Website design plays an integral role in creating a good relationship between your business and users. Thus we had focused on a lot of technical stuffs for deploying websites that are faster and also flexible. On successful completion of it, you can definitely go for writing contents for your websites.

Design Overpowering Performance

Website layout, images, interactivity and contents play a vital role in gaining a good end user feedback. But while we deliver such interactive contents, many tend to forget about the page load. So we tend to concentrate in deploying these services with minimum impact on performance.

Content Leads

We stay focused in serving the core content to the end users actively. In sense, we try to provide our visitors with essential CSS and HTML as quickly as possible. The core content is superior to the web fonts, analytics, images and complete CSS.

Take over Authority

Even after defining the overall standards for our website, we were wanted to have an overall control over each and every aspect of our site. Thus this led us to create our own static website generator and also host it by our self.

Static Website generator

The static site generator for our website was written using Node.js. The Node.js hauls files with brief JSON page Meta descriptions, in order to generate overall site structure possessing all of its assets. It can also be followed by a HTML file in order to include page-specific JavaScript.

Image Dispatch

An average webpage is composed of a massive size of 2406kb out of which around 1535kb are occupied by images. The images hold up such whopping part of an average webpage but they also tend to be the complete target for winning over performance.

WebP

WebP is a new image format designed to provide lossy and superior lossless compression for images on the webpages. The images produced by it can be significantly smaller than images of other formats. Many people tend to overlook it, due to its limited browser support.The <picture> element is used by people to degrade images gracefully from WebP to a well known supported format such as JPEG. We have been using picturefill in order to polyfill browsers that do not support the<picture> element and use the <img> for those browsers that do not support the <picture>element and also the JavaScript.

Produce

Though the image delivery approach perspective was in track but still wanted to discover the way to implement it with ease. The following will discuss on the steps taken to resolve this issue:

1. Generate

We generated several instances of the original images both in the input format JPG and PNG during our building process.

2. Minimize

Next, we minimized the generated images.

3. Write

Then we wrote the description of the images in the markdown files.

4. Custom Generated

In order to compile markdown image declarations to full developed <picture>elements, we employ custom written Markdown renders.

SVG

Our website employs a different graphic style in which SVG play a vital role. This was implemented for the following reasons:

1. SVG vector images are quite smaller than bitmap images.

2. SVG scale down perfectly and always stay crisp, so here the question for <picture>elements and image generation does not arise.

3. Finally, we can alter and also animate them by using CSS. Our portfolio pages and overview page have a custom generated animated SVG in order to make the design unvarying and also to minimize the impact on performance.

Customized Web fonts

Before going deep on web fonts, let us discuss about a common issue faced by end users. Whenever a browser detects a @font-face definition in CSS, which points to a font that is not built on the user’s computer, then the browser would tend to download it. But while this process takes place, the web browser will not display the text using this font file that is being downloaded. This situation is called the FOIT/ Flash of Invisible Text, which is really not good for the end-user experience. It delays their ultimate goal of reading the content. We tackle this situation, by forcing the web browser to change its action into FOUT/Flash of Unstyled Content. The browser will display the text in a universally available font like Georgia or Arial before the custom web font is downloaded. If the download fails, still the text is available for reading in the universal font. Using customized web fonts can definitely benefit the user experience but also without it the website works 100% fine. You can check or uncheck our custom font checkbox, to view it.

Subsetting Font

Subsetting is one of the best way to improve the overall webfont performance. If you are using custom fonts and have complete control over the content then you can opt subsetting. You can have a huge impact on your file size, when choosing to subsetting your font to “Western languages”.

Check on Font Load

Font face observer is a helper script to make sure whether the fonts are loaded properly. On confirmation, we include a class called fonts-loaded to the <html> element. We set a cookie in the browser’s cache to recollect that all the fonts are loaded properly. The CSS Working Group has presented a latest @font-facedescriptor known as font-display. In this descriptor, the property value controls how a downloaded font renders before being completely loaded. The css statement called font-display: swap, would result in behaving similar to the one discussed in the approach above.

Slow load JS and CSS

Slow load JS

Our webpage design, do not have a lot of JavaScript. We have developed a JavaScript workflow, for what we do have and also what we intend to use in days ahead. The JavaScript in the <head> blocks rendering and one way to resolve this is to place the script in the tail of the webpage. Alternatively, you can append the script to the head and then including the defer attribute to the <script> tag in order to defer the script execution. Thus now the script is non-blocking since the browser downloads it instantly, without the need for executing the code until the webpage is loaded.

We do not employ libraries such as jQuery, so our JavaScript depends entirely on vanilla JavaScript features. We would like to load JavaScript in web browsers that only support these features.

Slow load CSS

Only after the complete CSS file referred in the <head>is downloaded and also parsed, the web browsers render the page. To prevent this from happening, we use the loadCSS function, which will trigger you when the CSS file is loaded. But unfortunately here, the HTML will look normal with no CSS applied at all, until the full CSS is downloaded and also parsed. It is here, where the serious CSS is required.

Serious CSS

Serious CSS can be explained as the small amount of blocking CSS in order to make a web page appear perceptible for the user. Today many nifty scripts exist for generating serious CSS. Below you see our homepage rendered with serious CSS and also with the full CSS.

Server

We wanted to investigate, how we can increase the performance by changing over server configuration. We have an Apache web server and also serve our website over HTTPS.

Configuring

To boost up the security and performance we experimented on how to configure the server. This led us to choose, H5BP boilerplate apache configuration, to improve the security and performance. We chose GZIP for many of our CSS, JavaScript and HTML.

HTTPS

Serving your website over HTTPS can have a performance impact for your website, which is mostly from setting up the SSL handshake. We shall counteract that efficiently.

Saving Roundtrip

HTTP Strict Transport Security is a known HTTP header, which lets the server tells the web browser that it should be conversed only with HTTPS. This helps in reducing the HTTP requests from being redirected to the HTTPS. This efficiently saves a roundtrip for us.

TLS False Start

It permits the client to send encrypted data only after the first TLS roundtrip is achieved. This instantly reduces the handshake overhead for the new TLS connections.

TLS Session Resumption

This significantly saves us another roundtrip by confirming that if the server and the browser have communicated over TLS in the past, the web browser remembers the session identifier and thus ultimately the next time it sets up a connection, it reuses the identifier, thereby saving a round trip successfully.

Employing Cookies

We do not have a server side language but have a static Apache web server. However an Apache web server can still do server side functions and also read cookies.

File Caching

We depend solely on browser caching for repetitive views but we need to be sure, whether we cache them properly. We would require to cache all or assets permanently but invalidate the cache only when a file changes. There are two scripts namely; gulp-rev-replace and gulp-rev add revisioning for each file by simply adding a content hash to the filenames. Thus the request URL only changes upon when the actual file has been changed.

Outcome

Now at the end, you can probably test the performance of your site using tools like, WebPagetest and PageSpeed Insights. The best way to test your website rendering performance is by viewing how your page starts up when killing your connection. The following image shows, how our homepage loads on a throttled connection. The custom fonts are not loaded on slow connections but the font face observer takes care of this automatically.

+ There are no comments

Add yours