Waiting for a website to load is not a pleasant experience. Performance is one of the pillars of web development which every developer should make sure to keep strong and upright. This can profoundly effect the initial reaction of the users when they first visit your website, and can in-turn impact the subscription base of your beloved product or blog page.
A brief introduction
I have finally decided to break outside the box. For a very long time I have wanted to publish the knowledge I have gained through years of thorough research and share it publicly with all of you developers, (or soon to be) eagerly looking to improve your coding skills and techniques. In the coming months I will be publishing a series of articles that will help you conquer the learning curve of web development. This is also part of a huge personal challenge to push my creativity to the limits in writing my first book. If you are interested in learning more, please make sure to follow me here and don’t miss out on my upcoming book — Becoming a professional web developer.
Let us have a detailed look at how we can create the most efficient website and focus on the power of web-performance.
In this article you will find the most crucial points that will heavily effect the performance of your website. Implementing the following techniques into your existing or upcoming website should help you in improving the page speed and load time of your website. We will focus mainly on developers who build their own websites from scratch, but a lot of the information also applies to those of you who created a website using an online service such as the ever popular WordPress.
There are three main categories that help improve your website performance, each category has it’s own strong points.
Let’s get started:
Make your website lighter
Yes, reducing the amount of page load is a critical first step forward in making your page load faster. A lot of us that work from home have high-speed internet, but we should also keep in mind that there are still millions of others that are not as lucky as we are. And although mobile internet speed is catching up with LTE connections, a huge percentage of users are still on 3G or even 2G network connections.
Reduce the use of frameworks and libraries (do not make using these a habit)
I constantly see websites using huge complex libraries (jQuery, AngularJS, React, etc…) simply for the implementation of a few effects, such as hiding and showing elements or altering some text on a click event. Unfortunately a lot of early developers find ways to quickly get started and release their first website by using libraries and frameworks without the acknowledgement of why they even exist. We think that this is necessary or required to start developing websites. Yes, they do offer ease-of-use and surely enough we all have to get started somewhere, we all need time to learn. Just keep in mind that these libraries and frameworks are there for more complex websites and web applications that have hundreds of development files, and involve a team effort, thus improving the workflow and coding consistency with the available guidelines.
If you simply have a personal website or want to create a simple portfolio page, I encourage you to try and build it from scratch. It is not as scary as you might think! And what’s great about web development is that you can always have a look at the page source (right-click on the page and go to “View Page Source”) of other major webpages. This is how I learned the most. I reviewed the source code of other popular websites such as Facebook and Google, made comparisons and searched for the meanings of the code that I did not know. By reducing the use of libraries and frameworks you will not only make your website lighter, but also heavily improve your coding skills.
Use mobile-first approach
In a world were mobile phones are becoming the go-to device to check an online application or website, we need to re-think our development building strategy. By using the mobile-first approach we are prioritizing by first serving mobile devices with the amount of data required to browse the whole website. It also makes you focus on what is really necessary to make the website work, and push yourself to the limits to try and find the best way to access a specific part of a website, with the least amount of taps and effort. Although design plays an important role in impressing our users, keeping the site as simple and easy to use is also crucial. Use media queries for tablets and desktop devices. Using these we can request smaller sized images and icons specifically for mobile devices, while the bigger higher-resolution ones will be downloaded solely for tablets or desktop devices accordingly.
Tip: Google now gives higher ranking for websites that are mobile responsive
Compression of development files
This is very straightforward and easy to implement. All our stylesheets (CSS) and script (JS) files can be easily minified by the use of readily available online compressor services. Compressing these files removes all the unnecessary ‘spaces’ and ‘returns’ on the file, while typically also changing local variable names to single characters. Some powerful services also check for other complex ways to continually reduce as much of the file size as possible. Do not try to use this during development, keep your files as readable as possible and leave file compression as the final step before production. This is why you will usually see two set of files such as ‘example.css’ (which would be the development file) and ‘example.min.css’ (which would represent the final minified production file). See the difference of a CSS compressed file using this CSS compressor tool. Some hosting services also compress your HTML files by default before they are sent to the browser.
Optimize your images
There are multiple ways where your images can also be improved to continue reducing the weight of your website.
- Compress image files. JPEG, PNG and also a GIF image can all be compressed. It’s a lossy compression algorithm to shrink the images to the minimum possible size while keeping the required level of quality. It is impressive how the same level of image quality is kept while reducing the file size by half! Optimizilla does a great job with that.
- Use SVG (Scalable Vector Graphics) for your site icons. The advantage of having SVG icons is not only that it has a smaller size than that of a PNG icon, it is also resolution independent. This means that whether the icon is seen on a high resolution display or on an older device, the image will always look sharp, thus eliminating the need of multiple icons to support different resolutions. The width and height of the icon can also be adjusted without the worrying about it getting blurred — perfect for today’s responsive websites!
- Use sprite sheets. More about implementing this on the ‘Server side improvements’ section in Part 2 of the article.
Improve back-end & front-end performance
Efficient use of Functions, Methods and Classes
If your website includes a lot of back-end processing, make sure to optimize your code. The efficiency of your code and not following effective terminologies such as DRY (Don’t Repeat Yourself), are just some of the main factors of performance hiccups. Making the best use of functions, methods, and classes in your back-end code also helps you maintain a well oriented environment, makes it easier to find and fix bugs and errors, and improve the overall performance and rendering of your site for multiple users.
Fetch data from your database using SQL queries
This is also a common mistake many of us tend to do to take the easiest path in developing data intensive applications. Do not loop through single SELECT statements using conditions inside the back-end code itself. Rather, we put the heavy load directly on the database queries themselves. Performance in SQL is much faster then calling multiple queries from our back-end code. This also keeps your code clean and maintainable.
Update to PHP 7 (for those of you who use PHP as a back-end language of choice)
Simply updating your server to the latest version of PHP — which at the time of writing is version 7 — will improve your server side performance by 2x! I’m not joking, take a look for yourself on this research about the top 5 features of PHP 7. Before upgrading, make sure to check the new documentation for any deprecated features that you might be currently using.
Asynchronous JavaScript
The term lazy-loading is not something we haven’t heard about before. It was initially the term used for incrementally uploading long lists of images, batch-by-batch, letting the user view the first few images while uploading — hence the term — asynchronously the other images “behind”. But there are more tricks up its sleeve for what we can achieve (this is also something you probably experience everyday when you visit your Facebook newsfeed page). The first thing a user will see when visiting a website is the landing page. Focus on fetching the data required to appropriately show that first page as quickly as possible. A JavaScript function calls the latter data “behind the hood“ to virtually make the website seem to load faster. This all happens in just a few milliseconds and is usually oblivious to the end user.
Above-the-fold content
Styles that are required for immediate painting by the browser should be placed right inside the <head> of the html document. This will eliminate the need of a single request and for the browser to wait until the file is fetched to start styling the DOM (Document Object Model). This removes that split second lag you sometimes notice when you open a new web-page. Google page-speed is a great tool to improve your site performance, it gives you great tips on how you can improve the over-all performance of your site.
Below-the-fold content
Unlike the above-the-fold content this is the complete opposite. This is mostly used for JavaScript files. Data that does not effect our site rendering, or that requires the DOM to load first, should be put in the end of the file — just above the closing body tag (</body>).
To be continued…
In this first part of this article we looked at ways on how to efficiently improve our website performance by reducing the load from our content and media as much as possible. We also looked at how we can render our content quickly by optimizing back-end coding and other practical but rarely known techniques that are used by all professional web developers today. In the next and final part of this article we will have a unique look at server side improvements.
Stay tuned and follow me here or join my newsletter so you don’t miss out on the next crucial techniques to radically improve your website performance!
More from Owen Far:
How to radically improve your website performance (Part 2)_It’s time to step-up the game and become great at what you love doing the most!_hackernoon.com
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