Page speed is a factor in search engine optimization. If you have a really slow website, it can hurt you. That is why many people like to host in the cloud, use CDN and make sure all of their page speed optimization is line. If you have a WordPress site you can usually just install W3C Total Cache. I love that plugin, it does all of the good stuff.
If you want to find out how fast your website is on mobile phones and desktop you can check it here.
https://developers.google.com/speed/pagespeed/insights/
Google will give you some great insight.
That being said, there are some important guidelines you should follow to make sure you mobile website is running as fast as possible. Let’s jump into it shall we?
Fast Server Response
According to Google, your server should respond within 200 milliseconds. In fact, they want it to respond even faster than that. I know that many websites on the Internet are slower than that, so this is a big task by Google.
Limited Redirects
Too many 301 or 302 redirects have always been a bad thing. But this is usually an issue for larger websites, not the little guys. Regardless, each redirect requires an extra DNS lookup and each of those take time.
How to Make your Mobile Website Faster
Cut Down the Round Trips
OK, this one is a little technical and if you are not a computer sciences person you might not get it. But basically, you want to make sure the page that you are loading is not too big. So that is how I described it, look how Google describes this… TPC stands for Transmission Control Protocol by the way.
Due to how TCP estimates the capacity of a connection (i.e. TCP Slow Start), a new TCP connection cannot immediately use the full available bandwidth between the client and the server. Because of this, the server can send up to 10 TCP packets on a new connection (~14KB) in first roundtrip, and then it must wait for client to acknowledge this data before it can grow its congestion window and proceed to deliver more data.
Due to this TCP behavior, it is important to optimize your content to minimize the number of roundtrips required to deliver the necessary data to perform the first render of the page. Ideally, the ATF content should fit under 14KB – this allows the browser to paint the page after just one roundtrip. Also, it is important to note that the 10 packet (IW10) limit is a recent update to the TCP standard: you should ensure that your server is upgraded to latest version to take advantage of this change. Otherwise, the limit will likely be 3-4 packets!
Avoid Blocking Javascript and CSS
A browser needs to parse a page before rending it. If it encounters a non-async or blocking external script during parsing then it has to take a sec and download that resource. Then of course each time it does that it adds another roundtrip. So Google recommends that the JavaScript and CSS needed to render the above the fold should be inlined (which is a big change to what they usually recommend), and JavaScript or CSS needed to add additional functionality to the page should be loaded after the ATF (Above the Fold) content has been delivered.
Reserve time for the Browser
Google wants you to have a little wiggle room, so they ask that you reserve about 200 milliseconds for the browser overhead. Almost enough time to start to think about taking a sip of coffee.
Optimize your Javascript and CSS
It is not just Google, Yahoo, Bing and everyone else wants you to do this if you can. Yahoo says, “Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.”
As you can see, this one is a no brainer. It is usually one of the first things that we do, along with minimizing images when that is an issue. But there is a lot that goes into page speed that is not addressed here.
Other things to Consider
When it comes to 4g networks lower roundtrip latencies are one of the best improvements you can make. While that is the case, 3g is still the dominate metric around the world so keep those users top of mind.
If you are loading a Javascript library such as JQuery it is a best practice to do that in the ATF content to reduce latency.
If you are using a Javascript or Ajax framework to render the page do that on the server level.
SPDY (pronounced speedy) is an open networking protocol developed primarily at Google for transporting web content. If you are using SPDY or HTTP 2.0 you may be able to reduce latency page loads as they make better use of TCP connections. That is just what they are built for. HTTP 2.0 is the next planned version of the HTTP network protocol used by the World Wide Web.
If you need to determine the most problematic CSS on the page you can use Chrome Developer Tools audit panel to run a web page performance report. There is a section in the report on Remove Used CSS Rules. If you don’t need it, get it out of there.
Make sure your server is running the latest version of the necessary operating system and if you are using a CSP (Content Security Policy) you might need to make updates. We want to stay away from inline styles because they lead to unnecessary code.
Summing up How to Make sure your Mobile Website is Running Fast
I wrote this post mainly for a developer. So if you are not a computer person, it might be technical. Really, the main points are this.
- Server must render the response (< 200 ms)
- Number of redirects should be minimized
- Number of roundtrips to first render should be minimized
- Avoid external blocking JavaScript and CSS in above-the-fold content
- Reserve time for browser layout and rendering (200 ms)
- Optimize JavaScript execution and rendering time
Keep in mind you can always start with using the tool: https://developers.google.com/speed/pagespeed/insights/
Once you know what the issues are, you can pass them on to your developer who will fix you up.
Have a mobile page speed question? Ask below!
