Tag Archives: image optimization

mobile-users.png

5 UX best practices for a search engine focused website

Irrespective of your industry, you rely on your website to build trust, build relationships, provide services, and sell products.

Proper SEO will draw customers to your website, thereby improving your search rankings while UX helps a visitor to locate the needed information on your website and helps in starting a relationship with your prospective customer.

Your website visitors have specific problems, and they use search engines to find the answers they seek. Once they locate a website that answers their questions, they expect to view the answers quickly and easily.

This is why it is essential that SEO and UX complement each other to produce results. Simply put: SEO + UX = $.

It is worthless and pointless to drive traffic to your site unless that traffic is qualified. Likewise, your website design is a waste of time if you don’t have any traffic to convert.

Together, the focus of SEO and UX needs to be on the intent of your website visitors so that your business has a website that converts visitors into customers.

The strategies discussed below identify 5 UX best practices for a search engine focused website. 

#1 Responsive and mobile-optimized

If you look around any waiting room, restaurant or any other public place today, you’ll notice that most people are usually occupied with their phone. Statistics on consumer mobile usage by Smart Insights revealed that time spent on mobile devices has outgrown time spent on desktops by 51% to 42%.

96% of Smartphone users have run into websites that were not designed for mobile devices. If a mobile user arrives at your website and your site isn’t optimized for mobile, that user is five times more likely to abandon the task and bounce off your site.

Your website responsiveness should be given priority as Google has altered its algorithms to consider just how responsive your overall design is and reward mobile-optimized websites. This means that an irresponsive website will have difficulty ranking in search engine results.

With more and more people making use of mobile devices, having a responsive website is easy and a must for great UX and SEO.

#2 Optimize page speed

Google has been very clear about the impact of page speed on its search engine ranking. Google has stated on a number of occasions that it includes page speed signals in its search algorithms. This indicates that improving your website speed will yield dividends when it comes to ranking on search engine.

Slow web pages ruin customers experience because almost half of web users expect a site to load in 2 seconds or less. You can obtain a clear data on your web page speed performance with Google Analytics, Page Speed, YSlow, WebPagetest or Page Speed Insights.

Slow web pages are not ideal from a UX and SEO perspective, as corroborated by Matt Cutts:

“Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs.”

Below are some resources you can consult to learn how to optimize your website speed.

#3 Make use of rich snippets

A rich snippet might be an image, review, video, or even an event calendar, embedded right there in the SERP listing. The initiative, of course, is to enrich the UX and to provide additional info right in the search result page, compelling the user to click on your webpage for more information.

5 UX best practices for a search engine focused website

5 UX best practices for a search engine focused website

Website owners and marketing managers need to make use of any opportunity to lure internet searchers to click on their page instead of a competitor’s. With rich snippet, you can enhance your search results with add-ons like photos and rating, which help to draw the searcher’s eye as well as offering additional information.

With numerous paid ads, image results, and other visually interesting elements competing for attention on the search results page, rich snippets can be that unique effect that attracts the eye and wins the click.

Implementation of rich snippet can be done in two ways, as follows:

Very few brands implement rich snippets, so this undoubtedly is an opportunity for your website to stand out in SERPs, enhance UX and boost click-throughs.

#4 Use sensitive navigation

According to Google, “The navigation of a website is important in helping visitors quickly find the content they want. It can also help search engines understand what content the webmaster thinks is important…”

When creating a new website or redesigning an existing one, you should consider your website’s navigation process. Website navigation can be used to enhance UX while being used to optimize for search engine also, you might choose between multiple pages or an infinite scroll across your web pages as seen on Inc.com and others.

Designing a sensitive navigation not only improves your website UX but if applied properly can enhance your website conversion rate also. For example, bounce rate on Time.com dropped by 15 percent after they adopted continuous scrolling.

If you have clear calls to action (CTA) working in connection with a user-friendly navigation, it will help to make it easier to drive your visitors through the goal funnels and avoid frustration for your website visitors who have to take avoidable steps to reach their final destination.

#5 Support your content with graphics

Good images in your content not only help to make your website content more attractive and informative, it also helps to create an aura essential for UX.

Images help to deliver effective ideas to the user and attract interaction, and most SEO experts will tell you the benefits of optimizing your images for search as well.

When your image and title is properly formatted with relevant keywords relevant to the content of each respective image, there will be an increased likelihood of them showing up when a related image search is carried out in search engines.

For practical tips on how to make sure your images are properly search optimized, check out Christopher Ratcliff’s guide to optimizing your images for SEO.

Conclusion

It’s easy to blend SEO and UX to enhance your website’s performance, and it’s important to recognize that these two cannot work separately anymore, at least not with the same effectiveness.

SEO will lead traffic to your site and help it attain a higher position on SERPs, however, it’s UX that will determine whether the traffic can be sustained and converted into customers.

Thus, every site trying to improve its performance through UX and SEO should offer:

  • Attractive design that focuses on accessibility
  • Relevant, quality, and Informative content
  • Optimization of text and images to please both your site users and search engines
  • Simple and effective navigation and easy to use structure
  • Clear call-to-action, around both the users’ next clicks and around the desired conversion.
