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.
A website’s speed can be perceived by the user in three different forms and they are:
• 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 website. You cannot do much about the internet connection but can definitely do a lot about the files present in 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 web site can look fast with some clever changes. A classic example of this is placing of the <script> tag in the html file. Paced it before the “body” tag and then it will be loaded before “body” part begins to execute and place it in the end and website structure will load first and then the functionality.
After taking care of speed let’s take care of optimizing the code now.
Speed up the CSS
Majority of developers have hard time with CSS. They spend more time tinkering with it then 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 the 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 the 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.
Speed the JS files
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 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 in 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 stocksnap high resolution pictures are available and developers are using them without compressing. Just because 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 few things which you can do with the images.
• Use only appropriate resolution for the site. Just because higher resolution is available doesn’t mean that you have to use.
• Compress images using Photoshop or some online tool.
• Crop the image to 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 ever bit counts on the internet. A little more conscious effort from the web developer can make the experience of the customer much more enjoyable.