What is CSS BLENDING RENDER?
What is CSS BLENDING RENDER?
Yesterday we discussed how to improve server response speed, with the aim of speeding up the loading time of our website pages. These are things that are important to note when we are going to create a website for SEO purposes.
Well, it turns out that besides a slow server ... Render CSS or CSS blocking that blocks the page rendering process can also be a problem for the speed of your website. So this is one of the things you need to learn when you learn how to create a website that is quickly loaded.
What is CSS Render Blocking?
Render CSS blocking delays a web page for a while
Why is Render Blocking CSS a problem?
This is a user experience problem. Lots of web pages left by users because it is too long to wait for the rendering process until the page can be seen.
In Google's crawling algorithm for the mobile version, Google hopes that the content of the upper half or displayed on the browser screen can be displayed in 1 second (according to Google's standard connection speed of course), and the rest can be loaded in 2 seconds.
So of course we need to learn how to create a website so that CSS doesn't take too much rendering time for the upper content.
How to Overcome CSS Block Render?
There are a number of things we need to pay attention to when creating a website so that the issue of Render Blocking CSS does not damage the speed of loading our website pages. Some things to note are:
This article will discuss in more detail each of the points above and how you can do it yourself.
So we just start ...
1. Call CSS correctly
CSS can be called in several ways on your web page. There are ways that have been very wrongly done in the era of today's gadget ...
Some things to consider when calling CSS files:
DO NOT USE @IMPORT
This method of calling CSS files is bad because this will be added to the time needed to load your CSS before the page can load
The solution is to find all @import and replace.
This is usually at the top of the webpage file and the shape as below:
Instead of calling CSS with the import method, it is better to keep it in one file. The way to copy the contents of CSS imported into the CSS page. If for some reason you can't do that, you can enter some CSS by using the following code:
Make sure you replace style.css with the location address of your CSS file.
GIVE THE CSS LABEL CORRECTLY
When CSS is not properly labeled, then by default the browser will load all CSS before rendering the web page.
The solution is to label the CSS file correctly so that the browser knows that not all CSS needs to be loaded to start the page rendering process.
The general appearance of the CSS that is called is as below:
This is the basic code that only tells the browser "hey this is a link for CSS"
Everything in the CSS link above will be loaded by the browser before rendering all of your web page content.
Now look at an example of CSS that is not loaded before rendering the page. We name this CSS the instruction to print.
This will tell the browser "Hey this is a CSS link, but only if someone prints it" ...
This CSS will still be loaded but not prioritized so it does not hinder page loading.
See another example where CSS is loaded only when the page is displayed at a certain size ...
The latest browser will recognize this code as a code that is only used in special conditions. So if the condition is not reached, the CSS is not loaded before rendering is done.
2. Use fewer CSS files
Always prioritize CSS that is required before the page can be displayed. If you have labeled CSS, then you have done a part of this process.
The CSS we will discuss is a FILE from CSS; and not CSS in the file.
Every CSS file that you can get rid of will speed up the loading time of your website page.
So there are 2 ways to use fewer CSS FILE, namely:
Yesterday we discussed how to improve server response speed, with the aim of speeding up the loading time of our website pages. These are things that are important to note when we are going to create a website for SEO purposes.
Well, it turns out that besides a slow server ... Render CSS or CSS blocking that blocks the page rendering process can also be a problem for the speed of your website. So this is one of the things you need to learn when you learn how to create a website that is quickly loaded.
What is CSS Render Blocking?
Render CSS blocking delays a web page for a while
- Each CSS file delays our web page from the page rendering process
- The bigger the CSS, the longer the page loads
- Likewise, the more CSS files, the longer the page loads.
Why is Render Blocking CSS a problem?
This is a user experience problem. Lots of web pages left by users because it is too long to wait for the rendering process until the page can be seen.
In Google's crawling algorithm for the mobile version, Google hopes that the content of the upper half or displayed on the browser screen can be displayed in 1 second (according to Google's standard connection speed of course), and the rest can be loaded in 2 seconds.
So of course we need to learn how to create a website so that CSS doesn't take too much rendering time for the upper content.
How to Overcome CSS Block Render?
There are a number of things we need to pay attention to when creating a website so that the issue of Render Blocking CSS does not damage the speed of loading our website pages. Some things to note are:
- Call CSS correctly
- Reduce the number of CSS files
This article will discuss in more detail each of the points above and how you can do it yourself.
So we just start ...
1. Call CSS correctly
CSS can be called in several ways on your web page. There are ways that have been very wrongly done in the era of today's gadget ...
Some things to consider when calling CSS files:
- Don't use @import
- Give the CSS label correctly
DO NOT USE @IMPORT
This method of calling CSS files is bad because this will be added to the time needed to load your CSS before the page can load
The solution is to find all @import and replace.
This is usually at the top of the webpage file and the shape as below:
@import url ("style.css")
Instead of calling CSS with the import method, it is better to keep it in one file. The way to copy the contents of CSS imported into the CSS page. If for some reason you can't do that, you can enter some CSS by using the following code:
<link rel = "stylesheet" href = "style.css">
Make sure you replace style.css with the location address of your CSS file.
GIVE THE CSS LABEL CORRECTLY
When CSS is not properly labeled, then by default the browser will load all CSS before rendering the web page.
The solution is to label the CSS file correctly so that the browser knows that not all CSS needs to be loaded to start the page rendering process.
The general appearance of the CSS that is called is as below:
<link href = "style.css" rel = "stylesheet">
This is the basic code that only tells the browser "hey this is a link for CSS"
Everything in the CSS link above will be loaded by the browser before rendering all of your web page content.
Now look at an example of CSS that is not loaded before rendering the page. We name this CSS the instruction to print.
<link href = "print.css" rel = "stylesheet" media = "print">
This will tell the browser "Hey this is a CSS link, but only if someone prints it" ...
This CSS will still be loaded but not prioritized so it does not hinder page loading.
See another example where CSS is loaded only when the page is displayed at a certain size ...
<link href = "other.css" rel = "stylesheet" media = "(min-width: 40em)">
The latest browser will recognize this code as a code that is only used in special conditions. So if the condition is not reached, the CSS is not loaded before rendering is done.
2. Use fewer CSS files
Always prioritize CSS that is required before the page can be displayed. If you have labeled CSS, then you have done a part of this process.
The CSS we will discuss is a FILE from CSS; and not CSS in the file.
Every CSS file that you can get rid of will speed up the loading time of your website page.
So there are 2 ways to use fewer CSS FILE, namely:
- Merge CSS files
- Using inline CSS
Merge CSS files
A web page usually has one main CSS file and several supporting CSS files. Examples of wordpress websites that usually have the main CSS file; but it can also come with lots of helper CSS files for widgets or plugins.
This can also appear on static web pages, because there are many website designers who think it's better to have separate CSS files; because it will be easier to work on the web page. Unfortunately this method causes performance problems on the website.
How to combine CSS?
It's easy, you can combine this CSS by copying CSS from one file and pasting it to another CSS file. After doing that you just delete the "caller" CSS that has been copied by the code earlier.
Inline CSS file
You can put CSS directly into a web page, so the webpage doesn't need to request to get the CSS.
How to do inline CSS? You can copy the contents of a CSS file and insert them into the html page. After you create this inline CSS, now you can delete the CSS "caller".
The way to put CSS inline on the page is to flank it with the <style> tag.
You can also try to simplify your CSS, but this is not an easy job, because you have to know what elements use a CSS and how they can still look good; when you simplify CSS.
But even if you can't simplify CSS, at least the above techniques can overcome CSS blocking rendering on your web pages ....
A web page usually has one main CSS file and several supporting CSS files. Examples of wordpress websites that usually have the main CSS file; but it can also come with lots of helper CSS files for widgets or plugins.
This can also appear on static web pages, because there are many website designers who think it's better to have separate CSS files; because it will be easier to work on the web page. Unfortunately this method causes performance problems on the website.
How to combine CSS?
It's easy, you can combine this CSS by copying CSS from one file and pasting it to another CSS file. After doing that you just delete the "caller" CSS that has been copied by the code earlier.
Inline CSS file
You can put CSS directly into a web page, so the webpage doesn't need to request to get the CSS.
How to do inline CSS? You can copy the contents of a CSS file and insert them into the html page. After you create this inline CSS, now you can delete the CSS "caller".
The way to put CSS inline on the page is to flank it with the <style> tag.
<style>
... Enter CSS here .....
</ style>
You can also try to simplify your CSS, but this is not an easy job, because you have to know what elements use a CSS and how they can still look good; when you simplify CSS.
But even if you can't simplify CSS, at least the above techniques can overcome CSS blocking rendering on your web pages ....
0 Response to "What is CSS BLENDING RENDER?"
Post a Comment