All posts by John Beales

A photo of a black heavy truck in front of autumn foliage, for marketing the 2018 Wowtrucks calendar

Trucking Calendars for 2018

Happy New Year! We’re five days into 2018, do you have an awesome truck-filled calendar on your wall, (or the back of your sleeper), yet? If not, here are four eleven of our favourite trucking calendars for 2018:

Jan 10 Update: There are six more calendars that were released or we found since publishing. This is fast becoming a Super Trucking Calendar Round-Up!

Shell ROTELLA SuperRigs

A promotional image for the 2018 Shell ROTELLA SuperRigs Calendar

Loaded with chrome, shine, and polish, the SuperRigs calendar is a classic, and the 2018 edition just became available.

Wowtrucks Calendar

A photo of a black heavy truck in front of autumn foliage, for marketing the 2018 Wowtrucks calendar

Canada’s own Wowtrucks calendar is full of wow-inspiring trucks. They’ve got multi-packs with other goodies thrown in too.

2018 True North: Women in Transport  Calendar

A marketing image for the 2018 True North: Women in Transport calendar.

Also from Wowtrucks, the True North: Women in Transport calendar looks like it’s already sold out, maybe they can be convinced to print some more.

2018 Truck-Eating Bridge Calendar

A promo image for the 2018 Truck-Eating Bridge calendar

That’s right, Davenport, Iowa’s (in)famous Truck-Eating bridge has its own calendar, and profits go to a literacy charity for local kids. You can order your copy here and hang it in the shop, truck, or wherever you need a reminder to pay attention to low bridge warnings!

Volvo Trucks 2018 Calendar

A promotional image for the Volvo Trucks 2018 calendar.

Volvo Trucks North America is offering their annual calendar. You can get yours at www.proforma.com/volvopublic.

Kenworth Twofer

The January page of Kenworth's 2018 Appointment Calendar.

Kenworth’s giving us not one, but two calendars in 2018. They have both a wall calendar and an appointment calendar available.

Mack 2018 Wall Calendar

A promotional image for the 2018 Mack Wall Calendar

Mack Trucks has a had a photo contest back in the springtime looking for real Mack drivers to put in their calendar. It looks like they combined winners from the contest with some product photos, (including the new Mack Anthem), for a good-looking calendar, available from the Mack Shop.

Peterbilt Twofer

A promo image for the 2018 Peterbilt Appointment Calendar.

Like Kenworth, Peterbilt has both an Appointment Calendar and a Wall Calendar this year, both available at www.dcgonline.net/peterbiltretail.

Midwest Peterbilt

The cover of Midwest Peterbilt's 2018 Working Trucks calendar.

It looks like it’s only available from the dealerships, but the Midwest Peterbilt has a calendar filled with working trucks. If you have to stop by one of the dealerships soon & like Petes, try asking about the calendar.

 

Are there more?

If you know of more Trucking calendars let us know @4RoadService on Twitter or on our Facebook page.

Making 4RoadService.com load faster, Smashing edition

We have always tried to make 4RoadService fast to use, and especially so since our current design came online in 2015, but “fast” is subjective, and changes over time, so when Smashing Magazineannounced their Front-End Performance Challenge at the end of October, we knew we wanted to level-up our performance, so we set to work.

Non-Technical Summary

The homepage is usable 45% sooner than it used to be, and downloads 23%* less data. The most dramatic improvement was the homepage, but the other pages we tested had improvements as well.

* This number removes the banner for the “Featured Listing” at the bottom of the homepage. It changes frequently so so including it gives us inconsistent numbers that either hide or over-emphasize the improvements on the rest of the page.

The rest of this post is more technical than anything we’ve written before, and is aimed at web developers & performance geeks. Proceed at your own risk!

Baseline

We’re optimizing for three views that are the most important to someone looking for repair service: the homepage, search results, and the listing detail page.

Figure 1: Performance before Optimization (Lower is better)
Page Load Time First Meaningful Paint Perceptual Speed Index Total Download Size
Homepage 2.921s 2,220ms 4,154 380KB
Search Results 6.62s 1,630ms 5,746 2,080KB
Listing Page 2.924s 1,590ms 5,276 555KB

Quick Wins

Being a Cloudflare customer made some things pretty quick & easy:

  • We turned on WebP conversion & Lossy compression for images in Cloudflare. While this shrinks image files, it could be better:
    • PNGs and Gifs are converted to lossless WebP images, (only JPEGs get lossy compression from Cloudflare). Using lossy compression would save more bandwidth.
    • Only filenames ending in .jpg, .jpeg, .png, .gif, and .img are WebP-ized, so images we manipulate on the fly with a PHP file need more trickery
  • Turn on auto-minifaction of HTML, (CSS and JS are minified in our build system).

