Connect with us
Mobile Design Mobile Design

Featured

Serve Your Mobile Customers with Different Content

Published

on

Mobile use is more prevalent now than it has ever been, and more people are using their smartphones or tablets to access websites. No matter how good it is, their mobile data connection is never going to be fast enough o cope with a full-size website.

Of course, some would say that your website should have a ‘responsive’ design, a word that implies mobile-readiness but is rarely what you get.

Generally, a responsive website design just means that your desktop content gets shifted around a bit, perhaps converting three columns of content into one that has three rows, but this won’t improve loading speed. In some cases, it can make it a good deal worse.

Why? Because you are still trying to give mobile and desktop visitors the same content but in a slightly different format.

Let’s say that you have an image carousel of 5MB. That’s great for someone on a computer that has a retina screen but for a mobile user in, say India, that’s going to take around 10 minutes to load up!

The ideal solution is to show your mobile visitors different content with a better design and faster loading. Sadly, this is not quite so easy as using a CSS media query and visibility:hidden or display:none to hide your content.

Your page will still load up that content it just won’t show it. So how do we do this?

Mobile Detect Shortcode

You can add shortcode to your site using a plugin called WP Mobile Detect. This will help you to hide or show specific content.

For example, let’s assume that you have a post with a big infographic; you need your desktop visitors to see this as it is crucial to the post.

By using the plugin, this infographic could be wrapped in a shortcode, so it will only be seen on a desktop. For the mobile visitors, you add a link to the post that they must click to see the full image.

The first example shows a sample of code for a desktop visitor, the second for mobile visitors:

Example 1

[notdevice]

‘<img class=”my-large-infographic-image” src=”http://mysite.com/large-image.jpg” />’

[/notdevice]

Example 2

[device]

‘<a href=”http://mysite.com/large-image.jpg”>Click here to download the infographic.</a>’

[/device]

Doing this can make mobile loading times much faster while still giving them the opportunity to see the large image.
wp_is_mobile()

This is a function that lets you detect devices using your plugin or theme. It is generally used for dequeuing styles or scripts that are not necessary for mobile loading or in page templates to stop large images being served. For example, this is how you remove a large image from the header for mobile:

‘<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>> <header class=”entry-header”>

  <?php if( !wp_is_mobile() ) : ?>

   <img class=”my-large-header-image” src=”http://mysite.com/large-image.jpg” />

  <?php endif; ?>

 </header>’

This will detect a device based on the user agent and, despite what some people think, it isn’t useless with caching. Good hosts can cache mobiles separately, so you should continue to use functions that are mobile-specific.

A Separate Site for Mobile

You could also use a separate website for serving content to a mobile device and you would do this using an m.subdoman, something like m.appresser.com. When a mobile user tries to go to your website they will be redirected to a mobile version.

This does, of course, mean you have two websites to manage and keep the parity between both of them simultaneously.

Typically, a mobile user will want the functionality that your desktop site has but on a smaller screen so, instead of removing features, keep them in but speed them up and make them more accessible.

And, because making your desktop site faster will make your mobile site faster, make sure you follow all our tips for a faster WordPress site.

Click to comment

Featured

Serve Resources from Consistent URLs

Published

on

consistent urls

No doubt, if you use a tool like GTMetrix, you’ve seen a warning telling you to serve your resources from consistent URLs. The warning will tell you that the resources listed have got identical content in them but are not being served from the same URLs.

Serving from consistent URLs not only saves resources and time on fewer requests, it can also save in bandwidth.

Why Does This Happen?

All websites use resources like JS files, CSS files, images and so on to deliver the right layout, the right functionality and a better user experience. Every resource is individually called by a browser when the webpage is accessed, and these are called HTTP requests.

Most of the time, each of the resources are served from one URL but, on occasion, a resource may be available through several domains or hostnames. That means that, when that page is loaded, it gets called several times and downloaded several times, once from each URL. This causes slower page loading.

