Tag Archives: page speed

Google: We Are Rewriting Our Page Speed Algorithm For Mobile

One of the more confusing things around the mobile first index is will page speed be a factor or not when it launches. Google has said no, it won't be and then they said yes it will be. It seems like Google is reworking how their measure page speed...
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.

Google: It’s Easier To Tell If A Page Is Slow Vs. Fast

Paul Bakaus, one of the more well-known faces behind Google's AMP project, said a while back on Twitter that it is easier to tell if a page is slow versus telling if a page is fast. He said this after he said that the "whole area" of page speed "is technically very challenging...

How to Conduct Quick & Thorough Page Speed Audits by @sllewuy

These three tools will help you do quick and thorough page speed audits to help your optimization efforts.

The post How to Conduct Quick & Thorough Page Speed Audits by @sllewuy appeared first on Search Engine Journal.

5724633.gif

How to Beat Google’s Mobile Page Speed Benchmarks by @bsmarketer

Here's how to beat Google's industry mobile page speed benchmarks to gain more search visibility and revenue.

The post How to Beat Google’s Mobile Page Speed Benchmarks by @bsmarketer appeared first on Search Engine Journal.

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.

Baidu becomes Google’s biggest ally in mobile page speed

Chinese search engine Baidu will soon support Accelerated Mobile Pages (AMP) in its search results, expanding the reach of AMP significantly. Columnist Hermas Ma believes the worldwide impact on mobile page speed will be notable. The post Baidu becomes Google’s biggest ally in mobile page speed...

Please visit Search Engine Land for the full article.
5484621.gif

“Why Page Speed is So Important to SEO” via Jon Henshaw [PODCAST] by @rinadianewrites

Kelsey Jones and Raven Tools co-founder Jon Henshaw talk about why page speed affects SEO, the pros and cons of AMP, and how a mobile-first index ties into putting the user first when it comes to the search and website experience.

The post “Why Page Speed is So Important to SEO” via Jon Henshaw [PODCAST] by @rinadianewrites appeared first on Search Engine Journal.

Mobile page speed is important, but not (yet) for SEO

Columnist Bryson Meunier suggests that mobile page speed, while good for conversions and customer retention, might not be doing much for your mobile search rankings. The post Mobile page speed is important, but not (yet) for SEO appeared first on Search Engine Land.

Please visit Search Engine Land for the full article.