Due to the popularity of smartphones, Mobile Page Speed Optimization has became one of the most popular topic in the web industry in recent year. Slow mobile page could potentially cost you million in lost sales every year, so you must learn to make your mobile site loads faster to your potential customer!
There are 2 most popular mobile web configuration we can see in the web industry today: Responsive Design & Dynamic Serving.
Responsive Design: *Google Recommended configuration
Serves the same HTML code & content on the same URL regardless of PC or mobile devices. Then renders and displays it differently, which so called ‘Responsive’.
Serve different HTML code & content on the same URL based on the type of devices.
OK, so you may ask which one should you use? Should you use Responsive Design as it was recommended by Google? Well, before we know which method perform better, we have to find out what is the request cycle and how the server delivers the content to the users based on users’ request.
As you can seen above, Dynamic Serving method takes 1 more additional steps before the server delivers requested content to end users. The additional step is users’ browser agent detection. Due to the extra steps needed, it needs more time to complete entire request cycle.
So, does this means that Responsive Design is the best solution to deal with the mobile page speed? No, we can’t make any conclusion yet. Let’s consider the following points:
In this scenario, Dynamic Serving method seems much more better in terms of page speed if compare it to Responsive Design, as it only download smaller and optimized content.
There is no absolute answer for which mobile web configuration is much more better. In the scenario above, Dynamic Serving could be page speed optimized over the Responsive Design. But please bear in mind that, by doing so, you are requires to maintain 2 different HTML code & content, this will get you more busy and difficult to maintain.
Personally, I’m more prefer Responsive Design, as I only need to write once and serve my HTML code & content on everywhere (PC, Tablet, Phone). There are a lot of page speed optimization techniques we still can apply to the Responsive Design to overcome the page speed issue, such as Lazy Load, Ajax Loaded Content, Responsive Images and etc.
So which configuration are you using? Please share on comment section! 🙂