Optimizing website speed for SEO: the breakdown between marketing and development

Optimize website speed (for the visitor and SEO)? I find that many of my clients sit with this issue. But, what should development do and what can marketing do? For this reason, I wrote this article.

The importance of website speed (for SEO)

The speed of a website is critical for both the visitor and SEO. For the visitor for the sake of conversion. For SEO for the sake of ranking in Google and allowing Google to crawl a website efficiently (a slow website also means more work for Google to download the pages).

Creating a website speed plan

A thorough website speed analysis is important to get an idea of what is going on “under the hood.” Important to consider here:

1. The home page is not the only page that needs to be sped up. From Google Analytics, determine which pages to speed up (I prioritize pages that are visited more frequently).
2. Analyze the issues of all these pages (I always use Lighthouse’ s API for this).
3. Don’t provide one-time optimization. Keeping website speed high means changing certain internal processes (such as uploading images to the website).

My website speed checklist for marketing

I like to share my checklist for the marketing department to not only optimize images now, but continue to optimize them in the future.

Images

Images are a big part of this checklist, given that this often lies with marketing and is a big component of whole website speed story(2).

1. Is the image served in the appropriate format (tip: if you don’t want to be too difficult, just always use .webp):
   • JPEG for photos.
   • PNG for transparent images.
   • SVG for vector.
2. Is the image smaller than 150 KB (unless it is a banner) (150 KB is already quite large)?
3. Is the image as large as it should actually be on the website (the correct width & height)?
4. Does the image contain a lazyload attribute when it is
   is not displayed “above the fold”?(3)
5. Is the image compressed? And does it now contain this right quality to lightweight ratio?
6. Use multiple variations of images for mobile, desktop and tablet. When you use a single image, it is often too large for mobile, thus loading unnecessary KBs.

Video

Another big component within an optimized Web site speed is video. This is also mostly on the plate of marketing.

1. Use embedded YouTube videos to avoid direct hosting on the website.
2. Implement lazy loading for videos so that they load only when they come into the user’s field of view.
   • Make sure videos are responsive and adapt to different screen sizes and devices.
3. Optimize all images and thumbnails to minimize file size.
4. Set up browser caching and consider a Content Delivery Network (CDN) for faster video delivery.
5. Load JavaScript and CSS files asynchronously to avoid render-blocking (in consultation with development).
6. Monitor page load times and analyze the impact of videos with analytics tools.

My website speed checklist for development

And now development. These are the technical issues for website speed. What often happens is that development first lays a good foundation for website speed and marketing goes with it after that. You can take this into account when allocating these resources.

The server

In this, I distinguish between what can be controlled on the server and what can be controlled within the website itself.

1. Server response time (TTFB): optimize the time it takes the server to respond to a request from the browser. I use this tool to check this.
2. Hosting type: choose a hosting type (shared, VPS, dedicated, or cloud) that fits the traffic volume of the website.
3. Geographic location of server: choose a server location close to your target audience to reduce latency.
   • Using a Content Delivery Network (CDN): implement a CDN to deliver static files quickly from a server close to the user (I would recommend a CDN even with Dutch websites).
4. Caching: configure server-side caching to reduce load times for returning visitors.
5. Database optimization: ensure an efficient database through regular cleaning and optimization of queries.
   • Load Balancing: implement load balancing to distribute traffic efficiently across multiple servers to avoid downtime and delays.
6. Compression: turn on compression (e.g. Gzip) to reduce the size of transferred data.
7. HTTP/2: HTTP/2 provides more efficient handling of multiple simultaneous requests (for example, you can load several JS files at the same time by default).
8. SSL/TLS optimization: optimize SSL/TLS for secure, yet fast connections.
9. Resource minimizing: minimize and combine CSS and JavaScript files server-side to reduce the number of HTTP requests (this does not help if you have HTTP/2).

And the business within the website?

1. Compressing files: reduce the size of CSS, JavaScript and HTML files by removing unnecessary spaces and line breaks, for example.
2. Image optimization: implement automatic image optimization to reduce file size without loss of quality (this can also save work for marketing). Usually this is controlled sitewide by development.
3. Asynchronous file loading: implement asynchronous or delayed loading techniques for CSS and JavaScript to avoid render-blocking.
4. Browser caching: set browser caching for static files to reduce load times for returning visitors.
5. Lazy loading: implement lazy loading for images and videos to reduce initial page load time. It’s best to pick this up once sitewide (and from there it will be added automatically when new images are added).
6. Using CSS Sprites: Combine multiple small images or icons into one sprite to reduce the number of HTTP requests. Do check if this actually has a positive impact with HTTP/2.
7. Content optimization: make sure content, especially above the fold, is optimized for fast loading and direct user interaction (this primarily impacts the LCP).
8. Reduce HTTP requests: reduce the number of HTTP requests by combining files and reducing external scripts and fonts.
9. Avoid redirects: minimize the use of redirects to reduce page load time(4).
10. Implement security headers: Add HTTP security headers to protect the website from various attacks and vulnerabilities.

Conclusion

Use these checklists to not only establish a good foundation for website speed once, but also to future-proof it. Good luck!

The most complete book on website speed

I’ve written so much about speeding up websites and everything involved that I like to divide it into different sections; general, tools, speed improvement points and tips. Feel free to see and consult all the links below to learn more about tools and tips for speeding up your website.

General

• What is the website speed
• The influence of SEO on UX
• The influence of web design on SEO
• SPAs and SEO
• What are the Google Core Web Vitals?

Tools

• Autoptimize
• Pagespeed.Compare
• W3 Total Cache
• Tools Pingdom
• Google Pagespeed Insights
• GTMetrix

Verbter points for speed

• First Contentful Paint (FCP)
• Time To First Byte (TTFB).
• Time To Interactive (TTI).
• Image for Largest view with content (LCP) preloaded
• Enable text compression
• Reduce the CSS
• Total Blocking Time (TBT).
• Speed Index
• Reduce JavaScript
• Largest Contentful Paint
• Avoid an overly large DOM
• Delete unused CSS
• Remove unused JavaScript
• Deliver images in modern layouts
• Connect in advance to required origins
• Preventing obsolete JavaScript from being delivered to modern browsers
• Use an efficient cache policy for static items
• Remove duplicate modules from JavaScript
• Avoid multiple redirects
• Encode images efficiently
• Use lazy loading
• Load important requests in advance

General tips

• Tips for quickly loading a video
• Using Edge SEO for a faster website
• Installing a Content Delivery Network for SEO
• Optimizing images for SEO
• The influence of hosting on SEO