dna45_image_formats_httparche_t.png

How to optimize images for mobile: Implementing light, responsive, correctly formatted images

The mobile web has a weight problem. Too many mobile sites are slow to load, and bloated with unnecessary bells and whistles, leading to a poor user experience.

Chief among the culprits is images, which as we have seen in part 1 of this series, How to optimize your mobile site speed, account for 68% of total page weight. Then, in part 2, we looked at how to reduce the impact of images on the speed of your mobile site, including how to make sure your images are as accessible as can be. This mostly focused on removing images which do not add value, and making the ones you do use work harder.

But how can you make sure that any images on your mobile site are light, device-responsive, and use the best format to combine speed and quality? This column focuses on optimizing images for mobile, including responsive images and other clever methods for stopping images ruining mobile user experience.

The balancing act of image optimization

The problem with image optimization is that there are no hard and fast rules. Image optimization is always going to be a careful balancing act between user experience, attractiveness and page performance.

Raluca Budiu, Director of Research at Nielsen Norman Group, explains:

“Because the screen is small on mobile, too small images may offer too little information, and too big images may slow down the page too much. We recommend that you start with a modest size image and allow people to zoom in (or download a larger picture of the image).

Most of the time huge images are not a good idea — their information density is low, and they require people to wait for the page to load and/or to scroll down for more content. This is a common problem with responsive one-column designs: because images are supposed to fill up the whole container width, we often end up with huge images that carry little information compared to their size.”

There is no set-in-stone rule for how small a mobile image should be – it’s a trade-off between quality and page size. But a good guideline is to benchmark against the 100 most popular sites. According to httpArchive, the average JPG is 29KB and the average PNG is 16KB.

Reducing the weight of an image is partly about saving the image at the appropriate size and resolution (number of pixels) and partly about compressing the image. Some creative tools, such as Photoshop, will afford some compression, but often not enough, especially with larger image types such as PNG.

There are a number of tools that will very effectively compress images individually or in batches of images. For example the homepages image above was compressed using TinyPNG resulting in a 79% reduction in weight.

For a comparison of the leading compression tools, see GitHub.

Should you use different sized images for mobile, tablet and desktop?

When designing separate websites for mobile, tablet and desktop, whether that is via dedicated URLs (site.com and m.site.com) or serving different sites via a single URL (adaptive web design), it is implicit that images ought to be appropriately sized for the largest device in that category.

The position is perhaps less clear with responsive web design (RWD). With RWD, the principle is to serve the same website to different devices, using CSS to format the content according to the device capabilities and screen size.

This doesn’t mean, though, that websites should necessarily adopt a one-size fits all approach to images, explains Alex Painter, Web Performance Consultant at NCC Group:

“Pages are often slow on mobile because of a failure to deliver images appropriately sized for the viewport. The popularity of responsive design may be partly to blame – the idea that the same content can be reflowed so the layout works in any viewport can mask the fact that imagery hasn’t been optimized for mobile.

Plenty of sites deliver the same images on desktop as they do on mobile – with mobile versions just scaled down to fit. This might not be immediately obvious to end users with high-end devices on fast, reliable networks. But it can make websites completely unusable for people with lower spec phones or with poor connectivity.

 There are two reasons why this is a big problem. The first is simple – it just takes longer to deliver an unnecessarily large image over the network. The second is often overlooked: the mobile device has to work hard to a) decode and b) scale down the image. This is expensive in terms of processing power and memory.”

But it doesn’t have to be this way. Helped in part by the advocacy of the Responsive Images Community Group, the HTML specification now makes it easier for developers to create a number of alternate images for different device types – to suit different screen sizes (viewport), resolutions (number of pixels) or device capability.

The webpage HTML tells the browser which of these images to select for screens up to a maximum width and if the image should take up all or just part of the screen width.

Previously, some developers would use JavaScript to specify the use of different images, but using the HTML <picture> element should be more efficient, reducing the extra code and requests that slow down page load times.

Alex Painter:

“Delivering the right image for the viewport is now reasonably straightforward. We’ve had CSS media queries for background images for some time, but until recently images referenced in the HTML was more of a problem.

Now, we have the responsive images specification: the <picture> element, with the srcset[set of alternative image sources] attribute and sizes attribute that make it possible to define which image should be delivered for which viewport width (or to allow the browser to make the most appropriate choice from a selection of images).

The spec is now very well supported by browsers, and developers should ideally be using it rather than using JavaScript to achieve the same end.”

How to optimize images for mobile: Implementing light, responsive, correctly formatted images

Who is using responsive images?

A peek at the source code of major websites such as Amazon, Facebook and the BBC confirms that none is yet using the <picture> element to serve responsive images.

Would they benefit from doing so? Serving different images to each platform potentially offers several advantages:

  • Allows the website to show a larger, higher resolution image on the desktop.
  • Reduces the picture sizes and total page weight and thus speeding up mobile load time.
  • Enables the mobile site to show a zoomed in image on mobile. (Note the cropped image of the dog above).
  • Retailers can display Mobile-Friendly Hero Images on mobile while sticking to traditional pack shots on larger displays.

Finding the best format for your images