Cache Static Assets

Part 1: Assets that we create

We gave all static assets on 4RoadService.com a versioned URL using this strategy, (but not on WordPress), then set caching headers to tell browsers, (and other caches), to cache static assets for at least a year.

Part 2: User-Uploaded Assets

Repair companies with paid listings on 4RoadService can upload their company logo, a banner, and some photos.  Since they don’t change at the same time as we make changes to the 4RoadService.com code they need their own versioning scheme. In our old system new versions of images didn’t get new URLs, so we changed that so whenever a new image is uploaded it gets a unique URL, and set far-future expiry headers on those as well.

Optimize the Critical Rendering Path

The Critical Rendering Path is the work the web browser does to render a web page, and it turns out we can tweak our web pages to make it happen quickly, but the “normal” way of building websites is pretty slow.

Async all the JS

When we built the current version of 4RoadService back in 2015 we made most of our Javascript asynchronous, but there’s one stats package that we just copied & pasted the code for. It turned out it was loading slowly and blocking rendering. Adding an
asyncattribute to the script tag cleared that up and shaved 200ms off the time it took to reach the DOMContentLoaded event.

HTTP/2 Server Push things that block rendering, (hint: it’s styles)

The next biggest blocker to our CRP being speedy was our main CSS file. Even with HTTP/2’s multiplexing, there was still a period of time between when we started sending the HTML and when the browser requested the CSS file. HTTP/2 Server Push to the rescue!

HTTP/2 Server Push is fantastically simple to set up. If the web server supports it all that’s needed is adding a HTTP response header and the web server handles the rest for you. While it helped our rendering time, the difference wasn’t as dramatic as we had hoped, but it was an incremental improvement of 50-100ms.

We also tried HTTP/2 Server Pushing our main Javascript file, but since it was already loading asynchronously it didn’t help, and possibly harmed, the load speed.

Status Check

Everything discussed up to this point improved the DOMContentLoaded event, and Lighthouse‘s First Meaningful Paint, First Interactive, and Consistently Interactive values but about a second. Depending on the page that’s loading that’s  a 15% to 33% improvement. Not bad!

What Remains

Once the browser starts receiving the web page the first several steps now progress very quickly. Most room for improvement still exists at both ends of the page load: our time-to-first-byte could be improved, (it’s just under 1/2 second), and on some pages there are large images that take a while to finish loading, (this is especially true on very large screens). To tackle these problems we can make our resized-on-the-fly images, (user-uploaded images), cacheable, and WebP-able, by Cloudflare, optimize our source images better, and speed up our server code. Because of the deadline on the Smashing Magazine challenge we focused on the first two.

What doesn’t seem worth doing (right now)

Heading into the challenge we thought we would be breaking up our monolithic stylesheet file, and some of our concatenated Javascript, to take advantage of HTTP/2’s parallel downloads, but the stylesheet is relatively fast right now, and the Javascript comes in late, and is relatively fast, so there are bigger gains to be found elsewhere. We feel like there’s about 100ms to be gained here, and will revisit it in the future.

We could also break up our styles by media query and use several <link> tags with different media attributes. When a browser encounters a <link> to a stylesheet with a media query that’s not applicable it doesn’t block rendering for that file, so there may be gains, especially for people on mobile devices, however because the styles are fairly quick, and we would have to make guesses about which CSS files to send with a HTTP/2 Push, we’ll explore this later.

Optimize Those Last Few Images

Remember how we thought using lossy WebP would improve the download size of some images? Cloudinary’s Website Speed Test says that the gains could be big, especially for large PNGs like the orange truck on our homepage. Since the large images were taking 5-7 seconds to finish downloading on a very large screen we went ahead and optimized these in 2 steps.

Step 1: Optimize non-WebP images

Our build process already compresses our images, but we can do better. By tweaking the algorithms used for image optimization, then waiting forever while they run, (ahem, Guetzli), we shrunk the file sizes for everyone who can’t accept WebP images.

Step 2: Lossy WebP, and special URLs

We also added a step to our build process to create lossy WebP versions of every image. The size differences are incredible, for example, for the largest version of the orange truck on our homepage, the unoptimized PNG is 4.2MB, the optimized PNG is 1.1MB, and the WebP is 244KB. If you can use Lossy WebP, do.

These magical WebP images cause a problem, though: Not all browsers understand them. We could solve that by serving a WebP image if the browser sends images/web in its Accept HTTP header, but since CloudFlare caches our images it would cache the WebP version of a file and serve it to non-WebP-capable browsers, so we have to have separate URLs for WebP images, which means some image URLs change if the browser sends an image/webp Accept header. Once that happens both our optimized non-WebP images and our tiny, lossy, WebP images are cached in Cloudflare’s CDN for ultimate image speed.

