Lately the news is filled with anger over how slow the mobile web is, going so far as to call it “broken.” Many people point to the tracking and advertising scripts as the culprit. It’s your call as a site owner whether to load those scripts or not.
I can offer other tips to all you developers who want to speed up your responsive templates and sites. I go over them below.
Mobile devices are slow
First off, it is an eye-opener to see how slow sites load on a poor connection. I have first hand experience. Our office is situated in an underground-bunker-like floor in the building. Thus my phone has a slow connection all day.
I’ve also been paying more attention to connection speed as I traveled through the city. It became clear that, even in 2015, there are a lot of places where reception is just plain bad.
If you’re a real nerd and want to see what I mean, you can probe your carrier’s speed with the Speedtest app wherever you happen to be. This is more exact than relying on what your phone says in the status bar. Get the app at Google Play or the App Store.
This should help you understand the plight of the typical mobile user better. Even if the site visitor has a 4g capable phone, their actual speed will vary, especially if they are on the move. Improving speed is a worthwhile goal since bandwidth is very limited in the real world.
Easier wins: Combining resources
Before getting too wrapped up in very technical aspects of speed, pay attention to the easy fixes first. Loading your site in your inspector’s Net panel is a good place to start.
See if there are any calls to resources that can be combined or cut out completely. Also pay attention to resources that don’t load at all, like those with 404 errors. This makes loading take longer.
CDNs can help, but they go down
Content delivery networks, or CDNs, can speed up loading because they load resources concurrently. However, it’s important to have fallbacks for any calls to CDNs.
For instance, Google Fonts is a type of CDN. It makes the news when it goes down because many websites’ text looks wonky. So ensure your font styles have a fallback that looks close enough to what you intend.
font-family: “Open Sans”, Arial, sans-serif;
but a bad idea (only one family specified with no fall back):
font-family: “Open Sans”;
Here you’re playing the lottery with whatever the browser decides when the Google Font is down. And your site might be one of the (un)lucky ones that makes the news.
It’s tempting to stick a CDN link in the HTML and call it a day. But if it loads essential dependencies, it should have a fallback so the site isn’t disabled during an outage.
Find tools that help you test and develop
Unless you’re rich enough to buy every mobile device on the market, you have to find ways to test different browsers and devices. There are tools out there that get you close. Here are some emulators and tools I’ve found helpful:
- iPhone emulator
- Another iPhone emulator
- Media Query Bookmarlet (tells you the exact window size when you resize your browser)
- CSS-tricks.com reference of common viewport sizes
- Google Chrome's device emulator in the inspector
Images shouldn’t be any bigger than necessary
Images are a huge resource as well, and since they load in inconsistent ways, they can give the impression of the site being slower.
Much of the site’s document may load without the images, so users see blank areas until they pop in, which is jarring and gives the impression of slowness when the delay is long enough. I already blogged about this here.
The take away is to make images as small as possible in both pixel and file size and avoid any unnecessary “fluff” images -- the performance cost is too high.
Looking to the future
I believe that eventually network speeds and reliability will be much better and developers won’t have to worry over every little byte and millisecond. Until then it's a game of taking advantage of all the tips for improving speed.
Do you want to avoid the hassle and start with great looking, fast mobile templates out of the box? Create a site with the Soholaunch Site Builder!