Speed doesn’t kill these days.
It’s the lack of it that does. In an effort to encourage mobile websites to load faster, Facebook and Google are pushing their advertisers to optimize their sites, or else their ads might get limited visibility.
Facebook will soon make changes so that ads leading to slow loading websites will not appear to users who have slow or limited connections. Google, in a similar move, is set to tweak its algorithm to factor in page speed for mobile in their next update.
According to a recent Google study of over 10,000 mobile domains, websites load at the average of 19 seconds over 3G connections. Many of these are yet to be optimized for mobile browsing. Losing out on Facebook and Google traffic can mean thousands of visits lost for your site.
But that shouldn’t be the case. Improvements can be done across several layers – your network, back end, and front end. Here are seven ideas on how you could make those improvements.
Get fast web hosting
Not all web hosts are equal. Many small businesses are usually drawn to cheap shared hosting that promise “unlimited” bandwidth and storage. They sure are cheap, but your site actually competes for computing resources with possibly hundreds of other sites hosted on the same server. This can result in slower response times.
More computing resources allocated to your site usually means faster response. You can pony up for pricier VPS or dedicated hosting, but this is only feasible if you’re already expecting heavy usage. Cloud hosting takes the guesswork out of figuring out capacity, as it allows you to scale up or down depending on demand.
Hosting services also offer choices of which data centers around the world you’d like your site to be hosted. The nearer your server is to your user base, the faster it is for them to connect to your site.
Use CDNs and caching
Content delivery networks (CDNs) are becoming highly recommended solutions to reduce page loading times. CDNs work by making copies of your website’s content to multiple servers located around the globe so that visitors access your content through the servers physically nearest to them, thus reducing latency and resulting in quicker loading times.
Caching works by storing data in a temporary location for quicker access. Caching can be enabled on the server or on your visitor’s browser. Repeat visitors don’t have to load the same static files like your site’s logos and UI resources from your server again. Some CDN services have features that allow customizable caching options.
If your site is running on a CMS like WordPress or Drupal, there are caching plugins that you can use to configure so that your site doesn’t have to constantly fetch information from the main server or database every time a visitor loads content.
Use a fast and responsive theme
Google made a significant push for mobile-friendliness when it penalized websites that don’t display correctly on mobile devices. The solution for web designers is to use responsive design techniques, in which the site’s layout dynamically adapts depending on the screen size on which the site is being displayed.
A light, but beautiful, responsive theme should strike a balance between visual appeal and performance. If you are using a CMS, there are many beautiful responsive templates and themes available today. You can even deploy theme frameworks that allow full visual customization of your site without any coding skills necessary.
However, some of these themes and theme frameworks may trade off performance for visual appeal and ease of use. There is no easy indication whether a theme will be “light” enough. File sizes can be misleading, since responsive themes often require several sizes of the same image and can bloat the package’s file size but this doesn’t necessarily mean that all images have to be loaded. You can always check reviews or do some testing on your own using services like Google’s PageSpeed Insights to see what impact a theme has on your site.
A technique web designers and developers now use is minifying – a way of removing unnecessary characters like whitespaces, line breaks, and comments in the files without affecting how they function.
Most people don’t take kindly to just plain text content these days. Visuals like images and video, while engaging, are larger than text and can add to page loading times. Thus, you also have to be mindful of the media that you place on your site.
The most common image file formats supported by browsers are JPEG, PNG, and GIF. Know when to use these formats. JPGs are usually used for photos, PNGs for those needing transparency such as logos, and GIFs for images with animation.
If your image doesn’t need to support transparency or animation, opt to use JPEGs as a format since JPEGs are often lighter than PNGs and supports more colors than GIF. Keep in mind that some photo editors like Adobe Photoshop may retain metadata like camera information. Look for option to save image files without the metadata to save on a few more bytes.
As for video, using services like YouTube could take the hosting and bandwidth loads out of your server and place it on Google’s robust infrastructure. YouTube has its own compression formats and converts the video you upload to a variety of resolutions. It can automatically alter streaming quality depending on the user’s Internet speed.
Do away with URL shorteners
You might blame Twitter’s character limit for the popularity of URL shorteners. The advantage in these is that you can promote easy-to-remember shortened URLs to point to a specific page on your website. However, spammers and unscrupulous advertisements have also abused these.
Users’ browsing behaviors have since changed, and many URL shortening services have actually shut down. Facebook’s mobile app by default loads links using its in-app browser, so URL shortening isn’t as necessary as it used to be.
These actually just add another hop from your user to your site. In addition, if the shortening service you’re using crashes, the URL won’t resolve to your site as well. It’s better if you can do away with these unnecessary complications.
Use lazy loading for image-intensive content
One of causes of slow page loads is that browsers tend to download an entire page’s content and render all at once. One technique developers now use is lazy loading – or loading resources the moment they are needed.
This can be seen in most image and content-driven apps like Facebook or Instagram as an endless scrolling feature. Once you hit the last item, the app then fetches another batch of content as you scroll down. By loading a select number of items, users get to see a fully loaded page without waiting for the entire thing to finish. Users also get a more seamless browsing experience when subsequent items are loaded without having to load another page.
Note, however, that endless scrolling isn’t advised for mobile e-commerce websites. Notice how Amazon still implements their ‘next’ and ‘previous’ pagination on its mobile sites. Endless scrolling gets customers overwhelmed with choices, and they might find it difficult getting back to the listing they like. What their mobile site currently does is to just have a few elements like the search bar, banner, a single item deal of the day, and a handful of links loaded in the home page for quick loading.
It pays to comply
There are plenty of ways to get your website to load faster. Keep in mind that there are several factors that can affect page load speeds, and each combination can yield varying results. It always pays to continuously test your site to get the combination right.
Facebook may yet have another motive in pushing for these changes as they are promoting the use of Pages instead of pointing to external sites–perhaps to keep traffic within their ecosystem. Still, it pays to keep your efforts on their good side. Traffic to your site is still potential gains for you, regardless of where they come from, as long as you can provide an engaging experience for your visitors.