Step 3: Compress user-supplied images as much as possible

Compressing the user-supplied images is more tricky. We resize some of them on-the-fly in PHP, and the compression tools in PHP don’t seem to be as good as the tools we use in our node-based build process. However, we can take advantage of Cloudflare’s compression. Yes, it’s not as good as the lossy WebP images we’re serving for our own assets, but it’s better than nothing. There was a hurdle, where Cloudflare doesn’t apply image compression to URLs ending in .php, so we re-wrote the URLs to look like image files and Cloudflare started compressing them for us. Problem solved-ish.

Next Steps

This is all we had time to do before the deadline for the challenge, but we have identified a few things to keep working on:

  • Improve our time-to-first-byte: We’re working on one thing that should improve this a lot. There may also be ways to improve it by caching more, but some of our pages are customized for logged-in users, so we’ll have to work on caching pages while keeping customizations for logged-in users.
  • Improve compression of user-provided images: We need to spend some time researching PHP compression systems.
  • Resource Hints: We can tell the browser what outside services we’re going to connect to in HTTP headers, then it can get started on the connection without waiting to parse the HTML.
  • Break up CSS and JS: This time around we decided there are bigger fish to try than breaking up our CSS & JS files to take advantage of HTTP/2’s parallelization, but doing this should yield a small reduction in load time.
  • Service Workers, and Progressive-Web-App-izing 4RoadService: Some of 4RoadService relies on getting accurate, fresh, data from the server, but some things can be sped up with Service Workers and locally-cached data.

Conclusion

That’s as much as we snuck in under Smashing Magazine’s deadline. So, how did we do?

Figure 2: Performance After Optimization (Lower is better)
Page Load Time First Meaningful Paint Perceptual Speed Index Total Download Size
Homepage 1.765s
(-39%)
1,290ms
(-42%)
1,816
(-56%)
220KB
(-42%)
Search Results 4.255s
(-36%)
1,480ms
(-9%)
4,781
(-17%)
808KB
(-61%)
Listing Page 2.117s
(-27%)
1,480ms
(-7%)
4,361
(-17%)
438KB
(-21%)

That’s not too bad. This effort took less than half a week of developer time and produced very real improvements to our page load times, and reductions to the number of bytes we’re sending to our largely-mobile audience. In addition we have identified things that we can keep improving. Participating in the Smashing Magazine Front-End Performance challenge was a worthwhile exercise, not just to bring our skills up to speed on some new front-end performance practises, but to improve the experience of people using 4RoadService and let them find help quickly.

4RoadService Truck Repair App Winter 2017 Promo Image

Keeping 4RoadService Apps Fresh on your Phone

Some, (actually, most) people prefer native apps over a great mobile website, so it’s time to shine the light on the 4RoadService Breakdown Directory Mobile Apps.

Android

Android devices are the mobile workhorse of the trucking industry, and while we would prefer you’re rolling instead of looking up repair vendors, when you do need some truck repairs 4RoadService for Android is there.

Recent Android highlights include:
  • 12 updates in 2016, and we’ve already released an update in 2017.
  • Maps of search results
  • Error Reporting and Vendor Suggestions from within the app, (and thanks to anyone that submitted reports or suggestions – you rock!)
  • Lots of error fixes, because the last thing you need is a broken app when you’ve got a broken truck.

iPhone

Apple seems to rule the world, so it’s only appropriate to have a world-ruling iPhone app. That’s why 4RoadService for iPhone, (the original Truck Repair Locator in the App Store), got a complete rewrite in 2016, just in time for Christmas, with some snazzy new features:

  • Find truck service near you with one tap and your phone’s GPS.
  • Save your favourite repair companies to your phone.
  • Report problems & suggest new repair shops from within the app.
  • See repair shops on a map.

While both our Android and iOS apps are great, there’s so much more that we can, and will do with them. Keep your auto-update turned on and check the release notes to keep up with the latest tricks we add to your phone.

Improved City Location Data, and and Android Update Roundup

There are a lot of Atlantas in the USA.
There are a lot of Atlantas in the USA.

4RoadService.com is always being updated & improved, but this week we have some updates that we would like to share.

Improved & Faster City Location Data