The most common formats for images used in mobile/mobile-friendly sites are JPEG 46%, PNG 28%, GIF 23% and SVG 1% according to httpArchive.

How to optimize images for mobile: Implementing light, responsive, correctly formatted images

Using an inappropriate image format can increase file size and effect quality when images scale for different screen sizes.

There are two types of web image: raster and vector. The first is made up of dots (like a digital photograph), while the second is made up of lines and shapes. JPEG, PNG and GIF are raster. SVG is a vector. SVG is a newer format not as widely used (yet), but is recommended for responsive design sites by this course on Responsive Images from Google and Udacity.

There are pro and cons for each, and every web designer has a different opinion and favorite formats. You need to research your own company policy, but in general:

  • JPEG is most commonly used for web photographs
  • GIF is common for animations as well as simple graphs, icons and logos
  • PNG is common for higher quality graphs, logos, icons and other illustrations and photos with graphical effects
  • SVG is good for graphs and logos, page headers – things that are designed by an illustrator.

For more information on format types and sizes, see Google’s guide to optimizing images.

Alternatives to traditional images

Webpages are made up of many small images, such as icons and buttons. If these are made using individual GIF/PNG/JPEG images, it all adds to the page size and each one requires an individual browser request, which can slow down page load time.

Three methods that can help keep page size and image requests down are:

  • CSS sprites – combines a collection of smaller graphics into a single CSS file. N.B. Overloading sprites with too many or too large graphics will be counter-productive.
  • Icon fonts – is a library of icons sent as one single file.
  • CSS shapes – are shapes built using CSS, rather than as a traditional image

Mike D’Agruma Lead Front-End Web Developer, E-volve Creative Group:

“To save on file size, I generally stay away from loading larger, more popular icon libraries, and use Fontastic to create my own custom icon fonts. This method works extremely well on a variety of levels: 1) As I’m only using a small number of custom icons, the font file size is drastically smaller; 2) Icons are created with SVGs, which ensures they’ll be extremely crisp on devices; 3) You can’t beat this option for flexibility, as font icons are extremely customizable with CSS.

Another great way to safe on time, file-size and server requests is to use CSS to create shapes – you can create most shapes and add as many effects and transitions as you’d like with CSS.

 Take Summit County Metro Parks mobile site as an example, in the header section alone, I was able to use a combination of CSS shapes and font icons to create what could’ve been six different images. Activating the mobile menu shows an example of a CSS-shape animation (the hamburger menu morphing into an “X”), and the use of an additional icon on the right side of accordion triggers shows open and closed states.”

How to optimize images for mobile: Implementing light, responsive, correctly formatted images

Web design techniques for improving perceived load time

When you have trimmed the fat, removed the unnecessary images and optimized the remainder, but the page is still not loading fast enough – what do you do? Cheat.

Make sure the most important stuff loads first, says Raluca Budiu:

“When a page loads, make sure that the text loads first, so that people can start scanning the content. As images load, don’t shuffle the already loaded content around — it will cause readers to lose their place on the page, and sometimes they will even click on the wrong link because the right target unexpectedly moved.”

There is a difference between perceived load time and actual load time. All that matters to the user is that the content on they are looking at, or for, is available. They do not want to be staring at an empty screen while the browser fetches images they may never see.

There are three common techniques for delivering this. Robert Gaines, a Kansas, US-based, web and app developer explains:

 “1. Deferred loading, or delayed loading, uses JavaScript to stop images and other assets loading until after the main content of a webpage has finished loading. Deferred loading reduces the amount of time it takes for a webpage’s primary content to render, but reduces the need to cut images that would otherwise slow down a webpage.

2. Lazy Loading loads assets when and as they are needed. So content is loaded above the fold first, then below the fold as the user scrolls. With image galleries – such as product searches on retail sites – thumbnail images are used, larger images are only loaded when a corresponding thumbnail is clicked.

3. Progressive image loading first loads low quality images while a webpage is being rendered and then replaces them with high quality images after primary content has finished loading. Progressive image loading balances performance with visual appeal. Unlike deferred loading, it doesn’t leave users waiting for secondary images to load after primary content.”

Tools such as Photoshop allow images to be saved as progressive JPEGs, or interlaced PNG, which will load in the way described.

This course on Responsive Images from Google and Udacity is a good introduction to this subject; it is aimed at web developers, but everyone will benefit. You can skip the coding exercises.

 

This article is Part 3 of a three-part series on how to optimize your mobile site speed. Read the previous instalments in this series:

A version of this column was originally published on our sister site, ClickZ. It has been republished here for the enjoyment of our audience on SEW.

site-performance-conversions.gif

How to scale web design to improve page loading speed

You might be thinking, what’s the fuss about website speed? What is important about the average page loading speed?

According to Aberdeen Group, a 1-second delay in page load time yields:

  • 11% fewer page views
  • A 16% decrease in customer satisfaction
  • A 7% loss in conversions

Amazon reported an increased revenue of 1% for every 100 milliseconds improvement to their website speed while Walmart, also found that every 1-second increase in page speed resulted in a 2% increase in conversions.

Source

The speed of your website additionally impacts your organic search rankings because Google, since 2010, has included site speed as a signal in its ranking algorithm.

