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>
Improve this question
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, 2021 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.
    – Andre Guelmann
    Oct 3, 2021 at 13:21

1 Answer 1

Reset to default
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.

Improve this answer
2
  • Thank you, and does this affect the speed and duration of site loading?
    – user123368
    Oct 2, 2021 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.
    – Maximillian Laumeister ♦
    Oct 2, 2021 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.