SEO Page Speed Techniques and Practices

With the advent of mobile devices, came the need for more speed. Faster transit times, faster load times and faster html parsing and displaying of content. This need led to major search engines designing metrics to measure such things as First Contenful Paint, Total Blocking Time and Cumulative Layout Shift among other factors.

We won't go into each one of these factors here, but just know that each factor is very important and must be addressed. Sometimes, this can take days or weeks of fine tuning simply for one page in your website.

From There to Here: The Fine Art of Transit

Every request for every item, image, css, javascript or whatever, requires transit time to get from the server to the end user. That statement is over simplified of course, but we will break down the process. It is important to know every step of this transit process, because this is where you will be shaving off miliseconds on every request, thereby increasing your page speed tremendously.

Initial Domain Lookup (DNS)

Before a users browser can get contents from a server, the browser needs to know the IP address of the server. Unless you are a genius savant, you probably can't remember the IP address of every website on the internet. This is where Domain Name Servers (DNS) comes in.
Think of DNS servers as the yellow pages of the internet. You input a domain name, the DNS servers around the world find the authorative IP address for it. This can be considered a multi-tier process, as your browser first inquires the internal DNS host file on your computer. If the record is not found there, it polls your immediate network. Not there? It asks your ISP (Internet Service Provider). All of these sources can "cache" the ip address of the domain you are looking for.
If an IP address is not found in any of the above resources, and I should say if any FRESH and VALID IP addresses are not found, your browser will then send the request to the 13 Root DNS servers positioned around the world. These root servers will respond with authorative dns servers, "Like hey, the record you are looking for is over there". Your browser requests the IP address from that authorative DNS server and now your browser can request the web page from the appropiate server.
This all happens in milliseconds (hopefully). If the DNS system is broken anywhere in that chain, you are out of luck.

There are things you can do to ensure that this process is faster for your website and always available. Making sure your DNS records are published on a system that has a global reach, is very close to the root DNS servers, has their own backbone transit system, and whose records are always refreshed quickly and securely.
Two of these services come to mind; Google and Cloudflare. If you have small to mid-size website, Cloudflare can more to your liking as it is very cost-effective, user friendly, and has a multitude of valuable services for your website which can assist you with just about everything on this page.

Browser/Server Request/Response

Whew, all of that and we are just getting started!
Now that we have an IP address, your browser can now actually make a request to the appropriate server. It is at this point that your server needs to be fast. It needs to accept the request and respond quickly. Many things can bottleneck the process at this point. Slow or outdated servers, heavily used or overloaded servers, servers very far away from the actual user are just a few things that come to mind.
How can we speed up this process? First and foremost, make sure your server(s) are fast and capable, but then there is so much more we can do. I will use the Cloudflare example here. Through Cloudflare, you can enable: Argo (fast transit routing), Caching, Quick HTTP/3 routing, Serving static files or images from Cloudflare's CDN, and so much more.

The typical browser will try to download as many assets from the server in a parallel fashion (ie: approx 11-12 assets at a time). This is also better known as the waterfall. Keeping this in mind will go a long way in speeding up your website. It is also a common practice to use 'lazyload' whereby only the nec images and contents are loaded for the client to view. Everything that is below the scroll line of the browser gets requested and loaded as needed.

Putting It All Together (Rendering)

How a web page is rendered is very important and can help you achieve better search engine rankings if performed correctly. As stated before, layload goes a long way to achieve this, reducing the amount of areas that you have to work on for a web page.

Next, you have to 'defer' as much javascript and css as possible. Deferring javascript is pretty easy by just using the defer tag in your script call, and making sure all script resource requests are on the bottom of the page.
Example: <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js defer='defer'></script>
Deferring CSS in this mobile-first, responsive world is not so easy. Deferring CSS involves finding out the only CSS needed to 'draw' the initial page and deferring the rest after.
As you can imagine, CSS files can become very bloated, and you may not need 80% of what is in them for your specific page. However, herein lies the rub; you need to determine what css is needed for EVERY screen size to do this properly. There are tools on the web that you can use, but always use with caution as improper use and planning can really mess up your website.

Image Compression and Sizing For SEO

We talk more about image seo in detail elsewhere on our website, but we can go into a few things here because it is so important for page speed and load times.

The internet is slow, and even slower on mobile. One of the biggest speed improvements you can make for your website is image sizing and compression.
The average JPG or JPEG image is jam-packed with bloaded data, over needed quality and takes a TON of time to transfer. There are much better image types that are more efficient, compressed better, and look just as good on a web page.
Use the following general steps for your images and your life will be much happier :)

• Use an image process program to strip the metadata from the image
• Resize the image down to the largest size you will need on your website (maybe 600 wide x 400 high for most general images)
• Rename your image file names to utilize your keywords, ie: this-cute-white-cat.jpg (never have spaces in file names)
• Convert if possible to WebP or AVIF file type (or use Cloudflare to do this automatically!)
• Serve your images from a Content Delivery Network (CDN), not your server. Let your server handle the page content, let CDNs serve your static content.

Knowing these few simple things will take you a long way in providing great page speed for SEO. There are many other techniques, some very involved. Contact us for further information and consultation