This tends to happen when a resource is shared between multiple sub-directories or sub-domains on the same website or, sometimes when multiple plugins use the same eternal resources or libraries.

In short, it is down to redirects that have not been properly implemented, the wrong settings in your CDN or even a bug inside the theme you use. This all results in multiple HTTP requests, multiple downloads and even multiple DNS lookups, all of which have a negative effect on SEO and on page speed.

How Do You Serve Resources from Consistent URLs?

The four main situations that result in duplicate resources are:

  • When there is an HTTP and an HTTPS version of a website
  • When two websites share the same resources
  • When two or more plugins are sharing resources
  • When a CDN hosts resources and those resources can be accessed through the origin server and the CDN

And the methods to solve this issue are:

Move

The commonest issue is resources shared between several linked sites or subdomains. The solution is for the filename to be served from one hostname and linked to from the other. Although an extra DNS lookup is needed, the benefits reaped from caching make it worthwhile.

Rewrite

When you use a CDN for speeding up your website, you may get duplicate resources usually caused by the way that your plugins or theme handle the static resources. Normally you would edit the URLs for the static resources manually or through a plugin, thus moving them to the CDN.

Most of the time, this goes smoothly but sometimes a plugin or theme will pull some of the files out of the media library, into the code. The solution is to go into your theme’s files and change the path so that it points to the CDN file.

Doing it manually is not the best way; instead, go into the header.php file and find the line that defines the path the content, usually a logo, and edit it so it matches the CDN resource.

Redirect

If your website is available at two different addresses, such as mysite.com and www.mysitecom, you may end up with duplicate resources. Although you might have a good reason for having your website constructed in this way, you do end up with two websites.

One is hosted on the domain root and the other on the subdomain. The solution is to choose the main website and use 301 redirects sitewide. This will tell browsers and search engines to forget the other versions and go straight to the main site.

Canonical Tag

You can also use canonical tags to consolidate resources, useful for e-commerce sites where multiple pages may point to a single resource using different attributes or categories. In all honesty, a canonical tag shouldn’t be your first choice if you can use redirects instead. Rather than removing duplicate resources, canonicals just tell a search engine to prefer a specific version of your content

To implement a canonical tag, add the link to the resource you want into the code of the duplicate resource using the canonical attribute of rel=.

Plugins

Sometimes the issues will be caused by several plugins trying to share a resource or one plugin adding a string, like ?dshd=343, for example, to the original URL. The best way to solve this is to deactivate one or more plugins.

You can’t control a plugin because it is a third-party product so all you can do is deactivate. To see which one/s need to be deactivated, turn the settings off for each one and then on again to see which cause the problem.

Whichever solution works for you will result in your website speed increasing and fewer resources being used.

Continue Reading

Caching

Specify a Cache Validator

Published

on

specify-a-cache-validator

Cache validators are defined inside response headers and HTTP requests and are used to determine if whether or not a request to retrieve files from the browser cache are valid.

These validators are important because they work out whether a request needs to be sent to the server, which uses more resources and takes longer, or if the required files can be got from the local cache, thus increasing loading speed and using less resources.

It is always going to be better to retrieve files from the browser cache because it doesn’t involve the round trips that requests to the server involve. Using a cache validator, like an etag header or Last-Modified, can help to ensure that the browser is using caching as efficiently as possible.

How to Specify a Cache Validator

When you use a we serve, such as Nginx or Apache, the Last-Modified header is included by default. When your page speed tool, like GTMetrix or Google Page Speed, come up with the suggestion that you specify a cache validator, you are required to use either Last-Modified header, Etag and Expires Header or Cache Control Max Age header.

Last Modified and Etag headers are used for assisting the browser to work out if the requested file has been altered in any way since it was requested last. Cache Control and Expires header are used for working out how long a file should be stored in the cache before a new copy is requested from the server.

If you don’t use the Expires or Cache control headers, the browser has no way of knowing how long a local cached copy should be stored before a new one is retrieved. These may already have been defined on the server you use but, if you need to define them manually and you use Nginx or Apache, you can use these code snippets:

Apache

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”

Nginx

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control “public, no-transform”;
}

If you wanted to add the Last Modified header straight into a dynamic file, you would need to use the gmstrftime from the PHP file, as in the next example:

header(‘Last-Modified: ‘ . gmdate(‘D, d M Y H:i:s’) . ‘ GMT’);

On occasion, you may be trying to load resources stored on another domain. In this case, your speed test tools would send you a notice that you are required to specify a cache validator for those resources.

You could ignore this notice in safety – just like assets that are loaded from fonts.googleapis.com, for example, you do not have control over setting any cache validator for the resources and there is always a chance that what was specified has been intentionally removed.

Browser caching is a very important factor in WordPress website speed and making sure that you specify the right cache validator, and that it works as it should do, is critical for ensuring that browser caching is being used efficiently and results in speedier page loading.

Continue Reading

Featured

Add Google Fonts the Right Way

Published

on

Google Fonts

Google Fonts are a free resource on offer from Google, designed to add some flare to your WordPress website.

But, did you know that, if you don’t add them the right way, they can cause considerable problems with speed and performance on your website?

Google Fonts need to be added to your Theme so I’m going to show you how to do it without adversely affecting your website performance.

Find Your Font

First, you need to locate the Google Font that you want to use so go to fonts.google.com and choose which font you want. Have a good look through the library there are plenty to choose from and, when you’ve picked on, click the Quick-Use button.

A new page opens; go down the page until you see a box that has usage code in it – this is what you add to your website.

Note that there are three tabs – the first is the recommended way of adding the font, the second requires the use of the @import CSS method, while the third is the JS method.

I’m going to show you all three, along with their pros and cons so you can decide the best way to add them to your website.

Adding Google Fonts to Your WordPress Theme

Using @import CSS

Most people tend to use the first or second tab. By far the easiest way is to edit the style.css file for your theme with the code you got from the second tab, replacing xxx with the name of your font:

@import url(http://fonts.googleapis.com/css?family=xxx);
@import url(http://fonts.googleapis.com/css?family=xxx);

This is the easiest way, but it is not the best way simply because it will block parallel downloads – this means that the browser waits until the imported file has downloaded fully before it even begins to download the other content.

The result? A slowed-down website.

Using the Standard Method

The best way is to use the first tab, the standard and recommended way of adding Google Fonts because it uses a link and not import method.

All you need to do is copy the URL for the font or, if you are using more than one font, combine them with the | character between each one.

Then simply put that code into the header section of your theme. To do this, you will need to add the following code into the header.PHP file of your header, above the main stylesheet, replacing xxx with the font name:

‘<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=xxx|xxx” media=”screen”>

<link rel=”stylesheet” type=”text/css” href=”YOUR THEME STYLESHEET” media=”screen”>’

Now you can use it in the CSS file for your theme like this:

h1 {
font-family: xxx, Helvetica, Arial, serif;
}

Do NOT modify the parent files for your theme, especially if you have a theme framework. Any changes you make get overridden next time the framework is updated.

Enqueuing Google Fonts

The third way to add Google Font sis enqueue it in the functions.PHP file for your theme or within a plugin that is site-specific:

function wpb_add_google_fonts() {

wp_enqueue_style( ‘wpb-google-fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false );
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’ );

Obviously, replace the font link with the one for your chosen font

Using JavaScript

The JS method involves the need to copy the code from the JS tab and paste it into the header.PHP file, immediately following the ‘’ tag.

Do not load any fonts that you are not going to use or, if you do and you find that you don’t like them, get rid of them immediately. The more styles and fonts that you add, the slower your WordPress website will be.

Continue Reading

Categories

Archives

Digital Marketing Job Board

Trending