It’s NASCAR racing time again and 2017’s stock car racing battles are on. You might ask, “What does this have to do with online marketing?” Far more than you realize. No, you don’t have to become a NASCAR fan—just a student of the strategies racing teams use to compete for the winner’s circle. Those strategies are a lot like the tactics successful internet marketers must use on today’s mobile race track—the Internet.
Modify Your Website for Speed
Just like stock cars are modified to work better on shorter race tracks, you have to modify your website so it performs faster. When “53% of mobile site visitors leave a page that takes longer than three seconds to load,” it’s not going to work if your web pages take the typical 22 seconds to load. For your mobile users, speed is everything.
Here are the bounce probability stats Google shares.
- 3 seconds = 32% increase
- 5 seconds = 90% increase
- 6 seconds = 106% increase
- 10 seconds = 123% increase
Website Speed Tuneup Tools
We all want the internet racer’s equivalent of the NASCAR trophy—more conversions. So we want those low bounce probabilities working for us. We don’t want to lose half our audience because we took too long to reach their time limit. It’s time to tune up and modify our websites like a NASCAR driver competing to bring that checkered flag down.
Page Caching
When a driver begins the race, he’s going to race faster if he’s already learned the track. Page caching is the equivalent of your host learning your website, so it’s able to deliver content faster.
When a mobile user visits your website, you don’t want them waiting for:
- Your website to contact your host with a set of orders (often PHP code);
- Your host to access the database in which your content is stored;
- Your host to reconstruct your page into an HTML version the mobile device can render;
- Your webpage to arrive at the mobile device.
Rather you want to eliminate the time used in steps 2 and 3 by caching web pages. When you do this, a mobile request goes to the cache first. The request picks up the HTML-formatted page found there and carries that page straight to the mobile device.
Shopping Cart Caching
When a driver’s strategizing for the win, he’s already calculated when to make pit stops and how often. Too many stops and the trophy goes to another driver.
In a similar manner, too many stops along the path to delivering product information means slow load times. Consider Amazon. They calculated that for every 100ms of latency, they lost 1% in sales. There’s no question. Slow load times hurt profits.
Shopping cart caches pre-calculate what a shopper is likely to want to know. Caching things like categories, sizes, colors, product counts, etc., in addition to caching product pages, is one of the best ways to compete for first place in the market.
Browser Caching
At the end of the race, the winning driver is in the car, on the track, and ahead of the pack. He or she is not sitting in the parking lot.
Page caches reside on your hosting (the track), while browser caches reside in your visitor’s browser (the car). Yes, browser caching depends upon a previous visit; yet it’s a lot like having a fan who follows a favorite NASCAR driver. Interest is already there. The query is, “What’s happened since I last checked in?” If nothing is new, the page loads from the visitor’s browser instead of the host.
Content Delivery Network (CDN)
If a NASCAR driver’s going to win the race, when and where fueling takes place matters. Winners at content delivery likewise know when and where matters. For example, the location from which your content downloads affects delivery speeds.
A CDN places static content at different locations, so your website loads from a location that’s closer to your visitor. In other words even if your website is hosted in Maine, your content could be delivered to a Los Angeles-based visitor from a California network.
Proximity means an electronic path no longer slows down at multiple communication transfer points across the country. Instead, precious seconds are shaved off the delivery time.
Load Balancing
A racer’s performance depends on strategic planning as conditions change on the track. Load balancing is a strategy to keep your website fast when traffic conditions change. Scalability is essential so your site retains its delivery speed when traffic volumes surge upward. You don’t want your mobile delivery to throttle down!
That’s what makes load balancers important. They give you scalability. Using the power of algorithms, a load balancer distributes data across multiple servers. For example, when a data request comes in, the algorithms ensure data only goes to servers capable of responding quickly. Thus your delivery speed and dependability goes up, keeping your mobile users’ experience on the fast track.
Image Optimization
Racing performance depends on a car in tip-top shape, not just an experienced driver. Every part must be optimized for racing conditions—carefully maintained and customized for the track. Likewise, the images on your website must be optimized for mobile if you want them to work for you and not against you.
Images can really slow your website download times, so optimization is essential for speed. Techniques include choosing the right graphic types, combining multiple images and replacing graphics when possible with icon fonts and CSS.
Vector and Raster Images
Vector images (SVGs) can improve your download speed by eliminating the need for a large image. However, they only work effectively for images where retaining a photographic effect isn’t important. Think logos, text, icons and geometric shapes. SVG is well supported on mobile devices, and there are tools like SVGO to optimize your SVG file size.
However, not every graphic does well as a vector. The more detail an image contains, the less effective vector images become as speed enhancers. In this case, you need images in the raster format. This requires larger file sizes because raster images are pixel dependent. If sized too small, they ‘pixelate’ when you scale them up.
Because mobile screens use HiDPI or retina technology, they only render sharp results if the number of available pixels is two to four times that of a standard display. Fortunately, there are several ways to overcome this raster image issue.
- The CSS srcset attribute tells browsers which image to retrieve for a mobile user’s device.
- The CSS picture attribute directs the browser to the picture fitting its device’s size.
- The jpegtran tool compresses JPG files without loss of image quality.
- The OptiPNG or PNGOUT tools compress PNG files.
It’s also important to choose the right format type for your raster images. Photographs render best as JPGs. Images with transparent backgrounds should be rendered as PNG rather than GIF because you have more compression options and better color rendering with PNG.
CSS Sprites
This technique combines multiple images into one larger picture. When you create a CSS Sprite, mobile users fetch one image, which is a lot faster than retrieving multiple images from a website. Then you use CSS to control what portion of the image shows where.
What’s neat about this technique is the gain in speed you achieve, even when the image file your mobile user downloads is larger than the total combined file size of the smaller images. Because you can eliminate multiple requests, the CSS Sprite strategy speeds up your content delivery.
Minifying Codes/Scripts
You can reduce your page load time by stripping your code of unnecessary characters. For example, white spaces that aren’t needed to render JavaScript or CSS properly. New line characters, block delimiters and comments slow down the delivery of your page, so use a minifying tool to remove these unnecessary elements automatically.
Hiding Elements on Mobile
Image sliders can be impressive, yet slow down mobile download speeds. You might have images in your sidebars on your desktop-friendly website version. You can hide these elements through the CSS style sheet so they don’t load to mobile devices. That’s just a hint of what you can do through CSS to streamline the mobile experience for your visitors.
The key is to designate page elements with DIV and Class identities. Once these elements are present in the CSS, you can use DIV tags along with the ‘display:none;’ property to hide almost anything on mobile devices.
You can also use DIVs so mobile-friendly page elements load instead of desktop-oriented elements. This means you can have a header that’s optimized for mobile and one for desktop.
Summary
How can you become a winner in the Mobile-first race? Google sums it up in the following three goals.
- Focus on improving your page loading speed by lowering the number of individual pieces of content that make up a page. Google recommends fewer than 50.
- Fast also demands pages with smaller byte counts—less than 500KB, and faster display times—under 3 seconds.
- Finally, fast and responsive web servers are vital. You want to deliver the first byte in under 1.3 seconds.
The strategies we’ve shared will help you work toward the first two goals.
Sources: thinkwithgoogle.com | blog.gigaspaces.com
About Travis Steward
He is an outdoorsman and a family man. He is dedicated to creating and maintaining strong relationships both personally and professionally. His passion to solve multimedia needs ensures a quality product that will stand out and get results.
More posts by Travis Steward