Google PageSpeed Race 2017
19.12.2017

This is how camping gets digitalized

Campsy is a portal where users can view more than two thousand camping sites and filter out the best offer for them. Most users book when they are already on the road and thus use their smartphone for it. To reach an optimized mobile site, Campsy has participated in the Google PageSpeed Race 2017 and did very well.

At Campsy, users can filter over two thousand offers by type of camping, location and price, browse photos and reviews, and finally conform their booking. The portals target groups are families, older couples or groups of friends. But there is one thing they have in common: They often search for campsites when they are already on the road. The majority of the bookings on Campsy are accordingly done via smartphone, says Phillip Hildebrand, CEO and founder of Campsy. “Mobile is therefore very important for us”. A fast and easy user experience even in slow network environments is thus essential for Campsy. This includes an optimized mobile website.

Improved performance by participating in the Google PageSpeed Race

For Campsy, the PageSpeed Race was a good opportunity to work on their site’s performance. The PageSpeed Race is a two-month competition in which 45 companies in Germany have been working on the optimization of their websites and have been given technical advice by Google experts. The three URLs, start, category, and product details pages were selected. For this purpose, the participants improved their page using Google’s PageSpeed Insights, which is based on a series of best practice checks and measures the performance of a page on mobile devices and desktop computers.

 

To do this, the URL is retrieved once with a mobile user agent and a second time with a desktop user agent. The PageSpeed rating is then determined on a scale of 0 to 100 points. A powerful page has a score of 85 or more. PageSpeed Insight shows the possibilities of increasing the performance of a page with regard to the time required to load the content that is visible without scrolling, and the time required to fully load the page.

 

The reasons for participating in the PageSpeed Race were multifaceted: “Of course, user experience is very important. However, this also means that the site speed is very important for our supply chain management”, says Hillenbrand. In particular, the degree of optimization of the page was expandable and had only 23 of 100 points at first. The loading time at the start of the competition was over 9 seconds. Therefore, the entire website has been updated as part of  the quarterly planning.

Image optimization, CSS and prerendering JavaScripts for more speed

During the analysis, the Campsy team found that the main problems in the frontend came from the images as well as the loading of the JavaScripts and the CSS files because they blocked the speed and scripts. To remedy this, Campsy used various optimization levers proposed by PageSpeed Insights. While initially optimizing the backend, the next steps were improving server response times and browser caching, optimize the images, and improve the visually visible part of the start, category and product detail pages. In addition to optimizing the CSS deployment, the prerendering of the JavaScripts proved to be an important measure. This is the preloading of a resource into the cache of a browser. 

The advantage is that the resource is loaded in the background without the user noticing it. When a user retrieves a referenced web page, it is displayed almost immediately because it has already been rendered before. “To optimize the images, we used a tool called Cloudinary. The tool has taken over the task of cropping and scaling the images”, says Levi Ferreira.

Reduction of loading time by 58%

“It was a known problem that our website had to be faster. The Google PageSpeed Race gave us the motivation to assert ourselves against other participants and prioritize this problem on our list”, says Amaryllis Liampoti, who is responsible for Marketing at Campsy. Levi Ferreira, Director of Engineering added, “For us, a well-performing website was also at the top of our list. However, of course we also have to look after the continuous improvement of the product thus we gave this project a lower priorization. Instead of moving our plans to the next month again and again, the Google PageSpeed Race gave us the impetus to say ‘Ok, we’ll make it – and we have done that.'”

And the results are incredible: Thanks to the implementation of the measures proposed by PageSpeed ​​Insight, Campsy can increase +48 PageSpeed ​​Insights points on average and occupies the first place in one of two profit categories.

 

The loading time of the three URLs could be significantly improved. While the boot time of the home page was reduced by 24 percent to 6.1 seconds, the category page was lowered from 14.54 seconds by 43 percent to 8.3 seconds. The charging time of the product detail page could even be improved from 9.56 seconds to 4 seconds. This represents an improvement of 58 percent. Campsys Conclusion: The loading time has improved considerably, just like the speed of the web pages. The measures are sustainable and serve as a good starting point in order to continually improve further. “I think you have to keep an eye on it. There are still things that we would like to improve. We simply want to follow the principle that all the things we do improve the site and not deteriorate it”, says Levi Ferreira. Philipp Hillenbrand adds: “We have primarily improved the basis of the website to provide a long-term infrastructure. We have improved the foundation of the website.”

Free Tool TestMySite for mobile website optimization

If you also want to optimize your mobile website, you can test the free “Test My Site” tool. With “Test My Site”, website operators can analyze their mobile performance. Considered are: the speed of the mobile site, the competitiveness and the number of site visitors that the company might lose by loading its site too long. You will then receive a report with suggestions for improvement for your website.

This article is partially based on a publication of think with Google.

Source of cover image: cash14 / iStock

[plista]