How To Improve Blogger's Load Time For Mobile Users
Blogger is an incredibly fast platform out of the box but if you are a mobile user you might be experiencing some sluggishness and you aren't the only one.
Responsive websites are notorious for bringing desktop functionality at a mobile device convenience the fundamental issue with this is mobile devices don't have the internet speeds of a desktop device so what can you do about this?
Analyze Your Website
Visit your website from your mobile device or use the chrome developer tools to emulate it. Look at the content of your blog post and pay attention as you scroll down. As the user scrolls down the page they are likely never getting to the bottom so what's loading down there that you can remove. If you are using a sidebar and or footer area this is likely the main source of your bottleneck.
The sidebar and or footer typically contains most of your widgets in the form of external JS for social media buttons, advertisements that the user will never see and much more. So how can you remove it properly to improve your load time.
Say no to display="none". This tag actually doesn't do anything to improve your load time all it does is hide the content from loading so if you are loading 5 images in a div you are hiding you are still downloading those images (they simply aren't showing).
So now that we analyzed too problem areas what can we do to fix it?
Learn The Tag!
Blogger has some complex conditionals to it for it being a simple platform the one we are looking for though is this <b:if cond='data:blog.isMobileRequest == "false"'> this tag is a conditional that says if what ever is in this area is not a mobile request then load it. Here is an example open up your Blogger template and add this code to your template
<b:if cond='data:blog.isMobileRequest == "false"'>
<p> Hello World! </p>
</b:if>
The above code will load on your desktop but when you look at it from your mobile device it won't load. This is incredibly important as it now can solve our performance issues.
Wrap It Around The Code
This tag can virtually be used anywhere within your Blogger template whether its for an AdSense script or wrapping your entire sidebar. To start let's wrap it around your sidebar!
In your template search for sidebar-wrapper and it should appear with a list of widgets underneath!
Put this code before the code sidebar code
<b:if cond='data:blog.isMobileRequest == "false"'>
Afterwards at the end of the sidebar-wrapper add the ending </b:if> tag.
The best part is this code can be wrapped around everything! Have a footer? Add the code, want to remove a certain script from mobile wrap it in the code! You can use this to trim down the actual load time of your website greatly for mobile users.
A quick note though is if you are wanting to re optimize the ad placement for mobile users you will have to work with the reverse of the tag.
<b:if cond='data:blog.isMobileRequest == "true"'>
The above tag will only load if the user is on mobile thanks to that tag you can place new advertisements without going over the AdSense limit or cluttering your desktop website!
We Are All Ready Doing This
The Daily Exposition has made a new comeback if you would with a newer design and its highly optimized especially for mobile users making it fast and secure thanks to our free SSL certificate from Google!
No comments: