3

Given that we have to use many classes in a webpage in order to use TailwindCSS, does this have an effect on SEO?

Will GTmetrix display errors for this number of classes?

This for example is a small part of the source code for my webpage:

<div class="relative mb-6">
    <input type="text" name="mobile" id="inputMobile"
   class="peer placeholder-transparent w-full h-12 text-sm text-gray-900
   px-4 border border-gray-300 rounded-md transition-all shadow-sm focus:outline-none focus:border-blue-500
   focus:ring-1 focus:ring-blue-500"
   placeholder="Mobile" required>
    <label for="inputMobile" class="bg-white absolute -top-2.5 right-4 text-xs text-gray-400 px-2
    transition-all
    peer-placeholder-shown:bg-transparent peer-placeholder-shown:px-0
    peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-500
    peer-focus:bg-white
    peer-focus:-top-2.5 peer-focus:right-4 peer-focus:text-xs peer-focus:text-blue-500 peer-focus:px-2">Mobile</label>
</div>

<div class="relative mb-6">
    <input type="password" name="password" id="inputPassword" class="peer placeholder-transparent w-full h-12 text-sm text-gray-900
   px-4 border border-gray-300 rounded-md transition-all shadow-sm focus:outline-none focus:border-blue-500
   focus:ring-1 focus:ring-blue-500" placeholder="password"
   autocomplete="off"
   required>
    <label for="inputPassword" class="bg-white absolute -top-2.5 right-4 text-xs text-gray-400 px-2
    transition-all
    peer-placeholder-shown:bg-transparent peer-placeholder-shown:px-0
    peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-500
    peer-focus:bg-white
    peer-focus:-top-2.5 peer-focus:right-4 peer-focus:text-xs peer-focus:text-blue-500 peer-focus:px-2">Password</label>
    <span>Show</span>
</div>
2
  • 1
    I do not know if we can specifically answer whether GTmetrix will return errors for this, but it would be recommendable to also run Google PageSpeed Insights, which will give you feedback on reducing unused CSS, in addition to performance scores.
    – dan
    Oct 3 at 6:54
  • 1
    Affect? Yes. Affect significantly? Unlikely, performance is a very minor ranking factor and there are probably dozens of different areas where you can/should focus if you want to improve the SEO. Oct 3 at 13:21
4

I've never heard of the number of classes impacting SEO. However, having lots of CSS files to download, or large CSS files can impact the Largest Contentful Paint (LCP). Additionally, poorly designed CSS can impact Cummulative Layout Shift (CLS), especially when classes don't use @media queries for image dimensions and instead use <width> and <height> attributes.

2
  • Thank you, and does this affect the speed and duration of site loading? Oct 2 at 22:57
  • 2
    @user7549259 Only inasmuch as it increases page size and thus affects page download time (so, not in a significant way). Maybe there would be some CPU performance issue if you were using hundreds or thousands of CSS classes, but CSS interpreters are optimized so you should be fine with the dozen or two you are using. Oct 2 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.