5 Tips To Improve Your Website Page Speed
October 1, 2018
October 1, 2018
According to Google's Lighthouse App - A large portion of the world is still utilizing 3G mobile speeds to browse the web. Thus resulting in many modern websites taking more than 5 seconds to load. Here's what you can do to change that.
If you have resized all of your images and they are still over 150kb, I would consider moving to animations and SVG vectors. You can find a great deal of free vectors on sites like Vecteezy that are going to help decrease the sizes of those files.
You can also convert your current images to smaller sizes just by converting them into an SVG file using converter websites.
Lazyload are javascript snippets that delay loading of large, below the fold images until the user scrolls to them. In other words, the browser won't load any unnecessary content that visitors won't initially see until after the page is fully loaded. The Lazyload script enables you to add a class to any large divs or images that you don't want to load right away.
Lazysizes has a great script and explanation of what lazyloading does for your website. If you scroll down the page, you will see that images are still loading and the page is already viewable. The script itself is small and will go a long way to help you create an image-rich website that is also fast.
One trick to keep in mind while Lazyloading is that you have to add a data-src="" attribute to your img references. Data-src="/folder/image.jpg" will be come your primary image and src="/folder/placeholder.jpg" will become the blurry or loading icon image that appears until full image is loaded:
img alt="lazyload image" src="low-quality.jpg" data-src="normal-quality.jpg" class="lazyload"/>
Speaking of scripts, there is absolutely no need to load them in the header. Since no one can interact with your website until the content is actually loaded, there is really no need to render any animations, tracking, or interactive classes until your webpage appears. Thus, most of the developer community will place most scripts inside their footer tag.
Some notable exceptions to this are Google Analytics/GTM Scripts that have to be placed in the Header as well as any jQuery for your CSS framework.
Google provides you with a free feature to analyze your page speed that comes automatically installed with Chrome. This tool gives you insights into which scripts, images, or content took longer than expected to load on your page. You can then make according changes to improve your page speed.
To use Google Lighthouse simply Right-click and Inspect any element on your page, then navigate to Audits tab and hit Run Audits.
There is almost always a way to decrease the size of files we reference. Be it you or the developers that created your site, we all love using CSS and Javascript frameworks to make our lives easier (flex grids are a lifesaver!). However, these frameworks often come with needless code that stays unutilized.
If you are like me and only want to utilize the responsive grid and containers from Bootstrap, the framework actually offers a customized CSS solution where you only reference the classes you need. You can find it on the Bootstrap site. This will drastically decrease the size of your CSS files.
Another helpful hint would be to use minified verisons of scripts. Almost all of the CSS and JS frameworks come with minimized versions of their code. Utilize these to make the size of your referenced files smaller, thus decreasing your load time.
If you are having problems with any of these suggestions, feel free to reach out!