Experts Share Mobile Optimization Tips For Faster Page Load Time

Have you ever asked yourself what secret tips the website speed optimization experts implemented to increase the page load time of their website?

I decided to reach out to a couple of website speed experts on what specific actions they took to speed up their website.

Before we move on to what the experts had to say, I’ll like to reveal two missing puzzles as to why it seems that all the website and mobile optimization tips you’ve carried out on your site is not yielding any results. I call them the secret ingredients.

This post may contain affiliate links. See full disclosure here.

The first secret ingredient for quick page load time is…

The quality of your web hosting.

It doesn’t matter how many plugins you install to optimize your site for fast page speed. If your web hosting sucks, none of that will yield any result.

Before I started blogging, I carried out in-depth research on the best hosting platform to use, as that alone could mean the difference between starting your website without ever knowing about the stress involved in optimizing your page speed or constantly battling with Pingdom, GTmetrix and Webpagetest.org for a little improvement in site speed.

I checked out the reviews of all major hosting companies like Bluehost, SiteGround, InMotion Hosting, Hostgator, and many others. I wanted to know which web host among them was built to deliver optimal website speed to its users.

What were people saying about them?

What were the website speed experts saying about them?

Which web host was considered the best?

Luckily for me, I came across some Facebook polls in which surveys were carried out to determine which hosting company was the favorite among many website owners.

SiteGround came out #1 in every major poll carried out.

Here is a poll from 2016:

Here is one from 2017:

And here is a recent one from March 2018:

You can see from the 2018 poll that the people that rated SiteGround the best were more than double of those who rated WP Engine. That’s why I recommend my readers to avoid slow loading issues early on by hosting with SiteGround.

The second secret ingredient is…

Your caching plugin.

Leveraging caching on your website makes your blog load super-fast when a visitor makes subsequent visits to your blog.

The reason for it is because after a web user loads your blog for the first time, the files of your website gotten from the web server are now stored in cached files in the users browsing device that can be easily retrieved for subsequent visits made to your blog.

There are premium plugins like WP Rocket that can take care of caching for you, and free plugins like WP Fastest Cache, WP Super Cache, and W3 Total Cache.

But do you know the good news for all SiteGround users?

SiteGround comes with a powerful caching plugin called SuperCacher.

Being a curious guy, I tried out WP Rocket, WP Fastest Cache, W3 Total Cache, and WP Super Cache. I found out that SiteGround’s SuperCacher gave me best results when I tested my site on Pingdom, followed by WP Rocket, WP Fastest Cache, W3 Super Cache and then W3 Total Cache.

Here’s my Pingdom website speed test result:

I had a load time of 1.17 second even after installing plugins that tend to slow down websites like Pinterest image hover plugin and Q2W3 floating widget plugin.

Get it right today with your web hosting using SiteGround, and you’ll only need little optimizations to make your website load in 1 second.

Mobile Optimization Tips From The Experts

Following Google’s recent update on mobile-first indexing, every speed optimization should now be carried out first on mobile, before desktop.

This is because Google will rank and index your site based on the mobile view and experience of your website, and not your desktop view as it was previously done.

Also, a one-second delay in mobile load time can reduce conversions to 20%. (Source).

So in the spirit of Google’s mobile-first indexing, we have here with us Jonathan Silverstein of mobile1st.com.

Jonathan Silverstein (CEO & President, Mobile1st.com)

Here are some mobile optimization tips Jonathan wants us to know when reducing mobile page load time:

• Use Google’s PageSpeed Tools and services such as Yslow and SingleHop to minimize server response time to within 200ms.
• Avoid or minimize re-directs. As Jonathan says: “allowing redirects creates additional HTTP requests, each of which can add extra network roundtrips and add significant latency.”
• Place CSS files at the top of your source code and JS files at the bottom.
• Manage your images by resizing them where necessary. According to Jonathan: “by specifying width and height, images function as responsive page elements utilized according to the screen size of the target mobile device.”

The industry standard for mobile load time is 3 seconds. You can test your site’s mobile speed here on Mobilizer in Mobile1st.com.

Related: How I Increased My Page Speed To 1 Second

Additional Tips from Bryan

Hi, this is Bryan stepping in real quick. It’s a known fact that it takes longer to load web pages on mobile than on desktop devices. Google has come up with a unique solution to that.

Introducing Google’s AMP Project

Accelerated Mobile Pages (AMP) is Google’s solution to making web pages load almost instantly in mobile devices.

These AMP pages use ten times fewer data than regular web pages and loads in an incredibly fast way similar to Facebook instant articles.

 How To Install AMP On WordPress

Setting up AMP on a WordPress blog is a very simple process.

• Install AMP for WP.
• Select the theme design that fits you best.
• AMP pages will be automatically created for all your blog posts. You can access them by adding /amp/ at the end of a blog post URL.

How Do I Get Rid Of AMP Errors If I Encounter Them?

You’re likely to run into some AMP errors when implementing AMP on your website, especially on WordPress sites.

I had quite a number of errors when I newly installed it.

Funny enough, after scouring through Google countless times, it was just one little tweaking I implemented that cleared all those errors.

I changed my design theme.

AMP for WP comes with three free designs. Design 1, Design 2, Design 3, and Swift.