Basically, your web page loading speed is very important and determines if you will rank in SERPs.

Below are 6 simple but highly effective ways to enhance your web speed immediately by modifying your website design.

#1 Optimize images and lazy load everything

Some of the most common bandwidth hogs on the web are images. According to HTTP Archive, images now account for 63% of page weight.

“As of May [2015], the average web page surpassed the 2 MB mark. This was almost twice the size of the average page, just three years ago.”

How to scale web design to improve page loading speed

Source

The graph shows a breakdown of what consumes kilobytes the most. Practically all asset types are growing, with the most notable one being images.

When creating content, some people make use of large images and then use CSS to scale them down. However, unknown to them, the browser still loads them at full size.

For instance, if you scale down an image of 800 x 800 to 80 x 80, the browser will load ten times more.

The best way to optimize your images is to compress them into smaller sizes while retaining quality. Using tools such as TinyJPG and Compressor.io, or CMS plugins such as WP Smush It (WordPress) and Imgen (Joomla) for compressing images will guarantee your website loads faster, resulting in better experiences for web visitors and increased conversion rates.

Another option is to “lazy load” images and web contents. In essence, you make use of a little bit of JavaScript to find out which images are in or close to the viewport and only download images that the user will likely see.

The benefits of Lazy Loading according to Stackpath include:

  1. Lazy loading strikes a balance between optimizing content delivery and streamlining the end user’s experience.
  2. Users connect to content faster, since only a portion of the website needs to be downloaded when a user first opens it.
  3. Businesses see higher customer retention as content is continuously fed to the user, reducing the chances the user will leave the website.
  4. Businesses see lower resource costs since the content is only delivered when the user needs it, rather than all at once.

#2 Make use of browser caching

Setting up browser caching allows you to temporally store data on a site visitor’s computer. This ensures that they don’t have to wait for your web pages (logo, CSS file, and other resources) to load every time they visit your website.

Your server-side cache and their browsing configuration determine how long you store the data. Setting up a browser caching on your server can be done by contacting your hosting company or by checking out the following resources:

Leveraging browsers caching is specifying how long web browsers keep CSS, JS, and images stored. Allowing your web pages load much faster for repeat visitors resulting in a smoother experience while navigating and better rankings in SERP’s.

Also, installing a cache plugin will have a huge effect on your page loading times. Caching plugins handle this concern by generating a static copy of your content and deliver it to site visitors. This can lessen your page loading time drastically.

Caching plugins could help you see around ten times improvement in your overall website performance. An example of caching plugin includes W3 Total Cache.

#3 Compress web content

Google defines compression as the process of encoding information using fewer bits. Though the latest web browsers support content compression ability, many websites still do not deliver compressed contents.

Visitors who visit these websites experience slow interaction with web pages. Major reasons for these unfavorable website behaviors include old or buggy browsers, web proxies, misconfigured host servers, and antivirus software.

Uncompressed contents make receiving the web contents and page load time very slow for users who have limited bandwidth.

For effective compression tactics to deliver efficient website content, Google recommends the following:

1) Minify, HTML, CSS and JavaScript

2) Make use of consistent code in CSS and HTML with the following method:

    • Use consistent casing – mostly lowercase.
    • Ensure consistent quoting of HTML tag attributes.
    • Indicate HTML attributes in the same order.
    • Indicate CSS key-value pairs in the same order by alphabetizing them.Using tools such as Adobe DreamWeaver and MAMP to create/edit CSS and test run websites locally on your PC respectively.

3) Enable Gzip compression

Gzip finds similar strings and code instances and replaces them temporarily with shorter characters.According to Google:

“Enabling Gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages”

#4 Optimize CSS code and delivery

The introduction of CSS was a key improvement and has had almost no shortcomings. However, it is essential to consider the impact CSS scripts can have on page speed, particularly when it comes to the representation of a web page.

When CSS is delivered inadequately, it results in a delay by the browser in downloading and processing the styling data before it can completely finish rendering to display your web pages to your visitors. This is why it’s vital to optimize CSS delivery and to identify the pitfalls that can slow down your web pages.

CSS can be used in several ways by a web page and still work. Given that there are various ways to use it, there are several different CSS setups. Regardless of how you set up on your web pages, your CSS should be aiding your web pages to render faster and not slowing them down.

You can make use of different online tools to compress, optimize and clean CSS delivery. Additionally, you can refer to Google’s recommendations on optimizing CSS delivery.

#5 Use a very fast hosting company

Some time back, I changed my hosting company and the average speed of my sites increased dramatically without changing anything else. That was when I realized that hosting companies are not all equal when it comes to the loading speed of websites.

When navigating a website or opening a web page, you are opening files from a remote computer, which is the web server of the hosting company. The faster the remote computer, the faster your web pages can be opened.

There are various hosting companies out there for your use. Just ensure that you carry out proper research and read enough reviews of each before deciding to host your site with any of them.

When researching for a reliable web hosting company, the most important factors you should look out for include speed/load time, uptime/reliability, customer support and price/value.

#6 Deactivate plugins you don’t use

Plugins are typically the major reason for slowing down a WordPress-hosted site. Delete plugins that you no longer use or aren’t essential.

