Frontend Optimization - 9 Tips to Improve Web Performance
In today's digital world, there are millions of websites accessed every day for a variety of reasons. Unfortunately, many of these websites are clunky and bothersome to use. Poorly optimized websites are plagued with a variety of issues including slow loading times, being non-mobile ready, browser incompatibilities, and so on.
This post will go over useful techniques you can use to help improve your frontend optimization. By focusing on clean code, compressing images, minimizing external requests, implementing a CDN, and a few other methods, you can dramatically increase the speed and overall performance of your website.
1. Clean up the HTML document
HTML, or hypertext markup language, is the backbone of nearly every website. HTML allows you to format webpages with headings, subheadings, lists, and other useful text-organizing features. With the most recent updates in HTML5, you can also create attractive graphics.
HTML can be easily read by web crawlers, so search engines can be updated with your website's content in a timely manner. When dealing with HTML, you should strive to write in a manner that is both concise and effective. Additionally, when it comes to referencing other resources within your HTML document there are a few best practices you should follow.
Proper CSS placement
Web designers tend to create CSS style sheets after the main HTML skeleton of a webpage has been created. As such, CSS components are sometimes placed near the bottom of the document. However, it is recommended to put CSS at the top of your HTML document's header in order to ensure progressive rendering.
<head>
<link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css'>
</head>
This strategy will not improve the loading speeds of your website, but it will keep your visitors from waiting on blank screens or seeing a flash of unstyled text (FOUT). If most of your webpage's visual elements are already loaded, visitors will be more likely to wait for the entire page to load, thus improving your frontend optimization. This goes hand-in-hand with perceived performance.
Proper JavaScript placement
On the other hand, if you place JavaScript attributes within the head tag or near the top of the HTML document, you will block the loading process of HTML and CSS elements. This mistake can cause visitors wait on a blank page, and therefore may impatiently abandon your site. You can avoid this issue by placing JavaScript attributes at the bottom of your HTML.
Additionally, when using JavaScript you should always prefer async script loading. This will prevent any <script> tags from blocking the HTML rendering process in the event that it does come across one in the middle of the document for instance.
While HTML is one of the most valuable tools available to web designers, it is often used with CSS and JavaScript attributes that can slow down your webpage. CSS and JavaScript attributes can transform your webpages for the better, but you should take special care and use them appropriately. A good practice with CSS and JavaScript is to avoid embedding the code. When you embed code, you place CSS in a style tag, and you use JavaScript in script tags. This increases the amount of HTML code that must be loaded each time your webpage is refreshed.
Combining files
In the past, you may have combined frequently used CSS scripts into a single file so that you could simply reference one file within your HTML code instead of many. This was a sound practice when using the HTTP/1.1 protocol, however is no longer necessary.
Thanks to HTTP/2, you can now take advantage multiplexing to send and receive HTTP requests and responses asynchronously via a single TCP connection.
This means that you no longer need to combine scripts into a single file.
2. Optimize CSS performance
CSS, or cascading style sheets, can be used to transform your HTML-based content into a clean and professional document. Many CSS options require HTTP requests (unless using inline CSS), so you should make an effort to minimize bloated CSS files without eliminating vital features.
If your banner, plugin, and layout link styles are all located in separate CSS files, this will require your visitors' browsers to load numerous files at once. Although now less of a problem thanks to HTTP/2, this can certainly still attribute to longer load times if the files are loaded from external sources. Read our WordPress Performance article to see how reducing HTTP requests improved loading times dramatically.
Additionally, any webmasters mistakenly use the @import directive to include external style sheets on a webpage. This is an outdated method, and it prevents browsers from performing parallel downloads. The link tag is your best option and will also improve the frontend performance of your website. Furthermore, external style sheets requested with the link tag do not block parallel downloads.
3. Reduce external HTTP requests
In many cases, a large portion of a website's load time comes from external HTTP requests. The speed at which an external resource loads can vary depending on the hosting provider's server infrastructure, location, etc. Your first goal when reducing external HTTP requests should be to examine your website with a minimalist outlook. Study each component of your webpages, and eliminate any features that do not improve the experience of your visitors. These features may be:
- Unnecessary images
- Unnecessary JavaScript
- Excessive CSS
- Unnecessary plugins
After you have eliminated the clutter, find ways to trim the weight of your remaining content. Compression tools, CDN services, and prefetching, as explained below are your best options for managing HTTP requests. Additionally, check out our guide on how to reduce DNS lookups which goes hand-in-hand with reducing external HTTP requests.
4. Minify CSS, JavaScript, and HTML
Minification techniques can help you eliminate unnecessary characters within a file. When you are writing code in an editor, you likely use indentations and notes. These methods certainly keep your code clean and readable, but they also add extra bytes to your document.
For example, this is a code snippet before minification is applied.
.entry-content p {
font-size: 14px !important;
}
.entry-content ul li {
font-size: 14px !important;
}
.product_item p a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
And here is the same snippet after minification has been applied.
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
You can easily trim the bytes in your CSS, JS, and HTML files by using a minification tool. For more information on minification, read out complete post How To Minify CSS, JS, and HTML.
5. Enable prefetching
Prefetching can improve your visitors' browsing experience by fetching necessary resources and related data before they are needed. There are 3 main types of prefetching:
- Link Prefetching
- DNS Prefetching
- Prerendering
With prefetching, the URL, CSS, images, and JavaScript are gathered for each link before you even leave your current webpage. This ensures that visitors can use links to navigate between pages with minimal loading times.
Fortunately, prefetching is easy to enable. Depending upon the type of prefetching you want to enable, you can simply add the rel="prefetch", rel="dns-prefetch", or rel="prerender" tag to your link attributes within your website's HTML.
6. Increase speed with a CDN and caching
You can significantly improve the speed and performance of your website by using a content delivery network. When you use a CDN, you link your website's static content to an extended network of servers across the globe. This is especially important if your website caters to a global audience. The CDN allows your site's visitors to load data from their nearest server. If you use a CDN, your site's files will automatically be compressed for rapid delivery across the globe.
A CDN is one method of caching that can greatly help improve the delivery times of your assets, however, there are other caching techniques that you can implement as well - one of which is to leverage browser caching.
Properly setting up browser caching allows your browser to store certain files within its own cache to be delivered faster. Configuring this method can be done directly within your origin server's configuration file.
Learn more about caching and different types of cache methods in our cache definition article.
7. Compress your files
While many CDN services will compress your files for you, if you don't use a CDN consider using a file compression method on your origin server to improve your frontend optimization. File compression will make your site's content light and easy to manage. One of the most commonly used file compression methods is Gzip. This is an excellent method for shrinking documents, audio files, PNG images, and other bulky files that have not already been compressed.
Brotli is another file compression algorithm that is still fairly new, however growing in popularity. This open source algorithm is regularly updated by software engineers from Google and other organizations. It has proven itself to compress files at a much better ratio than other existing methods. Although support for this algorithm is still minimal it is well positioned to be the next default file compression algorithm.
Read our complete article on Brotli compression to learn more.
8. 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.
Each image file contains a trove of information that isn't related to the actual photograph or picture. For JPEG photographs, the file contains dates, locations, camera specifications, and other irrelevant information. You can streamline an image's lengthy loading process by deleting this extra image data with optimization tools such as Optimus. Optimus uses smart compression in that it uses losslessly optimizes PNG images.
On the other hand, Optimus uses slight lossy compression for JPEG images. Although lossy compression actually removes additional data from the image, the Optimus lossy compression settings are defined at a level where the user will see no visible quality loss. This allows users to save big on file sizes while maintaining high quality images.
To learn more about the difference between lossy vs lossless compression, read our complete guide.
9. Use a minimalistic framework
Unless you are building your website with solely your own coding knowledge, you can avoid many amateur frontend optimization mistakes by using a good frontend framework. Although some larger, more well-known, frameworks come with a bunch of additional features and options, your web project may not require them all.
That's why it's important to determine what features your project requires and start with a framework that can provide those features while remaining lightweight. Some of the most recently designed frameworks use concise HTML, CSS, and JavaScript code.
A framework is not a replacement for careful web design, programming, and maintenance. For simplification, imagine that the framework is a new house. The house is clean and presentable, but it is also empty. When you add furniture, appliances, and decorations, it is your responsibility to ensure that the house does not become cluttered. Likewise, it is also your responsibility to make sure that the framework is not ruined by redundant codes, large images, and excessive HTTP requests.
Summary
Frontend optimization can seem like an intimidating endeavor, but you can greatly improve the loading speed of your website by applying the principles of this guide. Remember, the faster your website loads, the better user experience your visitors will have. Therefore, ultimately benefiting you and your visitors alike. Let us know in the comments section if you have any other great frontend optimization tips.