Mobile Page Speed Now Matters

7-ways-to-improve-mobile-speed

Last week Google announced that it’s using mobile page speed as a ranking factor for mobile search results. Outside of the obvious reason that it’s 2018 and your website needs to be responsive (mobile friendly), it should also load fast for searchers.

In 2016 I wrote a series of blog posts on everything page speed. I did some because Google was using it as ranking factor and let’s be honest, your customers come first, not Google. But to achieve higher search rankings, you have to think of Google and their requirements. If you are interested in higher mobile search rankings, you should read my post on rankings factors for voice search.

The page speed series of blog posts was geared towards desktops versions of websites and not mobile ones. This post will outline a few ways to improve the page speed of the responsive version of your website.

WordPress Speed Test

Before I list those reasons, test your responsive websites load speed. I have had some issues with that site but WebPageTest is also a great resource. Be sure to select an option beside “Test Location” that is either “Android Devices – Dulles, VA” or “Apple Devices – Dulles, VA” for mobile page speed tests.

How To Improve Mobile Page Speed

As online shopping and browsing becomes more and more popular, people use just about every device to participate, often including their cell phones. In our fast paced world, online browsers are impatient and may not use your website if it does not perform quickly, especially on their mobile phone. If you run a business or organization that experiences peak user times or “busy seasons”, having a fast mobile web page is even more critical in these times when more people will be using the page.

Experts say that three seconds is the maximum time that someone expects to wait for a mobile web page. Anything over that time may cause your clients to open competitor sites, spend less time on your page, and have a more negative image of your brand. So, how do you get that mobile page speed below three seconds and keep it there? Here are seven tips:

Look At Server Response Time

The server is a key element in mobile page speed, and the longer it waits to respond to requests from the browser, the longer your page viewer will wait to see the content on your page. The time your server takes to respond is called the “waiting time” or “time to first byte”, and experts recommend this to be no longer than 200 milliseconds after a request is made. The best ways to speed up this time are to improve your web server software or configuration (through coding), enhance CPU and memory resources through improving the web hosting service, or reduce the resources that your web pages use.

Avoid Redirects!

We have all experienced redirects. These are the automatic instructions that move a web page viewer to another location without them having to click anything. The most common type of redirect, a 301, moves visitors from an outdated webpage to a newly designed page. Redirects take up time, so if you do not need to use them, remove them from your web pages. Often redirects are even slower on mobile networks as they are less reliable than a desktop computer network connection. The best way to start is by using tools such as a redirect mapper to see how many redirects your web page contains.

Measure Round-Trip Times

The round trip time of data is the amount of time it takes to be both transmitted from your device to the target destination and returned back to your device. While this interval depends on many factors such as the connection source, physical distance, traffic amount, etc, it is important to regularly measure the round trip time in order to get a clear sense of average times for your page. The longer the round trip time is, again the longer your page viewer will have to wait. One of the best ways to reduce this time is to combine scripts in order to avoid repeated trips.

Load Upper Half Content First

On a mobile device, it makes sense to load the content at the top of the page first, as this is what the viewer will see first. If you code your pages so the server sends data to show the upper content first, your lower content will have slightly more time to load as the viewer browses the already loaded upper half. This gives the perception that the web page has fully loaded faster even if some of the lower content has not appeared yet.

Place JavaScript At The Bottom Of HTML Files

JavaScript is an important aspect of a web page for interactivity purposes, but it can be a big problem for load times as it does not allow parallel downloads. When this content is loaded, other downloads will not happen. To make your main page content load slightly faster, it is a good idea to put the JavaScript scripts at the bottom of the page. Another way to slightly improve speed is putting the Cascading Style Sheets at the top of the programming file. These sheets show how elements will be displayed, so it gives the appearance that the webpage is actually loading faster as the layout will be loaded first.

Optimize CSS And JS

