How to Fix & Remove Inline CSS

hey everybody how’s it going in this
quick video we’re going to show you how to improve your site’s SEO score and
loading time by fixing a common issue using too much inline CSS after running
the Diagnostics of our site on SEO site checkup we can see here that it’s failed
a few common checks In this case our site has 36 instances of inline CSS
styles which slows down its loading page time quite dramatically. Now CSS if you’re not fully aware stands for cascading style sheets your CSS file
describes how HTML elements are displayed on your site CSS saves a lot
of redundant code as it controls the layout or the styling of multiple web
pages all at once. So if we click here we can see the details on each instance, and if we click how to fix we see some general guidelines on how to code this
properly so we can have all of our CSS used in one external stylesheet instead
of being all sprinkled throughout the code of our main page In this case we
should locate each issue remove it and then point the code towards our one
external CSS file So let’s jump right in and look at a few examples here let me click on the results list again and we have one issue here with this div so let’s use the general guidelines to fix the issue First we’ll check our sites
source code which we can do by right clicking inspect source in your browser and here we can find the offending code then in your text editor let’s remove
this style the margin right 35 pixels and quotes and in our CSS stylesheet
we’ll come to our button row for word height attribute and then here we’ll add
that margin right 35 pixels without quotes all right now of course this is
assuming that your CSS file already contains that particular style attribute
in this case this button row for word hide if it isn’t in your CSS yet but
it’s a style attribute that we use often enough in our HTML pages we can always
add it done with that one now let’s do the same
for another issue this suggestion box div In the code of our index page will
simply remove the display:none style attribute, and then again in our external CSS we’ll come to our suggestion box parameters and add display:none to it And so on you get the picture so by avoiding this inline CSS wherever
we can we can avoid redundant code we can make global changes to our website
once instead of combing through all of our pages and changing lines one by one
and then most importantly for the purposes of SEO and for the overall user
experience of our site our pages will be leaner and meaner and load much faster. Feel free to check out our other videos so you can keep fine-tuning and getting
the most out of your SEO and click subscribe to stay updated with new tips
and tricks to get you to the top of the search engine results pages

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *