How to improve website speed on mobile

Over 50% of internet traffic in 2019 came from mobile devices, which means that you, as a website owner, have to consider having a mobile version of your website. Otherwise known as a responsive website – the design responds to all types of devices.

If you’re not using a responsive theme for your website  – you’re missing out on both SEO and traffic.

Do the math, if half of the internet traffic is on mobile and your site doesn’t look good on mobile, it’s very likely that 1 in every 2 people going on your site dropoff.

Not yet convinced a proper mobile version of your website is absolutely necessary?

Consider this: in 2018, Google officially announced that they’re implementing a mobile-first indexing mechanism. This means that mobile sites have priority over desktop websites when it comes to Search Engine Indexing (SEO).

If Google doesn’t like your site, the internet doesn’t like your site, it’s that simple.

Luckily, the majority of free and premium WordPress themes in the WordPress Theme Directory support responsive design, so it’s entirely possible you already have a proper mobile version of your website.

If you don’t – consider switching to a  theme that supports it. If you’re not sure if your site is responsive, you can test it with this Responsive Website Design Testing Tool.

Additionally, you can use Google’s Mobile-Friendly Test to check your website and see if it’s mobile-friendly. This tool will specify sections of your website that take longer to load, so you can quickly address the responsiveness problem.

Now that you have your mobile site, you need to optimize it properly, so it loads quickly for your visitors and has a positive effect on your search ranking.

First and foremost start by installing and enabling the LiteSpeed Cache plugin on your WordPress website.

For more information on how to do this, check out this article on how to enable LiteSpeed cache on your WordPress website.

Once the LiteSpeed Cache plugin is installed and activated, head to LiteSpeed Cache > Settings section, and click the Show Advanced Options button in the top-right corner:

Then, click on the Optimize tab. You will find tons of options in this tab, and at first, it will seem a bit convoluted.

In general, these options allow you to optimize and minify HTML, CSS, and JavaScript content on your website.

Minification (minify) is a bit of a funny word, but basically what it does is minimize the code and markup on your web pages and script files.

This process improves the response and speed of your website dramatically and helps users browsing your site on a mobile data as it reduces the size of it.

Here are the recommended settings for the Optimize tab:

CSS Minify: On

CSS Combine: On

JS Minify: On

JS Combine: On

CSS/JS Cache TTL: Default value (604800 seconds)

HTML Minify: On

Inline CSS Minify: On

Inline JS Minify: On

Load JS Deferred: On

Exclude JQuery: On

Remove Comments: On

Once those settings are in place, head to LiteSpeed Cache > Manage section, and click on the Purge All button:

In case you have any issues with formatting on your website after enabling these options, please check the following LiteSpeed Wiki article for more information on how to fix those.

Optimizing images

Image optimization is crucial for a solid mobile experience on your website. Images tell the story of your website, but if they’re not properly optimized they can slow down your site significantly.

The first tip is to stop using sliders if you have those on your site. Your website will load ten images in one slider, but the visitor only sees one at a time. Not good.

Images can help conversion rates if used in the right spots and sparingly but overused they slow down your website and become very distracting, so make sure to be mindful of that.

As a general rule, if an image is not adding to the story of your site, you can toss it.

Next, we can compress and optimize existing images manually by using services like TinyPNG, or we can use an automated solution like the Smush plugin.

We also recommend Lazy Loading images on your website, which means that the resource will only be loaded when the visitor scrolls down to that asset on the page, and not before. There are tons of plugins that can help you lazy load images, Lazy Load Optimizer is just one of many.

Don’t use full-screen pop-ups

Using call-to-action full-screen pop-ups is an excellent way to engage users on desktop, but can be very annoying to mobile users. If you have to use these on the desktop version of your website, make sure to add CSS/JavaScript code that will detect the user’s browser type and disable them  for mobile users.

The Conditional Display for Mobile plugin is handy, it controls what mobile users see on the mobile version of your site.

Non-responsive theme?

If you happen to use a theme that’s not responsive or you discovered you’re not after you built your website and can’t make the switch immediately – you can use a plugin that serves custom themes to mobile users as a workaround solution.

The WP Touch plugin will add a mobile-only theme to your site that is SEO optimized and passes all Google Mobile tests. You can customize the theme even with a free version, and you can upgrade to the Pro version if you want more control over your mobile site (which in reality, you should consider especially if you pull revenue from your site).

Mobile trends have been growing tremendously in past years, and they will only keep evolving, so it’s time to hop on the train and optimize your website for your mobile users!