The more data on your page, the longer the page will take to load. This is why it is so important to optimize and minimize everything on your page, but most of all Cascading Style Sheets and JavaScript files. This includes getting rid of redundant or irrelevant data that has no effect on your page function, but will improve the speed.

Compress Files

This tip will both increase and decrease load time. When data is compressed, it must be decompressed in order to be displayed. This means that the data will transmit faster, but the extra decompression step may take up more time. The trade off here is usually worth it, but this is something to keep in mind as it reduces page weight which is especially important for mobile pages.

Try out the 7 tips above to see your mobile page speeds go from over three seconds to under in the blink of an eye! If you need additional help optimizing your web pages, contact us today.

Sticky Header Issues To Avoid

A header is the first person a user sees when they access your website. A well-created header lets your consumer know they have arrived at the right place, whether or not they are already a follower of your brand. It needs to be recognizable and easy to understand.  This feature is a valuable piece of real estate that can help sell your rand if used wisely.

One form of header is known as the sticky header. It works just as it sounds – the header “sticks” to the top of a web browser as the user scrolls down the page. One of the primary motivators for this design choice can be navigation. On a site with a sticky header, the visitor can easily access another page on the website or basic information without having to scroll back up.

2

But just like any design decision – the user experience has to come first. And while in some cases, sticky headers can be an aid, they can also go to the other extreme and ultimately hinder the UX. If you are a UX designer, you may want to read these stats about a career in UX design. Here are some tips to avoid disaster while using sticky headers:

  1. Avoid Large Headers

While you want the header to catch the user’s eye and be easy to read, you want to avoid making the user experience claustrophobic. Since a sticky header is going to always be visible as the user reads your main content, if it is too large the visitor will be constantly scrolling. After a while this is going to feel tiring. You want the consumer to be able to quickly get the information they need about a brand to make a decision, not spend hours trying to get through all your content because a giant box leaves the reading space small.

We recently received an email from Social Media Ninjas about how our sticky header could be reduced in size. Here’s what it looked like before:

sticky-header-before

And here’s that same page with our slimmer sticky header:

sticky-header-after

We gained about 15% of extra screen space to help you see more content and less of our logo.

  1. Make Use of the Space

Don’t leave your user wondering what to do next. If this header is going to be following them throughout the page, make sure there is a call to action that is relevant to your brand. Whether it is a donate, request info, or see more button, you want ot make it as easy on the user as possible to get to the next step. Simply including the name of your company and a brief description in your sticky header is not making the best use of the space.

  1. Don’t Forget About Mobile

The desktop website experience is your anchor. But don’t forget about mobile users. The screen is going to be much smaller, and so ask yourself whether a sticky header is going to work in that format. Even if the answer is still yes, it has to look different in order to create a comfortable user experience. Don’t be afraid to have a different mobile layout, as long as the branding is consistent with your desktop site.

  1. Don’t include every link

If you’re looking into sticky headers, you’ve probably heard how it can speed up browsing and navigation times. While this is true, copy and pasting every navigation link into your sticky header is going to be distracting and bloating for your user. Especially if you are a content heavy page such as perhaps a media outlet with a lot of categories, this is only going to overwhelm the user as they are constantly shown too many choices. Make sure to pick only the links the user really needs.

  1. Picking Flashy Design Over Legibility

There are always going to be trends in the website world. It is worth keeping up with your competition and seeing what works and what doesn’t. However, sometimes websites choose flash over substance. Thin fonts and low contrast designs for example may seem appealing to the eye – but are they readable? A way to avoid UX mistakes such as these is to test your website on multiple browsers and devices to ensure usability.

1

In the right circumstances, a sticky header could work great for your website. It might help users navigate easier and understand your brand in a short amount of time. But before jumping into including one, make sure you follow these tips and always remember that user experience comes before design.


Nick Rojas is a serial entrepreneur who’s enjoyed success working with and consulting for startups. Using his journalism training, Nick writes for publications such as Entrepreneur, TechCrunch, and Yahoo. He concentrates on teaching small and medium-sized enterprises how best to manage their social media marketing and define their branding objectives. Nick is currently a consultant for Phonecheck.com.

The Problem With Premade WordPress Themes

WordPress (WP) is an extremely popular Content Management System (CMS) for websites. I would guess that 90% of our clients run WP software. This website is running WP.

They’re are many reasons to choose WP. One of which is it’s great for SEO and uploading content. It’s also easy to increase page speed and load time of your website. Sites like Themeforest also have many amazing pre made themes for as low as $50. But there is one main reason why WP might not be the best CMS for your website.

WordPress Security Issues

Since WP runs on an estimated to 23% of all websites, it’s the target of security issues.

Obviously the software falls victim to viruses or spam by hacking into the software itself or through the many plugins. I’ll let Alex Grant educate you on WordPress security issues and threats so you can protect your website. As long as you follow the steps from that blog post, it is extremely unlikely your site will get hacked.

One of the key things to avoid security issues and threats is to simply update yourWP version to the latest. WordPress released version 4.5 on April 12th. They do plenty of updates to avoid security threats.

Great right? In most cases, yes. In some cases, it’s a nightmare.

Why though?

The Problem With Premade WordPress Themes

Because some premade WP themes purchased from places like Themeforest might not be compatible with the latest version of 4.5. This has happened to one of our clients back when 4.0 was released. And it happened again when 4.5 was released.

Because of this, I’m normally cautious of updating a clients WP software when an update comes out. And I was for one of our newest clients The IV Lounge. The issue wasn’t with the theme itself they have. It was with a popular plugin called Visual Composer which helps structure and display your content.

Visual Composer was breaking down with the new 4.5 release. Up until April 15th, you were screwed as that’s when Visual Composer (VC) pushed through a new update which was compatible with 4.5.

If you happen to experience an issue like this, you’ll have to do some research to see what is causing the problem. I Googled and searched Twitter once I noticed our clients site was not displaying content properly.

Once you find out that there is an issue, the easiest solution is to downgrade your WP version to the previous one that was working. This would take you to be certain what WP version you were running before and for you to or your web developer to have your FTP server details.

This worked for our client when their site wasn’t working with the WP 4.0 update. It didn’t work The IV Lounge.

Why?

The issue was that their previous web designer had setup WP to automatically update.

Great idea. Unless things like this happen and our clients web designer went MIA a few months back without giving them their website hosting and FTP details.

Thankfully our clients site is almost back fully. There is just a couple more issues we are sorting out.

But it’s a reason to avoid premade Wordpress themes. Sometimes it’s better to pay for a custom design that will work with any WP update. It’s also another lesson for you have access to your website hosting and FTP account.

Your Website Visitors Come First, Not Google

your-website-visitors-come-firstBack in April Google released an update to their search algorithm. Many called it Mobilegeddon.

It was billed as one of their biggest algorithm updates yet. But it was only going to impact the mobile search rankings.

You may have heard about this through your Google Webmaster Tools account which is now called Search Console. By the way, when will Google stick to a name? Google My Business was Google Places for Business and Google Local before that.

Anyways, Google has a mobile friendly tool which tests your site to see if it was just that. So they tested everyone’s site early in the year and if yours wasn’t mobile friendly, you recieved a warning message like this.

Surely you got that message and that you pay attention to your Webmaster Tools account. Even if you didn’t, you have at some point thought about converting your site to a responsive design/making it mobile friendly. And if you haven’t you need to right away. Not to appease Google and their algorithm, but to give your visitors a better user experience on your site.

Care More About Your Visitors

Considering it’s 2015 and so many people (insert stat here) are using their mobile devices, your site should be mobile friendly. And it should be because you want to give your visitors a great user experience and not because you want better Google search rankings.

Care more about your visitors.

It’s common in SEO for business owners to think more about optimizing their sites for Google rather than the searcher. They look too deep into keyword density and writing content that was created for a search engine crawler and not a human being.

