Apart from parameters which define the usability of website, speed is the most important. A website made from the most advance technology and framework and with the most intuitive interface will be of no use if its loading time is like a moving snail.
Table of Contents
Loading speed This is the time taken by the site to load on a device it is called from. It can be a desktop, laptop, tablet, smartphone or phablet. This speed is primarily affected by the internet connection the user is relying upon but it is also affected by the size of the files such as images, documents etc. which are being used on the website. You cannot do much about the internet connection but can definitely do a lot about the files present on your website.
Rendering and processing time After all the files have been downloaded on the computer browser is used to process the HTML, CSS, JS etc. and render the images for the users. All the processing time depends upon the code structure and rendering depends upon the quality of multimedia files. The more unstructured the code and high-quality files the more time the will be used for processing and rendering. Code and multimedia can be controlled by the user very easily.
Perceived website speed This is not an existential speed but it only exists in the mind of the user. A fast website can look slow and a slow website can look fast with some clever changes. A classic example of this is placing the <script> tag in the HTML file. Paced it before the “body” tag and then it will be loaded before the “body” part begins to execute and place it in the end and the website structure will load first and then the functionality.
After taking care of speed let’s take care of optimizing the code now.
Majority of developers have a hard time with CSS. They spend more time tinkering with it than they spend on any other part of the website. Unused CSS code only adds bytes to your website size. So, if you want to optimize then CSS is a good place to start.
Take the time to figure out the unused code and remove it.
Use CSS selectors wisely. Selectors like “: first-child” and “pseudo” are the slowest. Minimize their use.
Take care of the properties like box-shadow, they take longer to render and make the loading slow. Mobile devices can feel a significant delay.
CSS animations are cool but are GPU-consuming and will definitely slow the entire loading process. Use only when necessary not show off.
Compress your CSS. Compression will take care of the comments and white spaces and will reduce the size.
JavaScript can be a pain in the neck and can have a much more direct effect on the speed of the site than CSS. The worst part is JS file is usually heavier than CSS, even if it includes only minimum functionality.
Again, the customers on mobile can feel the significant lag in loading speed. And if you rely on plug-ins to get your work done then it can be bad because chances are that two plug-ins may not complement each other properly and will make the site unnecessarily heavy. Below are some steps to take care of the JS.
Use CDN for the JS files wherever possible and for CSS also. It includes the HTTP request but these will be cached by the browser for later use.
Always add a JS file after the end of the body tag so that HTML and CSS can be loaded.
Avoid frameworks if you can but, if you cannot then frameworks provide both minified and normal files. Unless you need to tweak the code use the compressed version for inclusion purposes. Follow the same guidelines for the CSS as well.
Images can contribute to the lack of loading speed as much as JS and CSS. The higher the resolution of the pic the slower the website will be and with retina display and sites like Unsplash and stock snap high resolution pictures are available and developers are using them without compressing. Just because the screen has the capacity to display doesn’t mean that that problem is solved. Variables like GPU and bandwidth still control the equation. Here are a few things which you can do with the images.
Use only appropriate resolution for the site. Just because the higher resolution is available doesn’t mean that you have to use it.
Compress images using Photoshop or some online tool.
Crop the image to the necessary size. Sizes like 3730x2100px are totally unnecessary.
Wherever possible use svg format for images and for icons.
Use responsive images.
With the limited bandwidth and GPU consumption every bit counts on the internet. A little more conscious effort from the web developer can make the experience of the customer much more enjoyable.