You can identify plugins that harm your speed by selectively disabling plugins and measuring server performance.

Additionally, to speed up the experience of your WordPress site on mobile, check out our guide to Implementing Google AMP on your WordPress site as quickly as possible.

Conclusion

Users will continue to demand a richer online experience, and there will be faster and cleaner JavaScript, more CSS hacks, and other third-party analytics to increase the size of your pages and weigh down your websites.

As an online marketer, you can’t allow this to bog you down. You must regularly strive to scale your web design to improve your page loading speed.

A little continuous attention to your website loading speed will go a long way. Remember: as little as a one-second delay in your site loading speed is all it takes to lose a lead.

dna42_response_time_graph.png

How to optimize your mobile site speed: Testing for issues

The right picture is very useful on mobile and responsive websites. But images that are too large, too numerous and unnecessary simply slow down page load times and get in the way of the users reading and doing what they need to do.

The problem: the size of webpages sent to mobile phones has quadrupled in just five years. The main cause: images, which account for 68% of total page weight.

With mobile page speed a confirmed ranking factor in Google’s last mobile-friendly update, and Google’s mobile-first index looming large on the horizon, it’s in the interests of developers and SEOs to optimize their mobile site speed as much as possible. That means figuring out how to trim the fat from all those huge, cumbersome images.

This column will explore the issue and causes of delays in mobile page speed (i.e. how quickly pages load on a mobile device) and how to test webpages for problems with speed.

The next column will look at methods to reduce the impact of images on the performance of your mobile pages. This includes only using images that add value and making the images you do use work harder, with an excellent case study from Unilever.

This data was sourced from the incredibly useful httpArchive, which tests the top 1 million sites several times every month:

  • The average transfer size (i.e. bites sent from server to device) of a webpage is 4.2 times larger than it was five years ago, rising from 521 Kilobyte (KB) in December 2011 to 2197KB or 2.197 megabyte (MB) in December 2016. N.B.: this measures compressed rather than original file sizes.
  • Images are a massive amount of that bloat. Total size of images sent to mobile devices has increased 4.2 times from 352KB in 2011 to 1490KB in 2016.
  • Image requests have grown from 38 to 50. JPEGs are most common, accounting for 46% of image requests.
  • By comparison, the other major contributor to page bloat is JavaScript, which has risen from 98KB to 381KB with requests rising from 8 to 21 requests. That’s 17% of total page size compared to images’ 68%.
  • The one to watch is video, which was nonexistent in 2011 websites, but now averages 110KB or 5% of total page size and takes up a gigantic 542KB per request vs 43KB for a JPEG.

The most shocking discovery here is that the average size of a mobile webpage, 2197KB (2.2MB) is almost as large as the average desktop webpage at 2469 KB (2.5MB) in November 2016. We can only surmise why this might be:

  • Are responsive design websites… or to be more precise inefficiently built/implemented responsive design sites to blame (because the true responsive design website is one site reformatted for different devices)?
  • Has the adoption of lazy and deferred loading techniques encouraged companies to be less efficient with total page size?

Putting things right

A note before we begin:

Web/mobile images are an imprecise science. There are no hard and fast rules – different practitioners and scenarios dictate differing course of action.

There is no best format, size, content type, design, shape, placement or number of images, but there are best practices to help you make those decisions. The rule of thumb is as small, as few, as big an impact as necessary.

“Images” are not just illustrative pictures or graphs. They also include logos and icons – but these do not necessarily need to be traditional images, such as JPEGs.

Action plan:

  1. Review your policy on images, or create one, if you don’t have one. Issue guidelines for all web content creators as well as developers.
  2. Audit the images you are using on the site. Are they adding or taking away from user experience? Can they be improved, optimized, reduced in size (on page), pushed below the fold or removed?
  3. Test how effective your images are with the users. Research/test before you make any changes, test as you pilot changes and monitor results after changing.
  4. Work out how you will balance page speed with attractiveness, quality, impact, page speed, efficiency and accessibility.

The need for speed

Robert Gaines, a Kansas, US-based, web and app developer:

Graphics are attractive and allow users to quickly grasp concepts without reading large amounts of text, however they also slow load times. Excessive use of images or the use of especially large images will slow down webpages. Slow load times annoy both readers and search engines.

The need for graphics has to be balanced against page speed. When images are used, they should be compressed and scaled so that they load more quickly. In cases where compression and scaling aren’t enough, other advanced techniques may be needed.

There is no rule for perfect speeds that a page should download to a mobile device, how could there be – mobile connections vary massively. The rule of thumb is as fast as possible. Benchmark your performance against competitors and sector leaders.

Various studies and reports, see WPO Stats for examples, have shown that improving page speed improves conversions. For example, an FT.com study found that reducing page load by 3 second on mobile led to a 9% reduction in articles read over the month.

Google warns on its TestMySite tool that “Nearly half of all visitors will leave a mobile site if the pages don’t load within 3 seconds.” But the source of this stats is unclear.

Test, test, test

Testing is critical improving to website performance and usability.

1. Test how quickly pages download

Regularly test your mobile webpages (all new ones and all the main ones). Use different services and at different times, because tests results will differ… a lot.

