Why it is important to Improve Website loading Speed?
Page loading time is obviously an important part of any website’s user experience. And many times we’ll let it slide to accommodate better aesthetic design, new nifty functionality or to add more content to web pages. Page loading speed is a measurement of how fast the content on your page loads. Page speed can be described in either “page load time” , No matter how you measure it, a faster page speed is better. Many people have found that faster pages both rank and convert better. Well, according to statistics, half of us don’t even wait two seconds for website content to pop up!
Where its effects?
Website speed is the first impression you ever make for customers, readers, and website visitors which makes an instant judgement about you and your website. If your website loads fast, you’ve instantly made a strong first impression. It’s a quick-win for user experience! If it loads fast, your new visitor is immediately happy.
Gomez.com recently did a study which suggested that over half of internet users expect a website to load within 2 seconds. Any longer than that, and they may start tapping their watch, getting frustrated, and preparing to click away from your site to see if one of your competitors offers an e-commerce experience with a better page load performance.
How Its helps in SEO?
Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. (https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html). A slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.
Google’s latest research shows that the chance of a bounce increases 32% when the page load time goes from 1s to 3s. 1s to 5s increases the chance to 90% and if your site takes up to 10s to load, the chance of a bounce increases to 123%. That’s incredible. For search engines, better results and performance is a sign of a healthy site that pleases customers and therefore should be rewarded with a higher ranking.
Steps to Decrease Loading speed:
- Decrease HTTP Requests:
By decreasing HTTP Request means decrease in css and js files, less use of queries in loading time, the less number of images used the faster web pages loads. These all combines together and hit server for each resource so, lesser the resource hits make faster the page load.-
Merging CSS/JS Files:
Rather than forcing the browser to retrieve multiple CSS or Javascript files to load, try combining your CSS files into one larger file (same for JS). While this can be challenging if your stylesheets and scripts vary from page to page, managing to merge them will ultimately help your load times in the long run. -
Use queries to only load what’s needed:
If you find that you only need to load certain images on desktop or need to run a specific script on mobile only, using conditional statements to load them can be a great way to increase speed. This way, you aren’t forcing the browser to load a variety of scripts or images that won’t be useful for certain devices or view ports. -
Reduce the number of images you use:
If you find some of your pages are fairly image-heavy, try removing some, especially if their file sizes are big. This may not only help reduce image HTTP requests but may improve your UX by removing distracting images that don’t correspond to your written content. -
CSS Sprites:
When applicable, combining images you use fairly often across your website into one sprite sheet and accessing the images using CSS background-image and background-position prevents your browser from constantly trying to retrieve several images every time certain pages on your site load. This way, the browser only retrieves the one that you can use multiple times on the page by properly positioning the right image into view for each area of the page.
-
-
Compress Images & Optimize Files:
Be sure that your images are no larger than they need to be, that they are in the right file format (PNGs are generally better for graphics with fewer than 16 colors while JPEGs are generally better for photographs) and that they are compressed for the web.
Use CSS sprites to create a template for images that you use frequently on your site like buttons and icons. CSS sprites combine your images into one large image that loads all at once (which means fewer HTTP requests) and then display only the sections that you want to show. This means that you are saving load time by not making users wait for multiple images to load.
When it comes to what file extensions you should use for what, use this as a basic formula:
- SVG is suitable for vector images you want to receive a high amount of detail in.
- Certain icons can utilize font libraries such as Font Awesome to render certain graphics rather than saving out individual images.
- PNG should be used for images you need transparent background behind, such as a circular image of a person or Facebook’s ‘F’ logo.
- JPG is best for photographs or anything where fine detail is less important.
While images will still take up the majority of your HTTP requests, optimizing them and your other assets will ultimately keep the sizes of them down and increase your website’s overall performance.
- Leverage browser caching:
Browsers cache a lot of information (stylesheets, images, JavaScript files, and more) so that when a visitor comes back to your site, the browser doesn’t have to reload the entire page. e. Then set your “expires” header for how long you want that information to be cached. In many cases, unless your site design changes frequently, a year is a reasonable time period. Google has more information about leveraging caching here. - Utilize CDNs & Remove Unused Scripts/Files:
- A CDN is a collection of web servers distributed across multiple locations so content can be more efficiently delivered to users. CDNs are typically used for static content or files that do need to be touched once uploaded.
- Servers are selected based upon the user’s measure of network proximity. For example, the server with the quickest response time and/or fewest network hops is chosen.
- Larger companies tend to own their own CDN, while medium-sized businesses will use a CDN provider such as EdgeCast.
- Smaller companies may find a CDN unnecessary or outside of their budget, so using utilizing websites such as CNDjs which has a library of JS and CSS files and frameworks can help you prevent hosting certain files on your own servers while increasing their load time.
- While the easiest (yet most time consuming) thing is to have your developer go through your website and check each page, there are a few tools such as UnCSS which can remove unused styles from your website and decrease the size of your CSS file.
- HTML Standards and Code Formatting:
Its important to maintain HTML code as per HTML5 Standards because due to that we use structural format to place our code as well as he use of elements and tags are restricted as per our need and unnecessary elements will be removed for page. which is good for page rating and formatting. - Removing unnecessary script and css in sub pages.
- Reduce redirects.
Some Tools to get your website performance:
- Page speed insight:
This classic displays a page speed score between 0 and 100 and gives you all the keys and advices to improve your page load. - Webpage Test:
This Google tool offers a free speed test providing charts about page speed optimization. - Yslow:
This plugin quickly shows you how your website is performing and gives you insights to improve your site speed. - YUI Compressor:
This tool will help you compress your code by minimizing JavaScript and CSS.
What can lower your Page Speed?
- Your host: you get what you paid. In the long run, a cheap offer can damage your page speed. Pick the right host that fit to your business size.
- Too large images: images which are too heavy to load can really lower your page speed. It is often due to extra data included in the comments or to a lack of compression. Prefer PNG for images that do not require high details like logos and JPEG for photos.
- External embedded media: external media like videos are highly valuable but can largely lower you load time. To gain some load time, host the videos on your own server.
- Unoptimized browser, plugins and app: you should test your website on all browsers since they do not load your site in the same way. Moreover, apps like Flash can seriously lower your page speed.
- Your theme: some highly designed themes containing a lot of effects can penalized your load page.
- Widgets: some social buttons or comment areas can have an impact of your page speed.
- Double-barreled code: if your HTML/CSS is not efficient or too dense, it will lower your page speed.
