Optimize a WordPress Site for Mobile
There are a lot of different reasons to try and make your website lightning fast. It provides a good user experience. It improves conversion rates. And Google has decided that page speed will affect your SEO ranking; since better performing sites have to be more relevant, right? Well, maybe…
There are a lot of different techniques to use when trying to decrease the page speed of a WordPress site. You can use caching plug-ins(W3TC or WP Super Cache for example), minify your CSS and Javascript, and using Content Delivery Networks(CDNs) to name a few. These have all been covered before multiple times.
I’m going to talk about two ways to improve a site’s rendering speed that aren’t talked about as often.One is an improvement across devices; it’s really easy to do, and really improves the overall performance of a site. The other is mobile specific, but when implemented it really helps cut the fat of a site that is being served to a mobile device.
To be honest this article is really more for developers. But if you’re a site owner, have a conversation with your developer(or me!) about if these techniques are being used and if not, if they can be used to help increase your website’s performance.
GZIP Compression
GZIP Compression(GZIP) is probably one of the most under-utilized performance techniques out there. It can be used for any website, not just WordPress. And it can have a significant impact on your page’s rendering time.
Here is a great explanation of how GZIP Compression works, but the gist of it is that GZIP tells your server take your resource files and compress them when it sends them to the browser, as long as the browser accepts them. Dont’ worry, the browser automatically tells there server if it does. If it doesn’t your files will be sent over uncompressed.
So how do you do it?
If your on an Apache server, you modify the htaccess file. Add this bit of code and you’re good to go:
Warning: now would be a great time to make a backup of your htaccess file. Because nothing is better than trying to hack into your own site because you jacked up the htaccess file.
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
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE
As you can see, your telling the server to compress(DEFLATE) the types of files that are then specified(text/plain, text/html, etc). Pretty simple, huh?
And for other sites that are on IIS, you have to change a few configuration settings.
Be Warned: using GZIP on Javascript files can have issues on some older browsers, so if you’re one of the unfortunates that still has to support IE5 or Netscape, you may be out of luck. But if you’re supporting the standard browsers of the modern Web, you’ll be fine.
PHP Mobile Detect
PHP Mobile Detect is an excellent PHP class created by the excellent Serban Ghita that can be used not only with WordPress but any site written in PHP.
To fully understand how the implementation works requires a little knowledge of Object-oriented Programming (OOP) but even without this, implementing it is a breeze. You create an instance of the object Mobile_Detect, in all the demo’s called $detect. You then run various methods to detect different devices and can then send different code to the device/browser depending on which device is detected. Sound complicated? How about an example.
Say you want to have two different menus, one for mobile devices and one for all non-mobile devices(which is what I do on this site.) Here is what you would do:
$detect = new Mobile_Detect;
if( $detect->isMobile() ){
//Here is where you put all the code for your mobile menu
} else {
//here is where you put the code for when the isMobile() method is not true
}
That is a very simple way to detect devices and send only the necessary code from the server to the device(which is called Responsive Server Side, or RESS. But more on that later…) You can create more complex detections: check out Mobile Detect for a more comprehensive explanaition.
To learn more about implementing it as well as which frameworks and CMS platforms have third party plug-ins(and there are a ton) that can be used with your web projects, check out the Github page.