I started out in the SEO world back in 2007, wow, that was 12 years ago!?
Back then things were a lot easier, a lot more simple. Websites in particular were coded in HTML and CSS, and really that was all an SEO would need to learn.
Why Do I Need To Be Concerned SEO Wise?
> Crawlability: Google bot’s ability to crawl your site.
> Obtainability: Google bot’s ability to access information and parse your content.
> Perceived site latency: Rendering Path (see below).
Server Side Rendering (SSR)
Client Side Rendering (CSR)
There are 9 core frameworks, which include the likes of Vue, Polymer and Meteor, with perhaps Angular being the largely most popular framework for single page applications.
How To Improve Site Latency: Page Speed Insights
One thing to take into account, and it will pay to work closely with the web development team here, is to understand that scripts must be arranged in order of precedence. I spoke to our senior web developer Andy Clarke who delved deeper into this section below.
Removing Render Blocking Scripts and Styles
When either a script or a stylesheet is loading, by default, it is render blocking. This means that it will block the any content being rendered to the screen while that script or stylesheet loads.
In order to provide a better user experience and improve perceived loading time of the webpage, all of the content above the fold should be loaded (and rendered!) as fast as possible. As already mentioned, this is extremely important for the SEO value of a page. As we know, rankings are weighted on loading speeds but there is also weight in providing Search Engines with the same experience as website visitors. By rendering the above the fold content faster it will really help boost you in the SERPs.
One of ways to mitigate render blocking behaviour is to either load scripts ‘async’ or ‘defer’ them.
It is also important to note that the order in which these scripts are loaded is important. For instance, scripts to display above the fold content should not be deferred. Also scripts which reply on another script should be loaded after the dependency has loaded.
This property will execute the script asynchronously (at the same time) as the page renders.
To use it, simply add the
async property to the tag:
<script src="async-demo.js" async></script>
This essentially equates to
async="true". If you were to use async in XHTML it would need to appear as
This property will defer the execution of a script until all of the content on the page has loaded and rendered. In other words, it will wait until everything is done and on the page and then run the script. It is also good practice to put these scripts after all other scripts.
The syntax is very similar to async.
<script src="defer-demo.js" defer></script>
This essentially equates to
defer="true". If you were to use defer in XHTML it would need to appear as
- By default, CSS is treated as a render blocking resource.
- Media types and media queries allow us to mark some CSS resources as non-render blocking.
- The browser downloads all CSS resources, regardless of blocking or non-blocking behavior.
Frontend Developer at US Digital.