Posted on June 8, 2017 by admin
7 Tips to Scale Website Design to Improve Page Speed
“Customers are won or lost in one second.”
Have you ever heard ‘every second matter’?
Now, it is time to hear the SEO version of this maxim which is, ‘even every millisecond matters.’ Unbelievable? Let’s hear it.
Amazon reported that every 100-millisecond in their page loading time cost 1% sales. The Walmart also reported the similar results with conversions increasing by 2% with every 1-second improvement in page loading time.
Shopzilla decreased its page loading time from 6 seconds to 1.2 seconds and their revenue increased by 12% and page views by 25%.
Yahoo improved its revenue by 9% with 400-millisecond improvement in page speed.
Let’s take a different turn on these stats. According to a report published by Aberdeen group, a 1% delay in the website loading time costs
- 11% fewer visits
- 16% decrease in customer satisfaction and,
- 7% decline in conversion
Why Website Loading Time Matters?
If you are still wondering what is the fuss about page loading speed, here are some more stats about a good performing website and a bad performing website.
- 47% of visitors expect a page to load within two second
- 40% of visitors will quit a page that takes more than 3 seconds to load.
- And a 52% of visitor state that the quick page loading time is important for their loyalty.
Based on the analysis of these figures by Los Angeles SEO Company here is an indicator of website’s page loading time and customer experience.
Moreover, since 2010, Google prefers the quickly loading websites in Search Engine Result Pages (SERPs) which means that site speed is included as an indicator in its algorithm,
So, basically, everyone hates a slow loading website, and even the Googlebot feel apprehensive about a website that takes long to load.
#1- Focus on Image Sizes
According to HTTP Archive, the average page size has grown from 292Kb in 2012 to 2099 Kb by 2015. Now, an average webpage is more than 2Mb, and the images take up more than 62% of the kilobytes of a page.
Almost all the features of the websites have grown and have doubled. But, images had seen a super growth from 672 Kb in 2012 to a whopping 1310 Kb in 2015. The following picture shows a breakdown of the kilobyte consumption of the elements of a webpage.
While it is good news because of the importance of multimedia features in the organic searches and overall customer engagement, the images can practically hog the bandwidth making the page to load slower. So, just as the images are the biggest chunk of the page girth, there should be more emphasis on optimizing the image size.
One of the most common mistakes that people make is to upload large images and then to use CSS to scale them on the page because the browser loads the original image size. For example, after uploading a 300×300 image, if someone scales it down to 100×100, the browser will still load three times bigger image and then resize it.
So, an effective way to optimize images is to use compressed images in the content. or reduce the image size while maintaining quality before uploading. You can use the free tools such as Tiny PNG, Compressor.io, and Kraken.io to compress images or can utilize the Content Management System (CMS)’s plugin like WP Smush it and Imagen to compress images on the go.
The image optimization will improve page speed and will deliver better customer experience yielding leads and conversions.
Another pro tip is to know that jpg is the best format. You can also use .png images, but they may run into compatibility problems with older browsers. Only use gif images for small image sizes restricted to only three color pallets.
#2- Try Lazy Loading
The lazy loading is a technique in which the website content loads when it is needed instead of being loaded all at once. It means that instead of loading the complete website, only the portion that is in the viewport is loaded and as visitor scrolls down, more website content is loaded.
So, what makes the lazy loading a good technique? It allows the website content to load faster as only a portion of the content needs to be delivered at one time. The visitor connects to the page more quickly. It also yields improved visitor engagement as the visitor is continuously fed the content (there is an urge to go to the bottom).
So, the lazy loading not only improves the page loading time but also works to enhance end user experience.
#3-Use Browser Caching
Activating Browser caching is another technique to load your pages faster and rank them better. Browser caching allows you to save some elements of the webpage in your visitor’s device for example logo, CSS file, stylesheets, and JavaScript.
When the visitor visits your webpage, these elements will be downloaded and stored in the temporary storage on the hard drive which means that only a few elements would need to be loaded at the subsequent visits.
How long the items are stored depends on your server-side cache or hosting server and the browser setting of the users. As the images and elements are stored in the visitor’s device, it takes much less to load and deliver the content and results in seamless and smooth user experience. You can read about the importance of user experience here. The cache files also improve the page ranking in SERPs.
You can begin using browser caching by contacting your hosting company or using Nginx Caching or similar resources.
Alternatively, you can use caching plugins like W3 Total Cache that can drastically improve page’s loading time. The plugins produce a static copy of your content and deliver it to the visitor almost ten times faster.
So, if you want to improve your website’s performance magically, start believing in the browser cache.
#4- Compress Web Content
The uncompressed content makes the delivery of the website content slower causing delayed loading. The website experience becomes particularly slow for the users with limited bandwidth, and they encounter a troubled website experience.
The compression is the process of encoding content and information in fewer bites which improves loading time. The latest browsers have built-in compression support to enhance the user experience. However, antiviruses, browser settings, and proxy servers can interrupt with the content compression and may result in annoying delays.
The following are the Google approved compression techniques to improve the website performance.
- Minify, HTML, CSS and JavaScript
- The consistent code in CSS and HTML is the key with consistent use of upper and lower cases, consistent quoting of HTML tags attribute, same order of HTML attributes, and by alphabetizing CSS key-value pairs to show them in the same order.
- Finally, use Google’s recommended gzip compression that can make the page load faster. The gzip finds the similar strings and codes and replaces them with the short character reducing the size of the transferred response by up to 90%.
#5- CSS Code Optimization
As the CSS holds the style requirements of your page, it has a huge impact on how your web page renders and user experience. It also has a huge impact on the loading time of the page. An unoptimized CSS delivery can cause the delay in page’s loading time and download and browse the style requirement may take more time than necessary.
The website accesses the styling requirement or CSS either with an external file or inline file. The external CSS file is loaded in the head of your HTML code and loads before the page representation.
Even though the CSS can be used through different methods by the website, it is important to optimize the CSS code and its delivery, making it lean and eliminating any extra spaces or repetition of the code. It is also preferable to use an external file for the CSS since it reduces the size. But, make sure that you add only one file because additional files increase the HTTP requests adding the response time.
You can use CSS delivery tool or other online tools to make your CSS code lean.
#6- Hosting Company Matters
The web pages or files of your website are hosted on your hosting company’s remote computers. When someone tries to access the websites, the files open from the remote computer of the hosting company.
If that remote computer responds to the visitor’s request quickly, the website loads faster. But, if you have stuck with a dime a dozen hosting agency, by the time the remote computer would respond, the potential customer would have moved on to your competitor’s fast website.
A hosting company makes all the difference in the website loading speed. With so many options in the market, do your research and choose a reliable hosting company that offers incredible speed and is almost always up.
#7- Clean Extra Plugins
Are there plugins that you do not use? The plugins are one of the biggest speed crashers. These plugins take forever to load and can slow down the website performance.
Delete all the unessential plugins to lighten up the webpage. You can test the effect of the plugin performance on the web server by manually enabling and disabling them.
Final Words
In the competitive world of internet, the customers demand richer and faster online experience. If you are not adopting practices to improve website speed, somebody else will. And that somebody else will also grab potential customers because of a faster website.
So, it is time to use clean and lean CSS and JavaScript, optimize images, try lazy loading, and use a faster and reliable hosting company to boost your website’s loading speed.