We have cleaned, merged, sorted, imported, beautified, and turbocharged our location data for cities, added several thousand more cities to our database, and improved the accuracy of the location of most cities, (over 60,000 of them)!  Cities with multiple spellings have been merged, but old spelling and abbreviations are still recognized, so if you need Truck Repair in Eighty-Eight, KY, you can type “88 ky” “Eighty Eight Kentucky” or any combination of those into the search box and we’ll find it. If ever you search for a city and can’t find it, let us know, and we’ll add it, (Twitter & Facebook work too).

Eighty Eight, Kentucky 42130

Several non-cities that had worked their way into our data-set, (mostly because they have their own ZIP codes), have been removed, so no more suggestions to search near the city of “Dept of Human Resources!”

Even with all the improvements, the auto-suggestion for cities has been sped up. That’s right, we made it faster.

Android App Update Roundup

A new version of 4 Road Service for Android went live late last week. This new version supports searching by ZIP or Postal code in addition to using your phone or tablet’s GPS or searching by city, so if you need a tow in 90210, you can find it on your Android device. Previously, but not announced here, the app was updated to let you suggest new service providers and report problems with listings – so use the orange buttons in the app to let us know who we’re missing!

New Design, New Logo, New Possibilities

Regular visitors to 4RoadService will have noticed that we’re sporting an entirely new design – and even a new logo! Besides improving our looks the new design is a responsive one – which means that 4RoadService.com works great to find truck repair on phones and tablets, as well as computers, and it’s fast.

Mobile-First

Our old design dated from 2008. At that point the iPhone was less than a year old and there were no Android phones yet. The mobile web was very different, the few smartphones out there were Blackberries, and if you were using the web on your phone it was probably a WAP site.

Since 2008 smartphones have saturated the world. Today over half of the people who visit 4RoadService.com do so on mobile devices so we built our new design for mobile devices first, and use Responsive Web Design to provide a desktop layout when the website is viewed on a computer. We want everyone, from the dispatcher at a desk with a 24-inch monitor to the co-driver in the sleeper with a laptop to the driver stuck at the side of the road with looking up the closest truck repair company on his phone, to find the service they are looking for quickly and easily.

Fast

Part of designing for all screen sizes is designing for all network connections. If you’re in a mountain pass with a patchy cell connection making you wait while your phone downloads images 10 times the size of the screen doesn’t help you get back on the road quickly, it’s just frustrating and possibly expensive. We’re proud that the new design is incredibly fast-loading. It’s so fast that we’ll be writing a whole separate blog post about it in a few days, so stay tuned.

Evolving

The great thing about the web is that anything can change at anytime, so 4 Road Service will keep being tuned to be faster and easier to use. If you run into problems or have suggestions please let us know with our contact form, or hit us up on Facebook or @4RoadService on Twitter.

New Android App

Search Results in the 4RoadService.com Android AppWe are proud to announce that our brand new Android app, Truck Repair Service Locator by 4RoadService.com is available on Google Play and the Amazon Appstore.

Truck Repair Service Locator is completely re-written as a native Android app for Android Phones and Tablets. Features include:

  • Search for road service near your current location, (using the phone or tablet’s GPS)
  • Choose a city where you need service.
  • Choose a location on a map to find service nearby
  • Save your favourite service providers
  • Show the service provider’s location on a map
  • 1-Tap calling: Phone a service provider by tapping it’s phone number
  • Share a service provider’s contact information with other drivers using Android’s built-in sharing, (great for dispatchers to E-mail repair information to drivers, or the other way around!)

Truck Repair Service Locator is not an upgrade of our old Android app, it is a completely new app that must be installed from Google Play or the Amazon Appstore. Install it today so it’s there when you need it.

Temporary Downtime for Server Upgrade

We are upgrading the server that powers 4RoadService.com today. This will require a short time when the site will be unavailable. We will post updates on our Twitter account as we perform the upgrade, so you can follow along there and know when to start hitting refresh.

The length of the outage will vary depending on where you are in the world and how long your Internet Service Provider caches internet address information.

Multiple Categories Per Listing

Today we’re proud to launch multiple categories per listing on 4RoadService.com. This means that you no longer need to buy a separate listing for every category that you want to appear in. To add categories to your listings log in to your account at https://www.4roadservice.com/login and choose Show & Edit Listings from the menu on the left.

New Pricing

With the launch of multiple categories per listing we have a new rate card. We’ve chosen rates that represent the added value of being listed in multiple categories without being unaffordable. We’re still one of the most affordable road service directories there is.

Suggestions for updating your listings

  • Update your listings to include all appropriate categories.
  • You should now only need one listing per location, so delete any old listings that existed only to appear in multiple categories.
  • If you have any trouble or questions we’ll post answers to common problems here on the blog. If your answer isn’t here send us an E-mail. We’ll do our best to solve any problems quickly, but please bear with us if there are a lot of people to help out.