WebPageTest is one of the better ones, it measures speed, page size and shows what proportion of the data and requests belong to images, JavaScript etc. Some of it is a bit techie, but the excellent filmstrip showing how the site loads second by second can be understood by everyone. WebPageTest used to offer remedies also, but sadly these have disappeared.

For something less techie, use Google’s PageSpeed Insights (also try the simplified version: TestMySite – it sometimes surprises by offering a different results to its brother). N.B. Google doesn’t actually test page speed, it estimates page speed based on key criteria, but it is excellent at pointing out problems with the page.

Top issues identified by Google include problems with image size and JavaScript codes, which we know from the httpArchive’s data are the two largest contributors to data bloat.

httpArchive is different. It tests the home pages of the top 1 million websites, at regular times each month. It is based on WebPageTest. It’s brilliant for showing the breakdown of content types e.g. images and shows historical trends. Even if you are not in the top 1 million you can use it to benchmark against the big boys: individuals, top 100, top 1000, top 1 million.

For this random test, let’s pretend we are the biggest retailer in the world, and compare against the biggest online retailer:

Mobile speed test performance test for Walmart.com:

  • httpArchive – mobile page speed (January 15, 2017): 20.6 seconds. Page weight: 1941KB. 95 requests. Images: 962KB. Image requests 53.
  • WebPageTest (tested on a US-based iPhone6, cable connection, (9.00 GMT, 29-01-17) – mobile page speed: 14.3 seconds; fully loaded 17.9 seconds.
  • PageSpeed Insights – mobile speed score: 45/100 (poor).
  • Google should fix list: Optimize images. Eliminate render-blocking JavaScript and CSS in above-the-fold content.

It is important to benchmark your performance against your competitors’ sites, so let’s try Amazon.com:

  • httpArchive – speed (January 15, 2017): 6.9 seconds. Weight: 554KB. 89 requests. Images: 259KB. Image requests 49.
  • WebPageTest – speed (9.00 GMT, 29-01-17): 2.4 seconds; fully loaded 4.8 seconds.
  • PageSpeed Insights – mobile speed score: 55/100 (poor).
  • Google should fix list: Eliminate render-blocking JavaScript and CSS in above-the-fold content.

Google PageSpeed, pictured in the image below, estimates that Walmart could save 478KB (almost 0.5MB) simply by compressing the images on the page. As can be seen from the httpActive chart, this could save as much as half the image weight or one quarter of total page size.

See Google’s Guidelines for optimizing images and fixing JavaScript issues.

How to optimize your mobile site speed: Testing for issues

2. Conduct user testing

As with all aspects of web development, user testing is critical to improving site performance and usability.

  • Conduct surveys and interviews with users to discover how they use your site and any pain points with the experience.
  • Test and watch users as they interact with the website. Use eye tracking to see what catches their attention and which images work.
  • Use heatmaps and web analytics to track how users interact with webpages and where they look.

3. A/B test webpages with different images, numbers, placement, formats and sizes of images

A/B testing shows two different versions of the webpage to different groups of visitors. Compare the results to see which types of image work best.

As we will see in the next column when we look at Unilever’s work with mobile images, user testing your mobile website is hugely important, and small changes to images can deliver big differences.

 

This article is Part 1 of a three-part series on how to optimize your mobile site speed. Check back next week for Part 2, which looks at reducing the impact of images on your website’s performance.

This column was originally published on our sister site, ClickZ, and has been reproduced here for the enjoyment of our audience on SEW.

 

Andy Favell is Search Engine Watch’s columnist on mobile. He is a London-based freelance mobile/digital consultant, journalist and web editor. Contact him via LinkedIn or Twitter at Andy_Favell.

Images: Your easiest page speed win

Page speed is important for both rankings and user experience, yet columnist Kristine Schachinger notes that many companies are missing an easy opportunity to improve in this area: image optimization. The post Images: Your easiest page speed win appeared first on Search Engine Land.

Please visit Search Engine Land for the full article.
Screen-Shot-2017-03-21-at-22.35.24.png

How to create SEO-friendly content

Good content is important, but it also needs to rank high on SERPs if you want to reach a wider audience with it. Here’s how to create search engine-friendly content.

Quality is always important when producing new content, but it’s the SEO that can boost your efforts of reaching a target audience.

SEO-friendly content doesn’t have to be difficult or time-consuming, provided that you understand how on-page SEO can work alongside your content.

Here’s how to create content that both your audience and search engines will enjoy.

Create original content

There’s no point in creating new content if it’s not authentic enough to stand out. Even if you come up with an idea from a different source, it’s still up to you to offer your unique perspective that will add value to the particular topic.

Copyscape is a plagiarism checker that can help you test your site’s content for its originality. Duplicate content, by and large, is not appreciated by search engines and it won’t help you rank higher in SERPs.

If you find it difficult to come up with new content ideas, here are 21 quick ways to find inspiration for your next topic.

Optimize the title

Your headline is among the first things that users will come across when carrying out a search. This makes them important, and it’s useful to brainstorm as many variations as you can until you land on the best candidate.

Using your focus keyword in the headline can also be a good idea, but don’t try too hard to include it. Use power words and avoid redundancy to create a clear and appealing result. Aim for a headline of 55-60 characters, as this is what Google will display on the SERP.

Also, make sure that your URL is relevant to the title, rather than a sequence of numbers that only makes it more complicated.

Focus on structure

How to create SEO-friendly content

It’s not just the content, but also its structure, that helps search engines decide on the results they’ll display first. Thus, a clear structure with headings and paragraphs that facilitate reading are preferred both from a user perspective and also from a search perspective.

Headings also help search engines get a quick overview of your content, which is why it can be beneficial to feature your focus keyword at least once.

Whether you follow the structure of H1 to H6, or simply add H2 and H3 headings at relevant points throughout the text, consistent structure in your pieces of content is appreciated.

Use keywords

Keywords are less often used nowadays as the first signal to indicate what your post is about, but they are still helpful to offer an overview of the topic you’re focusing on.

Keyword research is still useful when trying to decide on the most interesting topics for your audience. Keywords can still be part of your content, provided that they are added in context and at the right balance. There’s no need to sacrifice the quality of your content to include more keywords, as keyword stuffing can lead to the opposite of the result you want.

How to create SEO-friendly content
Moz Keyword Explorer

Aim for readability

The readability of your content has to do with the simplicity of its language, the lack of grammatical or syntactical errors, and the sentence structure.

Online readability tests allow you to learn the “reading age” someone needs to understand your content, and they depend on:

  • sentence length
  • number of syllables per words
  • frequency of passive voice

Despite the different readability formulas, you can still gain valuable insights on your writing that become even more useful if you want to target a wide audience.

Is your content suitable for the audience you want to target?

Include internal and external links

Internal links can help you prove your authority in a particular field by creating a logical sequence from one post to the other. This may lead to a series of posts that offer additional value, making it easier for search engines to understand your key topics.

External, or outbound, links indicate that you are well aware of the topics you’re writing about, to the extent that you’re ready to use further sources to support your content. It’s more useful to link to reputable sources, as these links have bigger credibility.

Beware, excessive linking, either internal or external can lead to the exact opposite results. Make sure that every link serves its own purpose in your content.

Optimize images

The optimization of your images provides an additional opportunity to show up in search results, this time in image search.

As visual content becomes more and more prominent, it cannot be left out of SEO. Luckily it’s not time-consuming to optimise your images. All you have to do is keep in mind a few simple tips:

  • Always keep the file name relevant
  • Be careful with the file sizes, as they affect the page speed
  • Don’t forget to add alt text, or else a title for your image
  • Think like a user when naming your images
  • Focus on quality images and avoid generic ones

How to create SEO-friendly content

Focus on the user

Every piece of content should have the user in mind. This also applies to SEO. You can’t create your next piece of content, or carry out keyword research, without knowing your audience.

What does your audience expect from you?

How can you enhance the user experience?

Does your site sabotage your content?

All the questions above can be answered by paying closer attention to your site, your content, and your target audience. Google rewards pages that focus on user experience, so never underestimate the power of the user.

Takeaway tips

If you want to create SEO-friendly content, here’s what you need to remember:

  • Focus on user intent
  • Be authentic
  • Come up with the best headlines for your content
  • Pay attention to the content’s structure
  • Use keywords wisely
  • Edit, proofread and aim for readability
  • Use both internal and external links to add further value
  • Optimize all your images to gain new opportunities for search ranking.
slideshare-992x1024.png

7 quick ways to use content marketing to boost search ranking

Content marketing can be very effective in increasing traffic, generating leads, enabling sales – and contributing to SEO. So how can businesses use it to improve their search rankings?

When done well, content marketing can contribute to boosting a site’s position in search rankings.

Although this may not seem like the most obvious benefit to a successful content marketing strategy, it’s an effect that no business can ignore.

Here’s how to take advantage of your site’s content to rank higher in the SERPs.

1. Create fresh content

A site can never have enough content. There is always an opportunity to create new pieces of content, and the newness – or ‘freshness’ – of content is also one of Google’s ranking signals.

Content freshness as a ranking factor is not just judged by the publication date of the page, but can also include:

  • updates to the content
  • new pages
  • an increasing number of links towards a page
  • an increased level of traffic reaching the page

These criteria show that older posts can still be valuable, especially if they offer an in-depth analysis on a topic, are evergreen, or have been regularly updated to keep them relevant. Which leads us on to…

2. Repurpose old content

There’s no reason to ignore the older content you’ve published in the past, especially if it still gains a significant amount of traffic.

As content marketing evolves, it is more beneficial to go beyond the written posts to new formats that allow you to broaden your value.

That’s why repurposing content can help you analyse a topic in more detail, by allowing you to create multiple types of content without losing their value or becoming repetitive. This saves you time spent coming up with new content ideas, and also gives you a regular supply of fresh, valuable content to boost your ranking.

Going beyond blog posts, here are other types of content you could create from your older material:

  • Videos
  • Infographics
  • E-books
  • Lists
  • How-to posts
  • Podcasts
  • Guides
  • Presentation

Your target audience might be more receptive for example to infographics rather than a blog post, or you may discover that you can achieve higher conversion rates through a presentation rather than a podcast.

Every content type serves its own goal and as every audience has different needs, experimentation can be very useful, until you discover which formats work best for your business.

3. Test headlines

A headline is usually the first thing we notice when accessing a search engine, and this reminds us that a headline should be:

  • valuable
  • relevant
  • simple
  • appealing

It may seem as if some of these points contradict each other, but the trick is in striking a balance between informativeness and length, or relevance and complexity.

Keywords can also be used as part of a headline, and this requires further planning on finding the best way to be SEO-friendly without sacrificing the flow of the headline.

Moreover, there’s a thin line between a click-worthy headline and clickbait, which is why it’s important to bear value to the reader in mind when creating a headline.

CoSchedule’s free headline analyzer is a very useful tool that can help you explore all the possible ways to improve your headline. Once you add your suggested headline, you receive a quick analysis, along with a score and tips on how to improve it.

7 quick ways to use content marketing to boost search ranking

4. Create visual content

Although visual content can be considered part of our earlier point on the importance of testing new content types, it deserves a special mention for its powers of grabbing the user’s attention.

Visual content has become very popular on the internet due to our own ability to process an image faster than any written text. This wins the first impression and it can be very powerful within the context of a page.

Previously used mostly to accompany written content, visual content has reached the stage where it’s now considered a form of content in its own right, standing on its own to increase awareness, engagement and leads.

On top of this, it can be optimized for search, offering a new opportunity for a business to stand out from its competitors via images and videos. The optimization of your visual content can lead to surprisingly positive results, provided that you follow a series of small steps that ensure that they are SEO-friendly.

7 quick ways to use content marketing to boost search ranking

Keep in mind, search crawlers cannot “read” images, only the text that accompanies them. This means that it’s important to focus on:

  • Image title (don’t upload an image with a filename 4fogowr.jpg, but rather rename it to something more relevant, e.g. contentforseoguide.jpg
  • Alt tags (the tags that describe the image for screen reader users, or if the image fails to load)
  • Image size (large images affect a page’s load time, which can have a negative effect on your search ranking)

5. Choose the right keywords

Keyword research can turn into a useful ally, especially if you bear in mind that you don’t always need to target the most obvious keywords.

Targeting highly sought-after keywords can make it harder for you to rank higher in search, but this doesn’t mean that you can’t become an authority on a topic by using different phrases for the same concept.

How about picking words and phrases that are less competitive but still high in rankings? Find the keywords that best suit your content, and think outside the box when deciding on the focus keywords you want to target.

6. Create link-worthy content

Link building helps your content reach a broader audience, increasing both your site’s visibility and its authority. Moreover, it can grow your search traffic, as the number of unique domains linking to your site helps search engines understand whether your content is informative enough to rank higher in the SERP.

Not all links are equal, as high-authority sites contribute more heavily in this regard. This means you should aim for more reputable mentions – but without snubbing any lesser sites that might link to you, as it all adds up. It’s easier for a source to link to your content if it’s authentic, interesting and well-researched, so always aim for quality over quantity.

It is useful to come up with a link building strategy that will help other sources discover your content and feature it if they find it relevant enough for their target audience – without losing sight of the need to create valuable content, of course.

7. Discover the connection between content and user experience

What’s the connection between content and user experience and how does that affect your rankings? We’ve talked about user experience and SEO in the past, and come to the conclusion that the more usable and readable your content, the more it is likely to boost your search ranking.

7 quick ways to use content marketing to boost search ranking

A Google-friendly website is valuable, appealing, and functional. Your readers should not struggle with reading or accessing your content, and search engines expect the same from each page they crawl.

The quality of content extends in this case to the page and how it helps the user experience with minimal effort. For example, have you tested the load time? Are your images hurting your site’s speed? Is your content too difficult to understood from your audience? Is your structure helpful both for your readers and for search engines?

Overview

The main aim of your content should still be to provide value and relevance for your target audience, but this doesn’t mean that it can’t be slightly more SEO-focused.

As the ultimate goal is to get more readers to your pages, an improved ranking on SERPs can help you tap into a new audience that will appreciate your content.

There’s no need to obsess over SEO throughout the whole content creation process, but getting into the SEO mindset can offer useful insights into how to make your content more effective from now on.

Google’s virtual game changer: Leveraging 360 VR video & image optimization for SEO

Contributor Brian Ussery notes that as global search interest in VR skyrockets, Google has quietly made 360-degree VR videos and images accessible across devices and optimizable for organic search. The post Google’s virtual game changer: Leveraging 360 VR video & image optimization for SEO...

Please visit Search Engine Land for the full article.

An In-Depth Look At Image Optimization: Fact And Future

Columnist Clay Cazier separates known from unknown image optimization elements and looks to the future of the discipline. The post An In-Depth Look At Image Optimization: Fact And Future appeared first on Search Engine Land.

Please visit Search Engine Land for the full article.

How to Use Image #SEO to Build an Unexpected Advantage by @jboitnott

Images drive traffic, backlinks and a whole lot more. It’ll be a game changer for your SEO strategy in 2015 and beyond.

The post How to Use Image #SEO to Build an Unexpected Advantage by @jboitnott appeared first on Search Engine Journal.