The Google mobilegeddon update brought the same.

Many business owners were focusing more on appeasing Google. It shouldn’t have taken a push and perhaps a threat that your mobile search rankings would plummet if your site wasn’t mobile friendly. All it should have taken was business owners to realize everyone has a mobile phone and everyone is browsing the web on them.

If you don’t a mobile friendly site, people will find a competitors site that is. So the bottom line is out care your competition and provide the best mobile experiece for your visitors.

The Mobilegeddon Update Hasn’t Had An Impact

We didn’t write about the mobilegeddon update because we didn’t think it would have much impact on the mobile search rankings. And as of today, November 19th, they’re still websites that are not mobile friendly ranking higher than mobile friendly ones.

Here are the search results from my mobile device for “care homes Victoria BC”.

non-mobile-search-results

mobile-search-results

There are four search results in the top seven that aren’t mobile friendly. Here are three of those sites.

Non-Mobile-Friendly-Site Non-Mobile-Friendly-Website Non-Mobile-Friendly

If you ask me, these sites provide a terrible mobile experience and shouldn’t be ranked where they are. I’m still in my 30’s and am having a hard time reading those sites! Nevermind their market which is mostly children with parents who are 70+ and needing a care home.

So we’ve yet to see the impact and big changes to the mobile search rankings. But that shouldn’t stop you from having a mobile friendly site.

Care more for your visitors and provide them with a great mobile experience on your site.

Best Website Designers & Companies in Victoria

Victoria Website Design CompaniesWe look a lot of websites at Meaningful Marketing. From doing search engine optimization audits or prospecting for clients, we’ve seen many websites over the last five years.

Because of this we feel we can confidently list the best website designers and companies in Victoria BC. These companies have caught our eye because the websites they create are beautiful, functional and responsive.

What About Us?

We also offer website design and invite you to learn more about our affordable website design. By no means are we the best in Victoria but we feel we create some really good mobile friendly websites that load fast and are much cheaper compared to other companies in the city, including the ones listed below.

Why? No overhead.

The companies we are going to list all do great work. But they also have lots of overhead which in turn gets passed onto you, the client. So if you are looking for a website design that’s easy on your pockets, we’re a great option. With the extra savings, you could also afford to do SEO for your new website.

Best Website Designers and Companies in Victoria BC

best website designers victoria bcIn the last year of so I’ve been coming across a lot of websites designed by Leap Web Solutions. Their designs are easy on the eyes. Some of our favourites are:

Bin 4 Burger Lounge – the burgers are off the charts too!

Baker Rejuvenation

Preventous Cosmetic Medicine

Harrington-Creative-Logo

I was talking to a friend last year about what we do at Meaningful Marketing. She told me her boss got a new website. As I always do, I checked out to see if it was responsive.

It was and it was damn sexy. It was designed by Doug Harrington of Harrington Creative. Some of our favourite websites from Doug are:

Dr. Crapo

Pacific Coast Floors

Solbakken

Victoria mobile website design

Another company showing up on our radar (it was too easy!) is Radar Hill. You’ve driven by their office hundreds of times on Cloverdale. Now it’s time to show you of favourite sites from them.

Campbell Construction

Out Of Ireland

Bon Hollier & Holley Lee

bone creative

Within the last few months we’ve come across more and more sites designed by Bone Creative. We don’t know much about them. But what we do know is that they can design! Here are our favourites:

Eaglewing Tours

Parc Modern

Surface West Tile

Eclipse Creative

Well before we got started we knew about Eclipse Creative. They offer more than just web design and do lots of print advertising. But it’s their websites that we want to showcase and these are our favourites:

Belltech Systems

Silk Road

Parker Johnston

So there you have it. As you can see, these five website design companies have worked created websites from some of Victoria’s high profiles businesses.

Are there any companies we have missed? Let us know in the comments below.