April 10, 2018
How Website Carousels Are Hurting Your Mobile Site
Mobile web traffic continues to grow exponentially. More and more people turn to their mobile phones for research after seeing an ad on TV, hearing an ad on Spotify, or discovering a new brand during a conversation with a friend. According to Google, people today have twice as many interactions with brands on mobile than anywhere else. Nevertheless, as mobile web traffic has grown, the pace of improvement in mobile site speed has not kept up to par. In many industries, average mobile load time is over 9 seconds, three times higher than the recommended 3 seconds!
Mobile site speed plays a key role in creating a good user flow and experience. There are several tools we recommend for testing mobile site speed to help you evaluate how your site compares with the industry average. Additionally, page weight is closely correlated to site speed, but most advertisers experience difficulty in finding ways to significantly decrease page weight while maintaining the valuable content they want on their site. Below are five tips to help you increase your mobile site speed and gain a competitive advantage in your industry—no developer expertise necessary.
Font Awesome is a web font that is commonly used for icons on advertisers’ sites. Using a font for website icons as opposed to PNG or JPEG images makes a website designer’s life a lot easier, but it also adds significant page weight. The size of font awesome is about 90KB, which alone is 9% of the maximum recommended page weight. To check if your website is using font awesome: go to your website > right click > click inspect > select network in the top right > click on font > refresh the page and check if font awesome is listed.
The good news is that if your website uses font awesome, there are ways to dramatically decrease its size. Font awesome consists of over 100 icons, but most websites only use about four to five of them. To transform font awesome into a file that contains only the icons that you need for your site, you can use IcoMoon. IcoMoon allows you to select the font awesome icons that you want, and then download them as a font file to be used on your website at a fraction of font awesome’s page weight. As an alternative, you could also replace font awesome with a similar, but lighter font such as Material Icons by Google or The Noun Project.
Most images on websites are baseline images, which means that the top of the image loads first, then followed by the rest of the image. Progressive JPEGS, on the other hand, immediately load the entire image, but the image first appears slightly pixelated and then becomes clear once it is fully loaded.
Progressive JPEGS have two key benefits over baseline JPEGS. First, the entire image loads onto the page more quickly. Even if the image is slightly pixelated at first, this creates a better user experience than an image that is partially cut off for a few seconds while loading. Second, progressive JPEGS tend to be smaller in size, resulting in a faster loading site.
Oftentimes advertisers fall to prey to large image sizes, which create unnecessary page weight. In order to cut down the page weight of your images, you can first try to re-size the image. If you have a large image on your site that is only partially visible “above the fold” on a mobile device, remove the “below the fold” portion in order to significantly decrease page weight and help improve site speed. You can also compress images to help decrease their weight. Image compression reduces the size of an image file without reducing its quality. You can find several tools online to do this quickly and easily.
In addition to reducing page weight, you can also speed up load time by decreasing the overall number of resources on your page. For example, a page with two images that add up to 50KB will load faster, all else equal, than a page with 10 images that all add up to 50KB. If you have images that are far below the fold that do not add significant value to the page, you should consider removing them altogether. The potential negative impact on your site speed may outweigh any benefit they add.
Simply put, most advertisers use too many fonts on their site. Adding more than two to three fonts to your website is almost always unnecessary. The average font is about 40KB, so consolidating your fonts by getting rid of a few fonts that are not improving your user experience is an easy way to help improve your mobile site speed.
Mobile site speed plays a key role in the customer journey, ensuring sales. Reduce page weight, improve your site speed, and see the results for yourself. Contact us to learn more.