Frontend Performance
In today's digital world, there are millions of websites that are accessed every day for a variety of reasons. However, the vast majority of these pages have many problems, such as slow loading, unresponsiveness, or even incompatibility with browsers.
In this article we are going to talk about some tips that can help us improve our websites to get a better performance. As a Frontend developer there is nothing better than seeing our page running smoothly, fluidly and quickly.
Clean up the HTML file
HTML is the “skeleton” of virtually all websties. This allows us to format titles, subtitles, lists, among other features. When we are making our structure we must write it in a concise and effective way. For example, when we reference other resources in our HTML document we must follow some good practices.
Correct placement of CSS
Web designers tend to create the CSS file after the main HTML skeleton is created. As such, CSS components end up being placed in the bottom of the document. However this is a big mistake as the CSS must be placed at the top of our HTML file inside the header. In this way ensuring a progressive rendering of the page.
This practice does not improve page load speed, but it will save visitors from waiting looking to a blank screen while the page is loading.
Correct placement of JavaScript
JavaScript files, unlike CSS, should be placed at the bottom of the HTML file, so that they don't block the loading of HTML and CSS elements. If we put javascript at the top of the page, we run the risk that the visitor will wait for the page to load, having a blank page and will end up leaving the site.
In addition to the above, we should prefer an asynchronous loading of scripts. This will prevent any script from blocking the html rendering process.
Optimize CSS performance
CSS can turn our HTML-based page into a more professional and clean document. Some of the CSS options require HTTP requests, unless we are using CSS along with the HTML elements with the “style” attribute.
An effort should be made to reduce CSS file overhead without eliminating vital features.
For example, if our banner, plugin or layout are using several css files, it will make the visitor's browser to load numerous files at once. Now it's not a big problem anymore thanks to HTTP/2, however it is something that will make the page load time too long.
One of the other big mistakes that are made is using the @import directive to include external files in a website. In addition to being an outdated method, it also prevents browsers from making parallel downloads. Therefore, our best option is the link tag that will help improve the page's performance. Requests made through the link tag do not block parallel downloads.
Reduce external HTTP requests
Most website load times are related to external http requests. The speed that each external resource loads will vary depending on the hosting provider's server infrastructure. The first objective to reduce external HTTP calls is by examine the page with a minimalist look, study each component and eliminate features that will not improve the user experience.
Things you can do to reduce the HTTP requests:
After this cleaning is done, the next step will be to find ways to reduce the weight of the rest of the content.
Minify CSS, Javascript and HTML
Minification techniques help to eliminate unnecessary characters from a file. When we are writing code in an editor, it is natural to use notes and indentations. These methods make our code clean and readable, however they add extra bytes to our document.
We can easily remove bytes from our CSS, Javascript and HTML files using the minification tools.
Enable prefetching
Prefetching can improve visitors's browser experience by fetching resources and related information before they need it.
There are 3 main types of pre-fetthing:
With prefetching, the URL, CSS, images and Javascript are collected for each link before you leave the current page. This ensures that visitors can use the link to navigate between pages with minimal loading time.
Optimize your images
For people who are unaccustomed to the ways of frontend optimization, images can be a website-killer. Massive photo albums and large high-resolution images on your site can jam the rendering process. High-definition images that are not optimized can weigh several megabytes. Therefore, properly optimizing these will allow you to improve your site's frontend performance.
In conclusion...
Frontend optimization can seem intimidating. These are some of the principles that you can use to greatly improve the loading speed of your website. Remember, the faster your website loads, the better user experience your visitors will have.