3Q WHITEPAPER SERIES. Page Speed Optimization: Load First or Finish Last. Maty Rice SEO Account Manager, 3Q Digital

Size: px

Start display at page:

Download "3Q WHITEPAPER SERIES. Page Speed Optimization: Load First or Finish Last. Maty Rice SEO Account Manager, 3Q Digital"

Suzanna Pamela Barker
6 years ago
Views:

1 3Q WHITEPAPER SERIES Page Speed Optimization: Load First or Finish Last Maty Rice SEO Account Manager, 3Q Digital

2 Introduction A Google study conducted in January 2017 revealed that 22 seconds is the average time it takes to fully load a mobile landing page and a whopping 53% of users will abandon a website if it takes longer than 3 seconds to load. From Google: That study makes it good and clear: page speed matters a whole lot to organic performance. As more consumers make mobile their primary device, webmasters and digital marketers must make a push to not only create mobilefriendly experiences, but also fast ones! There are a bunch of established best practices to help improve page speed: reducing page size, compressing images and text, and improving server response time are a few. According to Google, an estimated 30% of pages could save more than 250KB simply by compressing images and text. At 3Q, we ve developed a Page Speed Audit that tries to look at all major facets of page speed to identify both low-hanging fruit and long-term opportunities for our clients and in conducting these audits, we ve discovered a lot more truths regarding page speed that you can put into play right away. Let s start with 2

3 Optimize Images We re starting here because image optimization is often what moves the needle the most. The average webpage size is over 2MB, and images often play a large role in page size. Considerations for website imagery include: Lossless vs. Lossy Image Compression: Can yield significant data savings (if you re not familiar with lossless vs. lossy, here s a primer). Serving Scaled Images: Why request an image larger than it needs to be? Use the smallest possible image that strikes a balance between quality and small file size. Optimization Automation: Leverage tools to compress and optimize images before loading them onto the server. Tools include TinyPNG or TinyJPeg, or WP Smush Plugin for WordPress sites. Content Delivery Network: Reduce server load by using a CDN. Popular options include MaxCDN, Cloudflare, and Amazon CloudFront. Format: File formats are applicable for specific imagery types. Image Format Matters Many marketers aren t up to speed on the difference between image file types. Here s a quick rundown: PNG: Images in this format have the best overall color range, but they contain more data, resulting in larger file sizes. Images that contain text, or are logos or icons, are best suited as PNGs. JPEG/JPG: These have a smaller file size and are widely supported across the web. If you can afford to compromise image quality, JPEG is a fine choice as a file format. GIF: Because GIFs support only up to 256 colors, they are not recommended for photorealistic images. GIF file sizes start smaller than JPEGs, but adding long animations can inflate file size quickly. 3

4 This chart should help you pinpoint the right format per image type: Overall, remember that establishing a strategy for site imagery will pay dividends in the long run for both site speed and user experience. Simply incorporating the optimizations listed above is a good place to start. 4

5 Compress Resources Where Possible Compression allows servers to provide smaller file sizes, resulting in faster load times for users. The most common method for implementation is via GZip, which can reduce the size of pages by up to 70%. How compression works between browsers and servers: 1. Browser requests a file home.html for example. 2. Server finds the home.html file and sends a compressed, zipped version of the file. 3. Browser unzips the file and shows it to the user. Implementation of compressed resources varies:.htaccess file: adds specific lines of code indicating types of resources to be gzipped. NGINX webserver: can be as simple as adding gzip instructions in the code. 5

6 Optimize Server Configuration and Response Times Ensuring optimal server configuration influences response times and overall site speed. (As a benchmark, Google recommends a 200ms response time.) Factors influencing server response times include: Databases: How optimized are they? How fast are queries? Traffic and Hosting: Can the server handle the volume of traffic? Resource Usage: How many resources are requested? Can some be combined? Deferred? Server Software: How efficiently configured is the server s software? Talk to your engineering team to get answers here, and ask them which of these factors has the most room for improvement. 6

