speed matters series
CMS MOBILE PERFORMANCE OPTIMIZATION
Contact management systems (CRM) don’t have to be slow loading on a mobile phone. Optimized correctly WordPress can fly on a slower 3G connection using a mediocre phone and still be a memorable hot looking website.
The keys we will cover are:
- Image compression and size
- Caching at WordPress level
- Caching at server level
- Do’s and don’ts
This blog post assumes the following:
- You have a solid understanding of WordPress and have created, at the very least, core beginner pages and have dealt with “plugins.”
- You are using hosting that is NGINX based
Image size is the most common starting point to improve website loading speed – mobile or desktop. In another blog we will cover this in more detail but here are the Cliff Notes:
- Keep most files you save to .jpg or highly compressed .png if they are transparent. WebP is not ready for prime time yet so that will be a later topic
- Use compression utilities such as “tinyjpg” which is our favorite – upload image file and compress
- Avoid having too many images (no matter the size) on one page as even if small in kb they will create more send/requests from the server to the visitor slowing down loading time
Also remember that the images for mobile sites are best as simple and so keeping the size down should be easy.
With mobile websites there are some basic parameters you should consider at least until 5G becomes real:
- Keep images simple and very small
- Consider no images at all
- Don’t use video as a background
- Make sure you website framework truly does not load sections (in background) that are tagged as “hidden” on mobile
- Use GTMETRIX to find out answers to above and benchmark your site better
- Keep javascript down to a minimum – avoid animation and other tricks that don’t translate well to mobile in usability and performance
There are a million utilities to speed up WordPress Mobile Sites and many of them suck. I’m outlining what we use even though there maybe a divergent opinion out there:
- WP ROCKET – The king of caching plugins, WP ROCKET caches your website pages and optimizes the size and delivery of html/css to give you impressive load times and is mobile friendly. WP Rocket will also keep a separate cache for mobile which is great if you are using separate pages for mobile (vs the same page that is responsive)
- Asset Cleanup – WordPress has a lot of useless overhead such as RSS, oEmbeds, HTML comments, etc that are unneeded in most situations. Asset Cleanup carefully removes these resulting in a leaner mobile website.
- NGINX helper – this is advanced stuff but if you are running on NGINX based hosting and you have control of it then this is a great add-on to help keep your WordPress cache’s (such as wp rocket) in sync with your server NGINX FastCGI cache.
- WP-Rocket NGINX – this is beyond the scope of this article but if your savy – real savy – check out GITHUB and download this. It allows clients to bypass php and read directly into cached web page.
The Anatomy off a fast website. A break down of each main component of a website as it loads and how to use tools such as Pingdom or GTMetrix to fine tune performance.