I changed my design to Design Two and the errors were erased completely. You can try changing through each design theme to see if there’s any result.

In your WordPress dashboard, go to AMP>>Design and change your design to your preferred theme.

Try out each theme and check if the errors are still there. My errors were gone when I used Design Two.

There’s a good chance of finding an AMP design that would be compatible with the current theme of your WordPress blog.

David from CollectiveRay.com

He says:

There are a number of things you need to do to make your website load faster. Typically, we use the concept of reduce, reuse and recycle.

• Reduce the size of anything generated by your site and reduce the time your server spends doing work. This is done by getting rid of anything which adds extra weight to your site.

• Reuse any files and content generated by using various levels of caching.

• Recycle stuff such as database connections and files generated so that your server does not have to perform the work all over again every time.

David mentions specific things we should avoid.

“You need to make your website as lean as possible. Essentially, you need to get rid of anything that is not critical to your website. This includes plugins (remove the ones you’re not using), themes (use lightweight themes), 3rd party scripts and services like Facebook, AddThis, or any other script that add a lot of weight to your site.”

Using techniques such as minification and Gzip compression, together with image optimization helps a lot to reduce the overall size of your site.

Related: 11 Common Reasons For Slow Loading Websites (And Fixes)

And then he lets us know some optimizations we can carry out on our site.

“Once you’ve done that, you need to put various levels of caching in places, such as leverage browser caching in WordPress (you can find several ways to do that here), database and file-level caching, all the way to PHP OpCode Caching.”

“At this point, it’s time to optimize the actual infrastructure of your site. Make sure your site is running on the latest versions of PHP and MySQL because these have plenty of optimizations in place. Make sure your site is hosted on a good server, such as a VPS with good resources.

Implement HTTP/2, which is much more efficient in delivering content. Last but not least, host your website on a CDN service, as it helps with the heavy lifting.”

These methods are discussed in details at CollectiveRay.com.

Additional Tips From Bryan

Here are two quick tips I would like you to implement on your blog.

• Inline JavaScript and CSS

When your JavaScript files are combined into one file, as well as your CSS files, it shaves off some milliseconds from your page load time.

To inline or combine JavaScript and CSS, install Autoptimize and click on the EXTRA tab.

Tick the box for “remove WordPress core emojis, inline CSS, inline JavaScript.” Use this opportunity to also remove Google fonts from your blog as seen in the image below.

Scroll down and click the SAVE button. Yippee!

• Compress and Scale images

WP Smush.it is a nice tool that compresses images automatically once it is uploaded in WordPress, as well as compress all existing images.

When an image is uploaded, it’s standard practice to scale it to the appropriate width dimension of your website.

The width dimension of my website is 620, so I tend to scale images at 620×534, 620×420, and so on.

There’s no point using the original dimension of an image that’s 1200×845 on my blog posts. It would consume unnecessary space and several of such large images will eventually slow down my website a little.

Scaling images before you inserting into your blog posts is easy.

When next you upload an image to your website, click on the “Edit Image” link by the right-hand side.

Then, you can set the image dimension that’s suitable for your website.

Click on the “Scale” button when you’re done.

Amit Malewar from Infophilic.com

 

Amit helps us with some key takeaways for optimizing our page speed. Here are some of them:

• Enable Gzip Compression

  Gzip compression reduces the bandwidth usage of your website by compressing the HTML and CSS files. To enable Gzip compression, head over to your cPanel and click on File Manager.

Make sure the box for “Show hidden files” is checked, then click on Go.

Click on “.htaccess”

Click on it once to highlight it then click on Code Editor.

A pop up window will appear. Click on Edit. Copy the code below for Gzip compression and paste it at the bottom of the codes in .htaccess code editor.

## BEGIN Enable GZIP Compression ##

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/x-httpd-php

AddOutputFilterByType DEFLATE application/x-httpd-fastphp

AddOutputFilterByType DEFLATE image/svg+xml

SetOutputFilter DEFLATE

</IfModule>

## END Enable GZIP Compression ##

Click on “Save” in the top-right corner of the code editor and then close the editor.

• Set the leverage browsing caching code

Amit Malewar seems to reiterate what David previously said about your leveraging browser cache. This is so important. Leverage browser cache using expired headers.

Leveraging browser cache stores some of your website files on your visitors browsing device over a definite period of time so they don’t have to load it all over again whenever they visit your website, saving you precious loading time in the process and speeding up your website.

• Optimize Images

According to Amit:

To reduce image size, you need to compress and optimize your image.

He recommends using a plugin like WP Smush or EWWW Image Optimizer.

And then placing the following code at the bottom of your theme’s functions.php file:

add_filter( ‘jpeg_quality’, create_function(”, ‘return 50;’ ) );

• Use A Content Delivery Network (CDN)

Amit says:

The main goal behind the designing of a CDN network is to resolve the issue known as latency. It’s the annoying delay that occurs from the moment you request to load a web page to the moment its content actually appears on your screen.

Cloudflare CDN is our favorite CDN provider and Amit Malewar shows us how to setup Cloudflare CDN for a WordPress blog.

These are the specific optimization tips the experts have for us. I’m sure that we can reduce our page load time by an extra second when these tips are applied to our blogs.

What particular tip moved the needle for you? And what tips haven’t we mentioned? Let me know in the comments section.