Search Engine Optimization
Or SEO, is collection of standards for web page creators to consider when putting their website online in order to be discovered by search engines and show in top results list for the correct group of seekers online.
These standards or rules vary from contents to structure of the code and some other points to take care of by developers and designers of the website. Some points require more technical experience from the admin of the website like using div elements in the HTML instead of other old deprecated containers. Some other rules are simple like ensuring that every page has title , at least one big title , that is formatted as title in the HTML, that describes the aim and objective of the contents in that page. Description is one of the hidden criteria of every page on the web and also very vital to search engines which clarify the page contents and sums the page in few words.
Tools here come to help.
For these long list of SEO standards, tools are created every day to ease the task and help beginners and experts as well to finish the SEO step short and clean. Here I will put some recent popular online tools free to make SEO check and to-do list for your online website.
- SEOptimer
- Seomator
- Ubersuggest
- MozBar
- Ahrefs Webmaster Tools
- SEMrush
What is CLS (Cumulative Layout Shift)
One of the most frustrating aspects of an unstable website is that the page’s content shifts as the user views it. Cumulative Layout Shift (CLS) is a measure of how stable is the website. It’s an equation that calculates a factor that is more like ratio or a percentage. Below 0.1 means that the website is acting as normal as expected by the users. This means that contents are staying where they are and not moving around as other contents loading.
Google started counting this factor since only last year and added this ratio to the total SEO score of a website. Yes this factor affects SEO as much as many other points and measures. Why Google started on June 2021, adding this factor to the overall ranking of the indexed URL is that to make sure its users are comfort using that website and not having unexpected mistakes such as getting wrong product or downloading files by mistake.
How this happens and how to solve that in order to increase the rank of the URL (which means lower CLT ratio or factor)? the steps are simple and logic. First make sure you add width and height to all images and videos on the page. Also make sure that external resources are loaded after the main contents so that nothing moves up or down. Also, as you use online hosted font, make these font pre-load before displaying the web page, to avoid using system fonts instead which may lead to size differences and shifts to the page.
This was summery of I have found today about this topic and sure you can find more as everyone will add to this.
Total Blocking Time (TBT), How it Affects SEO ranking
Amazing it is how much we have of ready made code libraries and functionality to add to our newly created websites . It is a fast jump start for any owner to begin working and of course focusing on important stuff.
But how about the code inside these packs of features?! is it well coded and functioning? may be , and may be not. That is why SEO ranking have this factor calculated and ranked for. TBT means how much MS we (the site visitor) have to wait till the page contents begin to appear on the browser page. Many scripts and frameworks link to external resources too and load them in order to have contents ready to display.
CSS and JS are main players in this factor and take much of the responsibility. The owner and his trusted developer have to control that and minimize as possible the amount of code used in the page , if necessary, and make things faster.
These are some tools that help locate the source of large TBT. They can direct you to easy steps to do and maybe you will have to use some help from a developer in that matter.
- https://sitechecker.pro/
- https://seositecheckup.com/
- https://www.seotesteronline.com/
- https://neilpatel.com/seo-analyzer/
A good Total Blocking Time should be less than 300 MS in an average device and network connection. Lighthouse measures the Total Blocking Time by summing up the Long Tasks’ total blocking effects and comparing it with the top 10.000 web sites’ TBT Score. See details:
The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. See details
What is CLS (Cumulative Layout Shift)
One of the most frustrating aspects of an unstable website is that the page’s content shifts as the user views it. Cumulative Layout Shift (CLS) is a measure of how stable is the website. It’s an equation that calculates a factor that is more like ratio or a percentage. Below 0.1 means that the website is acting as normal as expected by the users. This means that contents are staying where they are and not moving around as other contents loading.
Google started counting this factor since only last year and added this ratio to the total SEO score of a website. Yes this factor affects SEO as much as many other points and measures. Why Google started on June 2021, adding this factor to the overall ranking of the indexed URL is that to make sure its users are comfort using that website and not having unexpected mistakes such as getting wrong product or downloading files by mistake.
How this happens and how to solve that in order to increase the rank of the URL (which means lower CLT ratio or factor)? the steps are simple and logic. First make sure you add width and height to all images and videos on the page. ALso make sure that external resources are loaded after the main contents so that nothing moves up or down. Also as you use online hosted font , make these font pre-load before displaying the web page, to avoid using system fonts instead which may lead to size differences and shifts to the page.
This was summery of I have found today about this topic and sure you can find more as everyone will add to this .
Total Blocking Time (TBT) , How it Affects SEO ranking
Amazing it is how much we have of ready made code libraries and functionality to add to our newly created websites . It is a fast jump start for any owner to begin working and of course focusing on important stuff.
But how about the code inside these packs of features?! is it well coded and functioning? may be , and may be not. That is why SEO ranking have this factor calculated and ranked for. TBT means how much MS we (the site visitor) have to wait till the page contents begin to appear on the browser page. Many scripts and frameworks link to external resources too and load them in order to have contents ready to display.
CSS and JS are main players in this factor and take much of the responsibility. The owner and his trusted developer have to control that and minimize as possible the amount of code used in the page , if necessary, and make things faster.
These are some tools that help locate the source of large TBT. They can direct you to easy steps to do and maybe you will have to use some help from a developer in that matter.
- https://sitechecker.pro/
- https://seositecheckup.com/
- https://www.seotesteronline.com/
- https://neilpatel.com/seo-analyzer/
A good Total Blocking Time should be less than 300 MS in an average device and network connection. Lighthouse measures the Total Blocking Time by summing up the Long Tasks’ total blocking effects and comparing it with the top 10.000 web sites’ TBT Score. See details
The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. See details
Render Blocking Contents and SEO Score Optimization
What is Render Blocking Contents ?
If you have inserted JavaScript and CSS code in your page , render blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files. This will lead to more time and bad UX impression and thus less SEO score.
These files may come from using some code libraries that load some scripts (specially remote loaded ones) in order to display contents on the page. And when browsers find these files , it stop loading other contents until these files are fully loaded to prevent errors in content load and displaying. This problem can be easily removed if you know exactly the code in your page.
How to remove this problem?
Some page builders will put these JS and CSS files and render the page no matter the time, but you can eliminate some non-critical files and postpone loading after page is displayed as you will see in the next lines.
First , locate where are the lines and what are file names of the Render Blocking Content. Use one of the tools mentioned in SEO section above or this one to get summery of the problem. Some of the files may be critical and can’t be eliminated and some may be not, only if you know these kind of info you will be able to decide, careful.
Even though the @import rule keeps your HTML file cleaner and allows you to keep all your CSS dependencies in the same place, it’s not the best choice performance-wise. The @import rule lets you import CSS from other style-sheets, but this causes the browser to process your CSS file more slowly because it also has to download the imported files. Until this takes place, the rendering process will be blocked. One of the good practices in this case is to collect and import all your needed styles for this specific page in one CSS file -like “style-all-in-one.css”- and use the <link > tag to include in the page. See example :
<head> <link href="style-all-in-one.css" rel="stylesheet"> </head>
All other tricks and tips (such as minified or compact CSS and JS) of removing the Render Blocking Contents are here to explore more and take more care of the issue in order to enhance the SEO score of your beloved page and UX of the audience.
Are images and fonts render blocking sources?
Remember, images aren’t render blocking so if you have images on the blue DOM line you can safely ignore those; although you will still want to optimize your images.
Fortunately for page speed, the font files themselves (WOFF2, WOFF, etc.) aren’t render blocking. They load in the background and once fully loaded apply to the page as directed by any CSS styling. This means that eliminating the render blocking effect of Google Fonts is a matter of loading the font CSS asynchronously.
What is First Contentful Paint (FCP time)?
FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn’t included.
First Contentful Paint (FCP) is one of six metrics tracked in the Performance section of the Lighthouse and GTMetrics reports, you may need to login to access these points of the report. Each metric captures some aspect of page load speed.
What Is Good FCP Time?
To provide a good user experience, sites should strive to have a First Contentful Paint of 1.8 seconds or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
LCP and SEO
Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.
How to improve?
Most of the time you will be enhancing and compressing the images of your page. Using cache to keep contents in memory instead of loading the same contents every time is good practice but for some limits. using some codes to load third party contents like rel="preconnect" attribute of the <link> tag and also
<link rel="preload" src="banner_image.jpg" />if you want to load image in the background and header .
Also compressing text files transferred reduces the load time. Render Blocking items can also be good improvement. check our note about this under Render Blocking Contents. Also, JS and CSS files that contains so much white space can be minified using some tools and that enhances the time by some good fraction too.
Minifying CSS and JavaScripts for SEO Score
Minify is to minimize and reduce. And here, all I talk about is to compact and remove extra white spaces and empty lines from the code of CSS and JS . Despite all of what we have learned about good coding practices and clean code, comments and so, excessive cleaning may lead to slow and stop performance issues. Imagine a project where 10 good developers are working on CSS and JS , each will add 1k to 2.5k of code lines white or empty line just to make the code readable to others, this will result in huge amount of space and work load on the server to process thus having the SEO report looks bad.
What does Minifying CSS and JavaScript do?
Also, Minifying a CSS file implies the removal of unnecessary characters in the source code to reduce the file size and facilitate faster loading of the site. When a user requests a web page, the minified version is sent instead of the full version, resulting in faster response times and lower bandwidth costs.
And in JS, Minifying strips out all comments, superfluous white space and shortens variable names. It thus reduces download time for your JavaScript files as they are (usually) a lot smaller in file size. So, yes it does improve performance.
What if HTML is minified too?
Minifying your HTML can improve your Page Speed Score, decrease your page’s render and load times, and reduce your overall page size.
Nozy Cat 