Technical SEO refers to all technical procedures you have to do to get a better rank for your website. Page speed, Mobile friendly UI design, and more practices will make your rank higher.
1- Page Speed
Page speed is a ranking factor that Google is using to rank Desktop and Mobile searches. On April 2010, Google announced using site speed as a ranking signal for desktop users. On January 2018, Google announced using site speed as a ranking signal for mobile users starting in July 2018. So no doubt that page speed is one of the top technical SEO ranking factor you have to maintain and optimize for desktop and mobile users.
You can test your page speed using Google Page Speed Insights and Web Page Test. These tools will provide you with many speed metrics:
- TTFB (Time To First Byte): It is the time that the user’s browser waits until it receives the very first byte of the website page content. Optimizing the server response time by improving the backend code, server capacity, server location will lower the TTFB.
- Speed Index: It is the time the user’s browser needs to populate the visibility of the content. Enhancing the Html, CSS and Javascript code that compose the page is essential to lower the speed index time.
- FCP (First Contentful Paint): It is the time from navigation to the time when Browser renders the first part of the page content. This is the first time the user will get the impression that the page is loading. Also enhancing the page code and all related static files that compose it will lower the FCB time.
- FMP (First Meaningful Paint): This one is really ticky. The main definition of it represents the time needed to paint the above-the-fold meaningful layout and loading the web fonts. The meaningful here is relative to the content type of the page. For article pages, it may be the headline and the above-the-fold text. For e-commerce product page, it may be the product main images. You can check out this document to get more detail (Time to First Meaningful Paint: a layout-based approach). Page code enhancement will lower the FMP time.
After discussing various page speed metrics, let’s talk about the Technical SEO practices that lower the page load time and make your rank higher:
Hosting Performance
The best hosting type is the dedicated server but it’s relatively costly. The worst choice is the shared hosting but it’s cheap. Hosting Performance can be discussed in more details. For now, I highly encourage to choose the best hosting type that suits your website software and your budget. Then you can scale up the hosting performance as you go. Meanwhile, you can focus on optimizing your software code and server configuration:
- Optimizing memory and CPU usage on the application code level
- Optimizing the database queries and connection pooling
- Upgrading the dependencies and frameworks usually contains performance enhancements.
CDN (Content Delivery Network)
CDN is a content delivery network of servers distributed geographically to provide fast delivery of web contents like HTML, CSS, JavaScript, Images, and Videos. CDN helps to improve your hosting by caching the content in different servers to quickly serve your users. This has a great positive impact on your page speed. It is a good solution to lower the TTFB.
CDN is growing and almost the major web content is served by CDN. You can check Cloud Flare CDN as a free solution for your website.
Optimizing The Content
When the user requests a specific URL, The HTTP response consists of HTML page along with many different resources. The web browser needs to fetch them all and process them based on their type to load the page successfully.
In the modern web, a web page contains many images, CSS files, JavaScript files, and web fonts. Each resource type can be optimized to facilitate the web experience we are looking for. Optimizing the content will affect all the speed page metrics we previously mentioned (TTFB, Speed Index, FCP, and FMP):
Reduce the number of downloaded files
check every single resource and remove the resource that doesn’t add any value to the page. Example: a page contains third party comments plugins but visitors don’t use it. That’s why measuring the users’ behavior and interaction is essential to know which functionalities we need to eliminate and which ones we have to improve.
Text-based Files Minification
minification refers to the process of removing code comments, formatting, unused codes, shorter variable names and function names. All minification actions will not affect or change the way the resource will be executed in the web browser. Minification procedure is applied on HTML, CSS, and JavaScript files.
Enable Compression
Gzip is a famous software technique that support data compressing for HTML, CSS, and JavaScript which will enhance the load time.
Image Optimization
To avoid increasing the load time, Image size can be optimized using image compression tools and leveraging the photo editing software to resize and save the images for web usage.
Avoid Render-blocking JavaScript
Web browser starts to parse the HTML to build the DOM tree (Document Object Model) before rendering the page (painting it). When Parser encounters a JS script, it has to stop parsing and execute the script. Things takes time more if the script is in the external file, the parser will wait until downloading the file. Many recommendation to resolve this issue :
- use async attribute for external scripts
<script async src="file.js" /> - if external scripts are small, embed them
as an inline script in the HTML page to avoid extra network roundtrips. - For scripts that are not important for the initial page rendering, defer loading them until rendering the page completely.
HTTP Caching
Loading many external resources over and over again is definitely slowing the page load and delay the processing of them until they are loaded. Every browser has HTTP caching support that can be configured by setting the right HTTP header. E-Tag, cache-control, and max-age are the HTTP header options you need to understand to configure the caching for each resource. You better check the details using this link about HTTP Caching.
2- HTTPS is Technical SEO Ranking Signal
Google mentioned HTTPS as an SEO ranking signal since 2014 in the offical blog. Having SSL certificate for your website is neither costly nor difficult. Here are two free SSL providers:
It goes without saying that HTTPS is a must in some cases like e-commerce websites. In general, It is a need for any website and any business to secure your visitors privacy and prevent network sniffing while browsing your site.
3- Mobile First UI Design
Supporting Mobile browsers is essential for any websites. There are many ways to achieve that. RWD (Responsive Web Design) is the most common way to support different screen devices. CSS is the key to dynamically alter the page rendering according to the screen device. RWD is recommended for the many reason:
- It requires less development time to support many devices for the same content.
- It saves Google crawler’s time! because it only crawls the page once rather than multiples times for each version of the content. This will help to index your website relatively faster.
- You don’t need to redirect the
user to another version based on his/her device type which reduces the load time.
Bootstrap is an open source front-end framework that help building responsive mobile first designs.
4- AMP ( Accelerated Mobile Pages )
The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
AMP Website https://www.ampproject.org/
As the quotation clearly mentions, AMP will help improving the speed of loading the pages mainly on mobile devices. AMP design is responsive and suitable for all screens. Google is providing an AMP caching in the cloud with no cost.
When you use AMP in your website, you are not only optimizing the page speed. But also you are enhancing the overall user experience by using rich and growing library of web components. The web components support adding rich media objects like social content, videos, advertisements, and can collect analytics data.
If you are using WordPress CMS, you can utilize AMP plugin to generate AMP content.
5- XML Sitemap
Sitemap is a file that helps search engines to find the pages in your website that are available for crawling. The sitemap consists of URLs in your website along with some metadata about each one. You can generate the sitemap using different sitemap generators. If you are using WordPress I recommend using Yoast plugin for SEO. One of the features that Yoast plugin provide you is generating the sitemap.
6- HTML Tags
Frontend web developers can use a variation of tags exchangeably and that’s OK. The influence of HTML tags has been decreasing for ranking. But it still affects the user experience, enhancing the snippet in the search result page, and guide the search engine to the most important part of the page.
Here is the list of tags you need to consider using in the page structure:
- Title and Meta Description
- Open Graph: open graph tags are additional tags in <head> that enrich the page for social networks. Here is the title open graph for this article:
<meta name="og:title" property="og:title" content="What is Technical SEO? Best Practices Will Make Your Rank Higher"> - Robots Meta Tag: You can use this meta tag to inform the crawlers either index or not to index the page.
<meta name="robots" content="index, follow"> - Canonical URL Meta Tag: In most content management systems, you can reach the same content by many URLs. Search engines consider this as a duplicated content because it handles each URL as a different resource. You can resolve this issue by having a unique canonical URL for every single content.
<link href="URL" rel="canonical"> - Heading Tags: they are important to structure your content and make them readable for search engine and the user.
- Alt attribute in IMG Tag: alt will help in image optimization for search engine and in case the image is not loaded the “alt” text will be displayed for the user instead of the image.
- HTML5 Semantic Tags : <nav>, <header>, <seaction>, <article> and other tags enhance the search engine understanding of the content. I will dedicate another article soon to give more details.
Final Result
I was able to get this result after I applied most of what I mentioned in this article :
- I used
Autoptimize Plugin to minify and compress HTML, CSS, and JavaScript. - I configured Cloudflare for my blog and enabled caching content.
- I eliminated all the unneeded styles and scripts.
- I used WP Super Cache Plugin to cache the files in the server side.
- Lazy Loader to defer loading all images and iframe that are not visible to the user.
Optimizing the website is an ongoing process. Don’t push yourself to apply every thing as a one single step. My next step is enabling AMP, using CDN, optimizing the theme static files and images.
Finally, Technical SEO practices are essential but the main value that your audience is looking for is your content. You have to combine all the SEO practices (technical, marketing) and the quality of the content.