Website Speed Optimization to Improve Performance
Mobile’s pinnacle has yet to be reached. According to eMarketer, mobile search spending will grow 81% over the next two years. Smartphone purchases have already outpaced desktops. And mobile has a 76% penetration in the US – that’s 240MM users with a 4% YoY growth (KPCB).
Key Points
With this growth, mobile has become a critical player in the digital marketplace. If you’ve already started managing a separate account for your mobile paid search, you’ve likely also thought about device-optimized landing pages for your mobile ads. Traditional desktop pages will not be as effective on the small, touch-screen displays of mobile devices. And the mindset and engagement style of mobile users are different. It will become increasingly necessary to create a customized experience for your mobile users.
To start you off, here are a few tips to keep in mind while building your mobile page. I recently had a chance to hear Amy Africa’s mobile seminar at the 2023 Conversion Conference in San Francisco. It was, by far, one of the best mobile optimization talks I’ve attended.
Here’s my take on the top 10 tips to optimize your mobile site for conversions:
Table of contents
1. Optimize for Speed
Page load speed matters on all web sites; they matter even more on mobile. This is probably one of the most important user experience facets to assess when building your page. Mobile users do not have the patience to wait for over 15 seconds for anything to load. So make sure to prioritize low page weight when designing your mobile page. Less is more.
2. Focus on One Goal
Unlike your traditional website, your mobile site does not have the space to provide multiple functions. You will have to pare down your content to just a precious few. Figure out the single most important purpose of your mobile site: branding, acquisition, engagement, retention, customer service, etc. For example, your mobile page may need to be devoted primarily to checking reservations as opposed to booking reservations. What users look to accomplish on your mobile page could be vastly different from you traditional homepage. Assess what pages receive the highest mobile traffic, and prioritize your content, function, and design to what users are seeking.
3. Navigation is Key
Navigation makes up the majority of your success. “Word connect” is extremely important on mobile, so make sure you think carefully about how you title your navigation buttons and links (stay away from those esoteric terms). And don’t use up space on pictures at the cost of navigation choices – especially on your top nav.
4. Ease of Use
Each individual page of your site should keep to low content volume. Successful sites segment their pages with more granularity, especially when considering the option to only offer 5-8 choices on one screen. For example, “t-shirts” and “sweaters” deserve separate pages to allow users to reach their destination easier and quicker. Also, functions such as breadcrumbs, filters, and jump links can really improve the user experience on your site.
5. Use Large Fields
Manipulating the size of your fields and the space between them is critical. This is the most important thing in capturing leads. Larger fields will help users more easily see and complete the fields. They will impact completion rate, and also mitigate error rates (remember, error rates are much higher on mobile at around 20%).
6. Reflect Your Brand
Most users already have an idea of what your mobile page should look like even before they arrive. Remember to transfer over the most visually significant elements from your traditional site to your mobile site. Things like color should reflect the color palette of your homepage. If users don’t feel an instantaneous brand match when they arrive on your mobile site, they will most likely bounce. And remember, 85% of a user’s view is spent on the top section of your page, so make sure to get the essentials at the top.
7. Mobile Site vs. App
A mobile app is not a mobile site. Actually, if you are planning to have both – they should have clearly different functions. Or, if you are having to choose one, definitely start with building the mobile site – this is what users will be looking for first.
8. Work Your Click-to-Calls
Browsing a site on a mobile device makes it that much easier to turn that action to a phone call. Grab your users while their intent and interest are there. Call leads can show higher quality traffic than from form leads, since it requires users to jump deeper into the funnel. Click-to-Call should be enabled for all phone numbers on your site, and is especially crucial for lead gen pages.
9. Collect Mobile Numbers
We’re still in the precious early period of open-minded users, who are curious to try out new methods of connecting. People won’t always be as open about sharing their mobile numbers as they are now. Collect them whenever you get a chance – even if you don’t know what to do with them. Don’t forget about the opportunities to collect from your non-mobile channel as well: your website, social profiles, sign-up forms, etc. If you’re feeling gutsy, maybe try out a text messaging appeal.
10. Full Website View
It’s very important to always offer the option for your users to switch to your full website view. Users accustomed to specific content on your homepage may feel disoriented when they cannot find the same items on your mobile page. Typically, this switch-to-full-site link is placed on the bottom of the first page, but if you find your users struggling with your mobile site, consider moving the link to the top of page.
In one of our previous posts entitled 6 Tips and 15 Free Tools to Make an Awesome Mobile Website, we discussed various factors that contribute to creating a mobile-friendly website, as well as tools that help you do so. One of the factors that is a crucial consideration when it comes to retaining mobile customers is your mobile site’s page load time. Today we will discuss how to optimize this.
Desktop sites are at an advantage over mobile versions of these sites in regards to page load time. Mobile sites have some extra factors affecting their loading time,
which are as follows:
- Slower network connections.
- Smaller browser cache memory.
- Slower parsing of Javascript.
- Slower parsing of HTML.
Google came up with a mobile page speed online testing tool in the beginning of 2012. This is known as Chrome for Android, and it works in the same way the Google Page Speed Test tool does, where you get a speed score for your website and suggestions on how to further improve your load time.
The following are some best practices to ensure your mobile site loads faster on mobile browsers:
11. Embed Resources in HTML
If your mobile site is not cached on mobile browsers, then storing your site’s resources externally and linking to them is not necessary. Instead you can embed them in your site’s HTML. However, this may lead to an increase in page size, which negates the optimization of your site speed. To avoid this, you need to use a web application that allows you to embed resources in the HTML while also allowing you to track when mobile site caching does not occur, to embed resources only when necessary. Mobile Optimizer is one such application.
12. Reduce Parsing of JavaScript
Page load time is considerably increased when the mobile browser parses JavaScript on the site. By reducing the dependency on JavaScript to render a page or deferring the parsing of unnecessary tags, the initial page load time of your mobile website can be optimized.
13. Optimize Redirects or Remove them
Redirects generally require extra client-side processing. When a desktop site is redirected to a mobile site, this processing increases the loading speed of the mobile site. In some cases, when the mobile site is served at a different location than the main site, this redirect may be necessary. In such instances it is advisable to make the mobile site cacheable, in order to increase the loading speed of the site. However, if the mobile site is served in the same location as the main site, it is best to avoid redirects and serve the mobile site to the user directly. Display a link to the main site on your mobile version for users who would prefer to browse the main site.
14. Minify Scripts and Style Sheets
Minify JavaScript and style sheets on your mobile website and remove all unwanted characters and spaces that contribute to factors affecting site speed. The minification of files can be done using tools such as JSMin and YUICompressor. Minification reduces bandwidth consumption and improves mobile caching. Compressing files is another method of reducing page load times but some mobile browsers fail to cache compressed files.
15. Use CSS3 and HTML5
The lightweight features of CSS3 and the new structural elements of HTML5 make it easier for mobile web pages to load faster. Here is a table of mobile browsers that support various HTML5 features. CSS3 has features such as text/box shadow, rounded corners and animations.
The following is a list of sites that provide documentation and downloading for the CSS3 and HTML5 framework:
- Twitter Bootstrap
- HTML5BoilerPlate
- 52Framework
- 320andUp
- LessFramework
16. Minimize Image Size
It is not generally advisable to have images on your mobile website due to the restricted screen space. A simple image-free layout is preferred. However, if you do have images, they must be resized for faster page loading times. High resolution images take up more bandwidth space, processing time and mobile browser cache space.
Here are some online tools to optimize your site’s images:
- JPEG & PNG Stripper
- Smush.it
- Online Image Optimizer
- SuperGIF
17. Replace Click Events with Touch Events
On most devices there is a considerable delay after users click on mobile site buttons. A touchend event must be sent when the user lifts their finger off the surface of the screen to help overcome this delay. Click here to understand more about touch events.
18. Use AJAX
Using AJAX allows data to be fetched from a web server without having to refresh the page where the code is running. It allows the display of updated data on part of a page without having to reconstruct the entire page. While AJAX is recommended for desktop sites, it is even more essential for mobile sites, which are at a disadvantage due to network latency, constrained processor speed, and smaller memory and cache sizes. AJAX allows your mobile web application to load quickly and fill in updated content progressively while the the viewer is on the page.
Adopting these tactics will help you optimize your mobile site speed considerably. Let us know about any other problems you face concerning mobile site loading speed in our comments section below.