7 Speed up the Site by Caching Resources Browser caching allows for webpage resources to be stored on the user s local computer when a user visits a site; this results in faster load times. Browsers remember resources already loaded, so that when a user navigates to another page, cached items like logos and CSS files do not need to be loaded again. Implementing browser caching can be done by editing the.htaccess file, indicating to browsers how long to remember specific resources, and can be customized depending on file type. This is relatively easy to do and will positively impact page load times and, as a result, user experience. 7

Optimize JavaScript Execution As a browser s parser encounters a script, it must stop to execute its content. Every stop adds to the amount of time it takes for a page to load.

8 Optimize JavaScript Execution As a browser s parser encounters a script, it must stop to execute its content. Every stop adds to the amount of time it takes for a page to load. Depending on how JavaScript is called for from HTML, the impact on load time varies. JavaScript execution can be evaluated via waterfall charts in Google Chrome Developer Tools. Here s a handy chart of JavaScript s different formats and recommended uses: 8

9 Use Google Analytics and the Search Console Numbers don t lie. You can and should use Google Analytics and Google Search Console to validate your findings and to pinpoint opportunities for improvement. Identify any spikes or sustained increases for Time Spent Downloading a Page in Search Console s Crawl Stats. Look at Average Page Load Times in Google Analytics by Device Type, or by Specific Page Analyze impact on engagement metrics, like bounce rates. 9

10 One of the metrics you should consider referencing (under Audits in Chrome Developer tools) is First Meaningful Paint, which measures the time it takes for the primary content of a page to become visible. This screenshot is an example from Amazon: 10

11 Conclusion Identifying and addressing each issue pertaining to site speed will have a cumulative effect. Site speed improvements will positively impact user experience, regardless of acquisition channel or device. We ll close with a quick list of factors you should keep handy: To gauge the effects of your optimization efforts, keep an eye on crawl stats including Time Spent Downloading a Page and Average Page Load Times, both for the overall site and any particularly slow pages. And as a rule, watch for trends or sustained increases in load times; these are often triggered by back-end changes including migration, large code changes, re-skins, or an influx of new content. Keeping a site running smoothly isn t an easy job, but it s a valuable one that will help keep your users right where you want them to be. 11

About the Author Maty Rice Maty Rice is a SEO Account Manager at 3Q Digital. He is an alumnus of the University of Oregon, where he studied Sports Marketing and Journalism.

12 About the Author Maty Rice Maty Rice is a SEO Account Manager at 3Q Digital. He is an alumnus of the University of Oregon, where he studied Sports Marketing and Journalism. Maty s career background includes work in media, professional sports, and non-profit. In his spare time, he enjoys exploring San Diego s vast craft brewery scene, watching football, and hanging with his family. 12

About 3Q Digital 3Q Digital provides strategic growth consulting and execution across six growth drivers: customer journey, user experience, device strategy, analytics, technology, and

3Q Digital works with some of today s fastest-growing clients, including Square, ModCloth, SurveyMonkey, The RealReal, and Eventbrite.

13 About 3Q Digital 3Q Digital provides strategic growth consulting and execution across six growth drivers: customer journey, user experience, device strategy, analytics, technology, and growth platforms. The company offers best-in-class services in SEM, CRO, SEO, display, social advertising, mobile, video, creative, and analytics. 3Q Digital works with some of today s fastest-growing clients, including Square, ModCloth, SurveyMonkey, The RealReal, and Eventbrite. If you re interested in learning more about 3Q Digital s services, please call us at or visit our Contact page. 3Q Digital is based in Silicon Valley and has offices in San Francisco, Chicago, New York, San Diego, Austin, Charlottesville, Raleigh, and Burlington, VT. 13

Top 3 Marketing Metrics You Should Measure in Google Analytics

Top 3 Marketing Metrics You Should Measure in Google Analytics Presented By Table of Contents Overview 3 How to Use This Knowledge Brief 3 Metric to Measure: Traffic 4 Direct (Acquisition > All Traffic