The first criteria to look at when optimizing your website is the overall load speed. Load speed is the time it takes to fully display the content on specific page. Best-in-class web pages should become interactive within 5.3 seconds. That’s how long people are willing to wait before they start clicking that back button and finding a different website that loads faster. Does your website take longer to load? If you’re not sure, head on over to Website Grader to find out.
Over the years, websites have grown in complexity. When diagnosing your website load speed, there are few other metrics to look at, including first contentful paint and time to interactive. First Content Paint (FCP) is the time it takes in seconds for text or images to be shown to users. Time to interactive is when the page responds to users interactions (such as clicking) within 50 ms. FCP & TTI are metrics that are growing in popularity. Being able to see content on a website and interact with its content is closer to how users feel about the actual site speed and the actual page load speed itself. Improving load speed can help you improve your page load speed, including minification and compression.
To understand minification and compression, we’re going to talk about HTML, CSS & JavaScript. This will not only help you understand how to reduce your page load speed, but it will also help you sound knowledgeable in front of your web development team. A natural place to start looking when increasing your website’s load speed is to reduce the size of what’s actually being loaded. That’s where minification comes in. Minification is the process of reducing resources size by removing unnecessary comments and spacing in the source code. These characters include whitespaces, line breaks and comments, which are useful for humans but unnecessary for machines. Don’t worry minification is not permanent change to the code. In general, minification creates a new minified version of your source code. This means that you can always continue editing your source code and reminify your code to make it smaller again. We minified the files of a website containing HTML, CSS & JavaScript code to reduce the file size so that your web browser can read them faster.
To understand minification, you first need to know a handful of things about HTML, CSS AND JavaScript. They are all components of every website that define the structure, style and behaviour of a webpage. Each of these components works together to create a webpage.
HTML,CSS & JavaScript can all be minified. But don’t worry, unless you’re a technical marketer and have built your website yourself, minification is usually a job for your web developer. But this might lead you to a question what exactly is happening when you minify your files? To start, web developers create these files with convenience in mind. They make the code easier for people to read, including the whitespaces, comments and longer variable manes. But this also creates larger files to transfer across the Internet and more for a web browser to read.
Minification essentially removes these extra elements, making it harder for humans to read but easier and faster for web browser to read. Here’s what’s happening when you minify HTML, CSS & JavaScript.
Wondering what tools you can use for minification? To minify HTML, try out the page speed insights chrome extension. For CSS , try CSS compressor. For JavaScript you could use JavaScript compress.
The second key way to improve page load speed is compression. Have you ever tried to send a file over email that was just too big and you had to compress it into a ZIP file to make it small enough to send? Well that’s compression at work. When someone arrives on your website, a request is made to your server, which is the computer program that stores, processes and delivers webpages. This happens for every single file. The larger these files are, the longer it takes to load. Compression replace repetitive pieces of code with markers directing to the first instance of that code. Compression’s purpose is to reduce the file size during transfer from the server to the browser. Once the file arrives, the browser has to decompress it, like when you downloaded a ZIP folder onto your computer and can’t just open it. You have to unzip it first. The same thing happens when the browser receives compressed files, but it’s automatically handled by the web browser.
So how to you get started with compression? Well there are a couple of solutions out there, including Gzip and Brotli. They both are open source and free to use. Enabling compression can get pretty technical and it will depend on the server and the CMS that you’re using. You can enable compression on other servers for your CMS too. For those of you who are self-hosting your hosting your website, this is where you’re going to want to work with a web expert, Compression is enabled by adding code to a file called .htaccess on the web server .htaccess files can be used to alter the configuration of your server, to enable or disable additional functionality and features, including compression. Minification and compression are two solutions to reduce your page size, but they perform their best when they work together. By removing extraneous code and marking strings, your web page will have a smaller file size, which means faster load speed.