Why page speed matters to an SEO and what to do about it - Raven Blog

• Updated on: 2019-04-17
• Read original article here

As an SEO, chances are you’re going to come across web performance initiatives (after all Google did call speed out as aranking factor…and they recently hollabacked for mobile speed).

In theory, it seems like an easy business case — speed up the site, create a faster user experience (UX), and increase the likelihood of conversion along the way. Easy, right? Unfortunately, there’s no easy button here (Is there ever?).

When developing site latency recommendations for SEO, it can be atwo-front warwith UX and the web development team. Everyone wants a faster site, but the UX team may not want to give up their fanciful fonts and laden libraries. Plus, the development team already has a list; a really, exceptionally long scroll lasting minimally two years. They also have lives outside of work (or at least Dungeons and Dragons at 7PM on Thursday nights). On top of that, chances are the development team is already acutely aware of web performance. But what supposed to do if their boss tells them to animate blazing fireballs (for pizzazz… obviously)?

On top of the political complexity, every site is different, making web performance both an art and science with innumerable nuances. Solutions that work on one site, may not be feasible or ideal for another’s configuration. We’ve all heard about slow AMP sites in the wild (sometimes reality offers us such an oxymoron).

These colliding elements ensure a challenge; however, a second shaved from a page loading has proven to bemore than worth the trouble, especially if it means your site is 20% faster than the competitive set. The benefits for SEO and the user experience offer great potential. Below is one approach.

There are many aspects in a successful SEO strategy, which must be prioritized based on estimated impact and anticipated efforts. Make sure to understand the cost, political conditions, and potential benefits before recommending site latency optimizations.

Without UX, development, and executives in your corner, you’re going to have a hard time making impactful updates.

Help UX and developers in the political battle of web performance by getting decision-maker buy-in. Build a compelling business case with relevant data. Think: site’s latency performance, competitive latency performance,estimated impact on KPIs, and relevant case studies (e.g.,Financial Times Test,Google’s Research Blog,Mozilla Blog,Walmart,Amazon 100-ms increase,Amazon $1.6 billion in sales,etc.).

Also, be cognizant of the development team’s requests. The development team is going to have the knowledge and access of what can be done to improve performance. Being supportive and listening to their needs and requests throughout this journey will help support your initiatives.

Low-hanging fruit strategies are less challenging to implement and shouldn’t affect UX. They’re not going to solve a major page speed issue; however, they’re a good starting point toward improving latency.

Remove anything that is outdated or unnecessary to load a page.

It’s important to identify, test, and confirm that all code and resources are actually being used. This may seem obvious, but often times, code contains archaic resources that just haven’t been trimmed.

Make evaluating JavaScript, CSS, HTML, and resources (images, videos, etc.) a standard and habit.Per Ilya, “Be vigilant about auditing and removing unnecessary resources.”  The following DevTool reports are useful in identifying excess content.

DevTool’s Elements Panel– By hovering over image resources, you can see display pixels (watch out for “0 x 0 pixels” that are not used on any part of the page).

GZIP is a popular compression format for text-based assets (think: JavaScript, HTML, CSS).

Brotliis a newer, alternative lossless data format gaining popularity, that is now supported in almost every major browser (excluding IE).

For web performance optimization, HTTP redirects should be avoided, especially more than one. When necessary, implement a single 301 HTTP redirect and make sure all chains are consolidated as much as possible.

To identify redirect chains and loops, check Screaming Frog’sRedirect Chainsreport, which maps out multiple redirects.

WebPageTest.org’s waterfall views (under “Details”) also identify 301 redirects (in parenthesis), that way you can easily tell how much wasted time.

Web font files are resources that can require large download times, and they may block the rendering of important textual content on the page. Web pages with many font files require more round-trip times with visual content left dependent on their load completion. If your team can use system fonts over loading a new font or a Google font, you’ll be more efficient with your speed.

Content delivery networks have physical servers located around the world. They cache your content and when a user requests content, they’re sent to the closest server. This removes round trip latency time by placing the servers physically closer to the user, amplifying your ability to reach customers as fast as possible.

Visual of How CDN’s Enable Brands to Get Closer to Users:

Technical image optimization should be automated, and a team should invest in an infrastructure of tools that can ensure images are always optimized. There are numerous intermediaries, including CDNs (e.g.,Akamai) and third-parties (e.g.,Cloudinary,Imgix) that offer automated image optimization solutions. Alternatively webmasters can use task runners (e.g.,Grunt) with image compression tools (e.g.,Trimage,ImageAlpha,File Optimizer,and Mac-only ImageOptim)in conjunction to automate image optimization.

Minimally all images should be compressed; however, there are numerous other byte-saving and network optimization techniques, including:

Caches store things for a specified period of time, encouraging the client to store a local copy, improving web performance. Think of it as remembering the most important resources and providing them whenever requested. For any resource that’s consistent for longer periods of time (think: logo), organizing and consolidating the cache setting will help to make your page load faster. Leverage theCache-Controlheader to specify the lifetime of a resource along with a validation tag (Last-ModifiedorE-tag).

Google Documentation Visual by Ilya Grigorik Detailing when to Caching Headers:

Resource hinting is a performance-enhancing tactic designed to create efficiencies and shorten site latency. This speculative optimization anticipates what the user will do, what’s needed, and getting it done before it’s needed.

It involves leveraging HTML tags on a page, which indicate to a browser (client) what resources will likely be needed in the future. The browser is then able to hide some of the networking, processing, and rendering for these important resources and prepare before the user specifically requests it.

Note: The browser can ignore the prefetching notification.

Important note: You have to be right. If implemented poorly, resource hints might trigger unnecessary work and network traffic (i.e., have a negative effect on the loading time). Resource hints canmake a lot of sense in situations when user’s journeys are basically guaranteed (e.g., slideshows, multi-page lead flows).

HTTP/2 is an updated version of the HTTP protocol officially standardized in 2015. The basis of HTTP/2 was derived fromSDPY, a protocol designed for low-latency transport (improving page speed) of content over the World Wide Web by Google. The core differences between HTTP/1.x and HTTP/2 include:

Side Note: Just because HTTP/2 introduces multiplexing and push responses does not mean that web developers should stop optimizing for performance. The same recommendations for developing efficient, prioritized code still stand. Bloated code with multiple contingencies remains more taxing on a server.Per Ilya, “A naive implementation of an HTTP/2 server, or proxy, may “speak” the protocol, but without well implemented support for features such as flow control and request prioritization, it can easily yield less that optimal performance. For example, it might saturate the user’s bandwidth by sending large low priority resources (such as images), while the browser is blocked from rendering the page until it receives higher priority resources (such as HTML, CSS, or JavaScript).”

Minifying files includes removing comments, unnecessary spacing, shortening and consolidating names to create a consolidated source code without changing any functionality.

Notice the differences in the two JavaScript files below.

These initiatives take longer and may require more development work; however, they also offer the potential of higher returns.

Buy your development team some coffee, 5-hour ENERGY®, and make sure it’s not D&D night.

Google’s critical rendering pathpushes the concept of minimizing perceived latency. This means getting the content as fast to the user as possible.

A common battle is render-blocking JavaScript, meaning JavaScript that impedes on other elements loading. The solutions vary based on the situation, but come down to: