Page Speed Optimization: Part 1 – How to Guide

 

Page speed optimization can be a challenging task to undertake when enhancing the performance of your campaigns. This guide will walk you through different techniques and resources you can use to make things easier for you. 

 The first thing to look at this point is your Landing Page or Lander speed. In most cases, page speed is the problem that is causing the lack of conversions due to customers bouncing off quite frequently.  This not to be confused with the fact that increasing the page speed, in turn, increases conversions. There is no direct correlation between page speed and increased conversions.

With that said, let us investigate the different ways that we can make the page load time faster. You can use this as a guide to optimize your campaign’s landing pages’ page speed. But, before jumping into the juicy details. It is important to get the terminology right. What do we mean by that?

Most people confuse page speed with site speed. These two terminologies are not the same and cannot be used interchangeably. If you are trying to optimize a site’s website then this might not be the guide to help you do so quite effectively. The difference between the two is subtle. 

Site speed defines how fast your website visitors can see and interact with your website’s content. In a general sense, we can look at site speed as a measure for page speed for typifying page views on a site. Page speed, however, measures how fast the full content on a specific page loads. Page speed is referred to as page load speed, as well. 

Now, that the terminology is clarified. We shall move to the first part of our guide fort page speed optimization.

What is Page Speed? And Why Is It Important? 

What is Page Speed?

While the definition of page speed has been mentioned in the above lines, we shall reiterate it as a means for you to remember what it is. Page speed is a measure of how fast web browsers can fully paint the content of a web page. This definition is not, however, the only way we can measure how fast a page is. There are other measurements we can use to define how fast a page is. We will come back to these in a later section of the guide. 

We, now, understand what the page speed is. Albeit, why is it so important? And more importantly, why should you make it faster as a part of your campaign optimization? 

Why is Page Speed important?

Let’s start simple. Page speed helps us understand how fast a page’s content can load. That is when a user clicks on the blue link of a Search Engine Results Page, this metric indicates how much time the user waits before the page’s content fills the user’s screen. 

The latter statement is the first reason why page speed is important. Page Speed is a major factor in the contemporary User Experience. As technologies get more complex, so do the users expectations. A part of the expectations is a fast-loading web page. Slower web pages lead to higher bounce rates which negatively impact your user retention rate, as well as, the exit rate. 

Higher bounce rates and exit rates have a direct negative impact on the ranking of the web pages. The higher the rates, the lower the rankings. This is an indication that page speed has an indirect effect on the rankings of the web pages. Also, keep in mind that lower rankings lead to lower conversions. This is just from the UX perspective. In short, the faster the page load, the more chances you have for higher conversions and better rankings.

But, when pages load there are two parts in the equation. The second part is the search engine crawlers. Google announced after their Page Speed Algorithm update that page speed is an important indexation factor for their algorithm. The update also announces that Page Speed is a factor for ranking for mobile searches. Faster loading pages affect how Google is crawling your website. This important information to keep in mind. Page Speed affects the crawler ration, crawl frequency, and crawl budget. 

In a nutshell, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.

Since we clarified what a page speed is and why it is important to optimize it for our campaigns. We can now take the next step which is identifying how to improve the page speed.

The following part will highlight important resources and steps that can be taken to work on and improve the page speed. All the techniques to be introduced are not advanced and are fairly categorized as best practices.

Improving Page Speed: Best Practices

1) Compression

You can use a software application for file compression like Gzip to reduce the size of large CSS, HTML, and JavaScript files. It is recommended to compress any files that have a size larger than 150 bytes.

Another point to keep in mind is avoiding compressing the images using Gzip. Compress the images using appropriate software such as Photoshop where you can still control the quality of the images. 

2) Minify CSS, JavaScript, and HTML

By optimizing your code (including removing spaces, commas, and other unnecessary characters), you can dramatically increase your page speed. You can use the following resources:

The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

Otherwise, the Pagespeed Module comes with tools that help optimize your page speed. For more information, visit this page.

3) Reduce redirects

Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. 

4) Remove render-blocking JavaScript

Browsers have to build a DOM tree by parsing HTML before they can render a page. If your browser encounters a script during this process, it has to stop and execute it before it can continue. 

If you are using Javascript on your page, then follow these recommendations:

  • Use inline javascript instead of external .js files that need to be called to reduce the number of requests. This allows the browser to deliver a faster time to first render. However, note that inlining also increases the size of the HTML document and that the same script contents may need to be inlined across multiple pages. As a result, you should only inline small scripts to deliver the best performance.
  • Make use of Asynchronous Javascript.

By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML async attribute on external scripts.

5) Leverage browser caching

Browsers cache a lot of information (stylesheets, images, JavaScript files, and more) so that when a visitor comes back to your site, the browser doesn’t have to reload the entire page. Use a tool like YSlow to see if you already have an expiration date set for your cache. Then set your “expires” header for how long you want that information to be cached. In many cases, unless your site design changes frequently, a year is a reasonable period. Google has more information about leveraging caching here.

Additionally, you can optimize your server response time. The response time is affected by the amount of traffic you receive, the resources each page uses, the software your server uses, and the hosting solution you use. The optimal server response time is under 200ms. Ideally, you need to optimize your time to first byte as Google might measure this metric. Learn more about keeping your response time low with this Google documentation.

6) Implement a Content Distribution System (CDN)

Content distribution networks (CDNs) are networks of servers that are used to distribute the load of delivering content. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.

7) Optimize images

Be sure that your images are no larger than they need to be, that they are in the right file format and that they are compressed for the web. Google recommends serving your images in NextGen formats which are JPEG 2000, JPEG XR, and WebP.  You can check the support for the different browser support using the following resources:

To optimize the images, you can use the following resources: 

Image optimization CDNs:

Image optimization APIs:

8) Minimize HTTP requests

HTTP requests happen when a web browser sends a “request” to your website’s server for information on a webpage. When a user visits a page on your website, your server heeds this request and returns the files contained on that page to the user’s browser. The fewer HTTP requests a website has to make, the faster the site can load.

To learn more techniques on page speed enhancement, visit our post on the advanced techniques for page speed optimization.

Leave a Reply