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.
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
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.
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:
We generated several instances of the original images both in the input format JPG and PNG during our building process.
Next, we minimized the generated images.
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.
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 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
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 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.
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.
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.
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.
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.
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.
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.