2

I am debating whether to use an existing framework such as Bootstrap which has a decent chance of being cached vs custom CSS which has zero chance of being cached.

Which is better from a UX point of view and an SEO point of view?

1

From the SEO point of view, the only thing that matters is the final loading speed of your site and related with this, the amount of files you load.

If you are right saying that Bootstrap might be cached, is also true that you can load it from CDN's like MaxCDN and thus getting you one different source of loading when asynchronous sources are important in the overall loading speed. I like this method.

If you want to have total control of your files, and even addressing @Martijn reply above, you can use the Less version of Bootstrap and compile it with Gruntjs. This is absolutely amazing as Grunt validates your code, minifies it and compress in an unique file, making you have less files to load, smaller and optimized files.

As I said in one of my comments, you should go with what you feel better while developing and after that, optimize it to be small and fast.

  • Does google take into account the likelihood of the file being cached? e.g. if you include jquery....shouldnt really affect the load speed as almost everyone has this cached. – DD. Dec 10 '14 at 12:38
  • it's hard that it does take that into consideration, because just because a file is called jquery.js, doesn't mean that inside it has the correct library. Including jquery affects the load speed. Take a site that loads it, even if asynchronously and take a look at the NET tab in Firebug, you'll see that it takes its time to load. – nunorbatista Dec 10 '14 at 12:45
  • thats not how caching works. the browser will only cache if it is using the same CDN and will examine the cache headers etc to determine whether to use the cached file. If it is cached it doesnt download it again and doesnt take any time to load. The question is whether google acknowledges this for popular files and whether page size is a factor. The Google page speed insight tool doesn't actually change your ranking for bigger page sizes... – DD. Dec 10 '14 at 13:35
  • 1
    Cache is always created by the browser when opening a page, what you can do is create your own on your website using APC, Varnish and so on., this will store your static files. The Browser creates its cache but it's mainly images, not that much statics. To check, for example, what Cache your Chrome stored, access chrome://cache/ and you'll see that there are a lot of images there and no statics. – nunorbatista Dec 10 '14 at 14:28
  • Good point, but I see lots of statics on my cache. 339 occurences just from the word "jquery". Even taking out dupes and jQuery UI images, those are still a lot of files: imgur.com/00wkFmd – NiloVelez May 9 '15 at 13:19
1

No effect on SEO AFAIK (assuming they're about comparable in size, caching and parsespeed). About the rest, you need pro's and cons and decide based on that:

Using BOOTSTRAP:
- PRO: There is a chance it's cached, granting a quicker load
- PRO: Can save development time with predefined classes and possibilities
- PRO: Can be accessed via exernal load, helping with the pageload
- CON: Takes time to learn
- CON: Has a lot of overhead, it's not specific for you, there will be code you never use

Using custom CSS:
- PRO: You can do whatever you like
- PRO: You made it, so you understand it better
- PRO: Can be made efficient, ie more lightweigth (but this takes some skill)
- CON: Takes more time to set up you own basic code
- CON: Takes 1 download before it's cached (this isnt a con IMO, only the first visit first load).

It's really a personal choice. I don't like bootstrap because it limits the things I think of ('everything' has to fit Bootstrap).


To reply to you comment below, I made my seo conclusion on the fact that they're about the same, the source doesnt affect your SEO-value (or very very minimal, never say never). You also asked wether Google checks if you cache.
I think they do, they tool PageSpeed tests for caching, but this would not matter either, because if you've done this properly for your custom.css, it's cached in both situations (thus, rendering the difference nill (apart from 1st load)).

  • 1
    Perhaps you never gave bootstrap a decent chance then. You can overwrite all of the Bootstrap's core classes with no problem and I didn't find hard at all to learn. To avoid loading too much code you'll not use, the css's can be modules: modal.css, buttons.css, etc. Every developer should use the tools they feel better with, however Frameworks and specifically the CSS ones are gold. – nunorbatista Dec 10 '14 at 10:25
  • 1
    +1, Gave it a chance, not a big one. I had to implement it into a responsive site, which isn't the easiest to start with, might have something to do with it. I'll remove the rigid, it's less than I thought :) – Martijn Dec 10 '14 at 10:34
  • It takes some time to get used to it, but after that, is your best friend. I give some tips on how to work with Less and Grunt in my reply below, might help you in the future as it's an amazing way of developing optimized css (and js) code. I think there's only one CON on using Bootstrap: as a lot of people use it without customizing it, there are a lot of sites that look the same. – nunorbatista Dec 10 '14 at 10:36
  • Not sure why you think it doesnt affect SEO. Page speed is definitely a factor for SEO... – DD. Dec 10 '14 at 12:38
  • whatever you use as CSS doesnt matter for SEO. If your custom takes the same amount of time, there will be no difference SEO wise. Rephrazed my answer a bit :) – Martijn Dec 10 '14 at 13:07

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.