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.
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.
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.
Optimize CSS And JS
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.
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.
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:
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:
And here’s that same page with our slimmer sticky header:
We gained about 15% of extra screen space to help you see more content and less of our logo.
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.
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.
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.
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.
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.
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.
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.
Great right? In most cases, yes. In some cases, it’s a nightmare.
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.
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.
Anyone else having fun wrestling with WP 4.5 and Visual Composer plugin? #funstuff
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.
The issue was that their previous web designer had setup WP to automatically update.
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”.
There are four search results in the top seven that aren’t mobile friendly. Here are three of those sites.
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.
We 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
In 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:
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:
Surface West Tile
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: