Gone are the times when a leisurely and measured pace of life completely satisfied people. Nowadays patience is a trait of character that tends to zero more and more often. An average American customer is ready to stand in line for 15 minutes in real life. And this period lessens up to 6-10 seconds when he is online. If you fail to grab his attention within these several seconds, you’ll never have a chance to benefit from your online presence.
Page loading time is obviously an important part of any website’s user experience. Kissmetrics research shows that 47% of consumers expect a web page to load in 2 seconds or less and 40% abandon a website that takes more than 3 seconds to load. A one second delay in page response can result in a 7% reduction in conversions, an 11% drop in page views and a 16% drop in customer satisfaction. So, if an e-commerce website is making $100,000 per day, a 1-second page delay could potentially cost you $2,5million in lost sales every year. Is such a turn a part of your business strategy?
Moreover, page loading time is becoming a more and more important factor today when it comes to search engine rankings. All your laborious SEO and AdWords work is pointless if your website pages load slowly. You will lose the game even before it starts – on page ranking. Website speed is used in Google Ranking Algorithm because the Google engineers strongly believe that “Faster websites create happy users.”
The MotoCMS team has always kept an eye on own website effective performing. That’s why we have already started the process of its optimization and are eager to share our experience with you.
How fast is fast enough? No matter how fast your website pages seem to be, there will forever be room for improvement. Consequently, your initial task is to find out the factors that slow down the pages to begin speeding them up.
PageSpeed Insights is a tool that will perfectly cope with the problem. It not only measures the performance of a page for both desktop and mobile devices but also shows how it can be improved. Each suggestion is rated with a priority indicator to rank its importance. By implementing the suggestions you are able to improve the performance of the page.
MotoCMS has already explored and analyzed the decelerating factors with PageSpeed Insights and now we see the ways to boost our website page speed.
Lazy loading (or dynamic function loading) is a concept where we delay the loading of the object until the point where we need it. It allows you to specify what components should not be loaded by default when your page starts to load. It’s a real treasure for long website pages with a lot of images.
MotoCMS has already implemented lazy loading for its website templates store page.
In the case of standard loading when a user opens a web page, the entire page content is downloaded and rendered active in a single package. However, there’s no guarantee that he or she will actually view all of the downloaded content. The user may leave after viewing the first image. Then the result is wasted memory and bandwidth.
In lazy loading, images are not loaded until you scroll to them. Pages are created with placeholder content which is replaced with the actual one when the user needs it.
The advantages are obvious. Lazy loading considerably decreases page load time, saves bandwidth, and improves user experience.
Images are almost everywhere on the web. It’s not surprising because 65% of adults are people with visual-spatial intelligence who better apprehend and react to visual information. That’s why 90% of websites are graphics dependent. However, images can be the very thing that slows down your page significantly. Of course, you can’t just get rid of all the images. But you can optimize them thus increasing a page speed up to 80%. Focus on your images size and format before uploading them.
Crop your images to the correct size and remove any whitespace around them. Never upload a 1000 px wide image if your page is 570px wide by setting the width parameter (width=”570”). Resize every image according to the width of your page.
Choose the best image file format. Use JPEGs for all photographic-style images. PNGs are almost always superior to GIFs when it comes to graphics. GIFs are good only for very small or simple graphics and for images that contain animation. Avoid using TIFFs or BMPs.
It’s also a good idea to use an image optimizer plugin your CMS offers to optimize the images that you have already uploaded.
You should reduce the amount of data required to render your page. Eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation saves many bytes of data. The reduced file size decreases the network latency that occurs each time your page is downloaded. Smaller files can be loaded and run more quickly by web browsers.
Browser caching stores web page resource files on a local computer when a user visits your web page. That’s why the next time the user visits your website or goes to another page, your browser can load the page without having to send another HTTP request to the server because it has already “remembered” this data.
To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files. These headers will tell the browser whether to request a specific file from the web server or whether to get a version of the page from the browser’s cache.
Your CMS may offer cache extensions or plugins. If it doesn’t, you should set up caching parameters in your .htaccess file in the root of your domain to tell the browser what types of files to cache. You can set different expiry times to different files. If certain types of files are updated more frequently, you are free to set an earlier expiry time on them. Then save the file as is and not as a .txt file.
Browser caching is particularly effective on websites where users regularly re-visit the same areas of the website. It reduces the load on your web server, which ultimately reduces the load time for your users.
Large web pages are often 100kb and more. That’s why they are cumbersome and slow to download. When a user starts loading your web page, your server receives a command to deliver the requested files. The bigger these files are the longer it will take them to get to the user’s browser and appear on the screen. The solution of the problem is Gzip compression.
Gzip is a simple technique that works by compressing your files into a zip file, which is faster for the user’s browser to load. The user’s browser then unzips the file and shows the content.
The majority of web servers can compress files in Gzip format either by calling a third-party module or using built-in routines. If you have to set up your server to enable Gzip compression use mod deflate for Apache, HttpGzipModule for Nginx, and follow these instructions for IIS.
Your benefit is irrefutable. Gzip compression reduces sizes of web pages up to 70% thus drastically increasing their speed.
You should never forget that nowadays the number of mobile web users has tremendously increased. According to StatCounter Global Stats in November 2016 mobile and tablet internet usage exceeded desktop worldwide. The Google Mobile Movement Study states that 9 out of 10 searchers have taken action as a result of a smartphone search. That’s why you should definitely take some steps to improve your website mobile performance as well.
MotoCMS has already done it. We’ve joined the AMP project started by Google. Accelerated Mobile Pages (AMP) was designed as an open standard for any publisher to have pages load quickly on mobile devices. The survey conducted by Google specialists proved that the web pages created with AMP loaded anywhere from 15 to 85% faster than their non-AMP versions.
These are only several effective ways to boost your website page speed. But they can make a good start for improving your website user experience, getting higher rankings and increasing your income in 2017.