The main reason a website “hangs” or loads slowly usually results from trying to load a large resource. Resources like CSS, JavaScript, and images should be reduced in size whenever possible. Not loading a resource can also help improve your mobile page speed. If you don’t have an image gallery on the page, why are you loading the image gallery JavaScript files? There are many ways to speed up your WordPress website. One way to make your website load fast on mobile is to compress, or smush, your WordPress images and use a responsive designed theme.
Pro tip: we recommend using a managed WordPress hosting company like WP Engine.
Less is more
There are many things you can do in order to speed up your mobile WordPress website. Other than making your images smaller and easier to load, we want to stick with the concept of loading less is more. That means you want to load the bare minimum of items in order to properly share your content on a mobile device. In WordPress, we have many tools that can help offset the number of resources loaded on a page: enqueue_script and enqueue_style are two functions inside of WordPress to help you load a file/asset conditionally. Plugins like Gravity Forms utilize these functions in many interesting ways.
In the Gravity Forms plugin, a user places a shortcode inside of a page or post to display a contact form. The plugin developers are loading resources inside of the shortcode to ensure the resources are only loading on the specific page or post where the shortcode is present. This method will help speed up any page not using a contact form.
Not all code is written equally. Some plugins/themes have assets loading on every page. You can use a plugin like WP Asset CleanUp to combat loading unwanted files. WP Asset CleanUp scans your page and detects all the assets that are loaded. All you have to do when editing a page or a blog post is just select the ones you DO NOT wish to load.
WordPress is mobile
Like enqueue_script and enqueue_style, wp_is_mobile is a conditional tag to check if the user is visiting a WordPress website using a mobile device. You can use this inside of your theme/plugin to conditinaolly load elements on your site. A good starter plugin is called WordPress Mobile only & Desktop Only Content. The plugin provides shortcodes called Mobile and Desktop only. Using these shortcodes on a page or post can maximize the user experience, as well as increase the page performance. Of course, there’s always the issue of turning off a needed resource.
Pro tip: Make sure you test all of your changes on a staging site first.
If your theme uses a framework such as Twitter Bootstrap, you can leverage the built-in responsive utility classes. These classes are simple to use and can be used inside of the WordPress editor, too. Usually, it is because the bootstrap theme loads the asset controlling the responsive utility classes globally. It’s a handy thing to remember when trying to fix your WordPress Website.
Accelerated Mobile Pages
Accelerated Mobile Pages (AMP) is a concept where you focus on the important content of a page. It’s a great and convenient way to make your website load fast on mobile.
The idea is to remove all non-content related media altogether and provide the information. More along the lines of less-is-more strategy, only text content will be shown, while removing the header, footer, and sidebar. AMP is like reading in distraction-free mode. If you want to find out if a page is set up for using AMP, just add /amp/ to the end of a blog post or page URL. Try it now using this article.
Test before you buy
If you have access to a mobile device, you can usually test a product before you buy it. WordPress themes and plugins are no different. Before you select a theme for your WordPress website, view the theme demonstration. View it on your phone. Does it load fast? If it does, then you know it’s possible for you to replicate the performance on your hosting provider. If the demo takes longer than you would expect your own website to load, move on. You’ll save yourself time and money in the long run.
Take advantage of the available resources, like BuiltWith, to see what other WordPress websites are using to make their sites load fast. Advanced developers can view the page source to see the list of assets loaded on the page. I’ve used it a time or two when trying to figure out if my website can do the same thing a competitor is doing. I’ll view the page source and search for wp-content/plugins. I’ll see all the assets being loaded from the site and what plugin/theme is in use.
If you find that your website does not load fast on mobile, don’t hesitate to contact us for an audit and recommendations. We would love to help you find the right solution. Let’s get you up to speed, pronto!
Comments