Website Performance Tips: Top Three (3) Tips To Optimize Your Mobile Site Speed

Posted on October 1, 2013. Filed under: website performance tips | Tags: , , , |

Page Speed is critical not just to desktop-based websites but to mobile sites as well. According to an article posted by Econsultancy:

  • 74% of users will abandon after waiting five seconds for a mobile site to load.
  • 57% have experienced problems when accessing a mobile site.
  • 46% would not return to a poor performing site.

Needless to say, every business owner must also ensure that their mobile-based website is fully optimized and performing good if not better than its desktop counterpart. Remember that “Conversion rate increases 74% when page load time improves from 8 to 2 seconds.

Here are some quick tips to help improve the response time of your website on mobile devices.

1. Clean up your codes. Remember that the smaller amount of data transferred, the faster your pages will load.

shutterstock_19458208-300x300

  • Minify Javascript, CSS and HTML. Remove Javascript libraries that you don’t really need. If you have several installed, see which one you use the most and check if you could apply one of its functions in multiple ways so you could get rid of the other ones. Compact your codes and remove extra white spaces, unnecessary characters, line breaks and comments to save bytes of data. Reduce the amount of HTML needed to render the above-the-fold content.
  • Avoid landing page redirects. Per Google PageSpeed Insights, redirects trigger an additional HTTP request-response and it is for this reason that you have to keep them in bare minimum. If it can not be helped, have the redirection done on the server-side rather than the client-side.
  • Reduce HTTP requests. Combine stylesheets and Javascripts into a single file.
  • Leverage browser caching. Set an expiry or a maximum age in the HTTP headers. In this way, the browser would be instructed to pull up previously downloaded resources locally rather than over the network.
  • Enable compression. Compress resources using gzip if possible.

2. Maintain minimal images. Apply proper format for your images. Compress their sizes too. Utilize sprites to group multiple pictures into a single file. Eliminate the ones that function for visual display purposes only.  Employ CSS3 for box shadows, border radius, gradients, skews and other effects.

CSS3-Toolkit

3. Replace Click Events with Touch Events. There exists a 300ms (+/-) delay between these two events therefore talk to your PH iOS  developer or PH Android developer to program the codes in such a way that users could access information through touch instead of click.

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: