It’s time to step-up the game and become great at what you love doing the most! We have already looked at some great improvements in Part 1 (see below) of this article. We saw innovative ways on how to make a website lighter and how to improve our back-end performance. Now we are going to have a look at how we can efficiently adjust and implement server side improvements.
How to radically improve your website performance (Part 1)_Waiting for a website to load is not a pleasant experience. Performance is one of the pillars of web development which…_hackernoon.com
… so without further ado:
Server side improvements
Server requests
To write performant sites and apps you need to understand how HTML, JavaScript and CSS are handled by the browser, and ensure that the code you write (and third-party code you include) runs as efficiently as possible. This can be done by:
- Minimizing requests. Each time you visit a website, the browser has to send a new request to get all the external files and resources. Each request takes a few milliseconds (depending on the file size), and reducing the amount of requests can favourably impact your site performance as well. If you have multiple stylesheets that can be combined together, do that. There is no reason why we should leave multiple CSS files for production. Use preprocessors such as SASS to keep your files organized during development. The same applies for JavaScript files, you get the idea, the less files there are for requests, the faster the loading of your site.
- Load scripts and styles on demand. Although it is good to combine CSS and script files to reduce requests, sometimes it is still better to leave them separate if the request is only required for one specific page. For example, there is no need to load your main libraries and styles on a landing page that showcases your product. Make that first page as light as possible to leave a better impression on the user. Load the rest of the libraries later.
- Stack your icons together in a sprite sheet. This is another good trick to know for when it comes to having multiple icons or small image files. A sprite sheet is a stacked group of icons that are put together into one image file. In this way, we are now only requesting one file from the server, heavily reducing the amount of time to fetch multiple icon files. Stitches is a great tool that does the heavy work for you, while also providing HTML and CSS code for the generated sprite sheet.
- CDNs (Content Delivery Networks). Our browsers are only capable of requesting multiple files from one specific server at a time. Serving your website with resources from different delivery networks improves the loading time of the first “fresh” fetch of your website before most of the files are cached in your browser (more on this below).
Implement caching
Most file types including styles, scripts, and images are capable of being cached by the browser. This means that these files will be saved on your local machine. On the second visit, the browser will call the files cached from your local storage instead of fetching new ones from the server. Be cautious on how you use this, we don’t need to cache a site that might be visited only once by the user (such as an event page). It is also good to keep in mind that if you make any changes to files before the expiry date of the cache, you should assign them with a new name (example-1.0.1.css). This will ensure that the new files will be requested.
Do not use redirects
Try to avoid redirects unless it is used as a fallback, such as for the occurrence of an error. The most frustrating thing you can do to your visitors is to send them from one site to another. Sometimes this can be fast enough to go seemingly unnoticed, but think about how this will be experienced by those who happen to have a poor internet connection.
Hosting service and server speed
All of the methods you are reading about here can all be in vain if your hosting service has poor performance and limited processing speeds. Your website performance heavily depends on the hardware performance and network speed of your hosting service. Make sure to compare the specifications offered by multiple hosting services before getting yourself a new one. Things such as processor speed, RAM, and network bandwidth can all effect your website performance. I have been using Bluehost for quite some time, support is great, and their cloud service is adequate for the pricing. A thorough research is highly recommended before choosing your preferred service. Keep in mind that you do not want to change your hosting every year, as it is a huge headache to transfer domains and certificates from one hosting service to the other. Take a good look at the specifications and not just the pricing!
HTTP/2
This is the latest networking protocol for low-latency transport of content over the web. Nothing changes in how you code. The magic happens on how the files are fetched. Although browser support is great this technology is very new and many hosting services will surely take their time to move the upgrade from http1.1 to http2. Another good thing to know is that most of the current browsers require a TLS (https) connection for HTTP/2 to work properly.
Use network distributed libraries
Google’s CDN has an excellent list of the most popular libraries. The main advantage of using a hosted library is that there is a very high probability that the average user would have already visited another website that used the same library (ex: jQuery). This means that the library would have already been cached and there would be no need for the browser to download the same data file again.
Closing thoughts
The psychology behind the perception of time
Sometimes there is no other way to make a website faster, especially if it contains heavy media such as images (for portfolios) or video files. At this point it’s very important to have in place a loading mechanism (.gif icon or progress bar). This article gives a great explanation on how a progress loading bar can make a huge difference on how users perceive the passing of time. Having something to look at during a period of loading — especially with an estimated finish time — seemingly makes the process go faster. Have you ever noticed this yourself? When something seems to get stuck and nothing on the screen is moving, we suddenly have this feeling of frustration. But when we can see a moving icon, we tend to feel reassured that something is happening in the background.
Do you really need to use web-fonts?
Web-fonts are a great way to create a distinctive look for your website. Choosing a custom font is not a bad idea, but keep in mind that it also adds to the weight and loading time of your site. Sometimes — on opening a new website — you might see a sudden change of font-style right after the page has loaded. This happens because the browser already paints the document with the default (fallback) font, and then has to re-paint the DOM (Document Object Model) once the desired web-font is downloaded. Don’t be afraid of using common font-families (Arial is a great example). Adding a web-font does not magically make your website look better. The quality of your content is by far more important. When considering using a web-font, my advice is to contemplate if the use of the font is worth the sacrifice in performance.
PWA (Progressive Web Applications)
I want to mention PWA because it will eventually be the ‘de facto’ of the future of web development. Although this technology is recent and still in the early stages of development, some browsers (such as Google Chrome) are already taking advantage of this design model. In short, PWA reaches the same level of performance as if the website was actually a native mobile application. This is mostly possible by the use of service workers that would allow the website to work offline. In-turn, caching together with service workers, would allow the browser to save the website locally, thus radically improving the performance as if it was a native installation from the app store. If you’re interested to learn more about this, here is a great collection of PWA articles.
Tip: For the first time PWA makes it possible for web developers to send mobile notifications directly on the users’ home screen
Conclusion
Having excellent coding knowledge makes you a great web developer, but having a broader understanding of how the internet works makes you a professional. Stay intrigued by new advancements and learn how the browser works together with servers to display web pages. Creating a website from scratch seems scary at first, but once you start understanding how much quality matters, you will never look back to using those old libraries or frameworks.
I have always been eagerly searching for the best strategies to improve web performance and user experience. If you are just getting started, want to get up-to-speed, and want to conquer the learning curve of web development, you can also check my upcoming book — Becoming a professional web developer.
Thank you for reading! Follow me here or join my newsletter if you want to keep learning the crucial secrets of web development.
More from Owen Far:
The advantages of building your website from scratch_Most of the people I talk with regarding the product or website that I am developing, tend to ask if I’m using any…_hackernoon.com
Frameworks? Libraries? Both, or none? — My honest opinion_Oh, and I’ve been banned from Reddit._hackernoon.com