BAD CSS QUALITY

Hi there,
I made 2 tests, on a simple product page, where I only entered text + images. Both are saying that the quality of CSS coding is bad.
https://yellowlab.tools/result/fs18ecnhez
https://validator.w3.org/nu/?doc=https%3A%2F%2Fpolinacouture.com%2Fproduit%2Fbandeau-a-cheveux-lin-jaune-moutarde%2F
Though a couple of those errors are due to WPML, but I can send you without WMPL, it does not change.
I changed 4 times of host, during last 3 months, to find a really fast one (Kinsta, WPX, …) and it improved but now, I have 2 problems which are linked with code quality (and deprecated JS):
– get DOM ready is much too slow, even for supposedly simple pages
– since Google moved to core web vitals, I receive daily warnings.

Is it something that you can (ie have the skills) and want to seriously change?

I wondered if woodmart would be better but quality is at the same level

Waiting for your feedback
Kind regards

Hello,

Validator w3 org is outdated for modern CSS and its result doesn’t mean anything for the website performance nowadays.
The number of dom elements depends on the number of content elements on the page, products, posts, images etc.
We suggest you to use the GTmetrix tool to test the speed and optimize your website with their recommendations.

Kind Regards

Hi
The issue is that all tell the same … Dareboost, yellowlab, pagespeed test, etc.
1. on any product page, I have only optimised photos + your theme + text … no relation to post.
2. it relates to CSS (bad quality + deprecated coding, even for w3 org and deprecated JS)
3. All themes do not get those results
OK, my understanding is that you don’t care. Just wanted to warn you.
Bye

Hello,

As we said, some validators are already deprecated and can’t be used to check the CSS quality. And Google pagespeed doesn’t check the CSS quality at all.
If you have performance problems with your website, use the GTmetrix tool to test the speed and optimize your website with their recommendations.
If you notice some concrete problems in our theme’s code, you can send us some screenshots or examples and we will fix them in our next theme update.

Kind Regards

For super simple product page with 1 optimized photo only:
https://polinacouture.com/produit/bandeau-a-cheveux-lin-jaune-moutarde/

For google:
– render blocking css
– unused css
– too many fonts (I don’t use any in addition of those from theme). I even don’t know I could.
– unused Js (tweenmax from theme)
– too long css to process
etc.

Yellowlab:
Far too manyCSS rules, 7329 rules in basel style .css
Too Complex selectors: More than 2000 in basel / style.css
1800 old prefixes (-moz-, -webkit, …)
355 redundant tag selectors in basel style + 40 in basel dynamic + …
300 important in basel style
Etc

Just talking about theme

Kind regards

We have checked your page and see the following problems that are actually not related to the theme:

1. JS and CSS files are not minified and combined. We use WP Rocket plugin to do this.

2. CDN service is not used. We use KeyCDN on our demo.

But in general, the page is loaded in 0.7-1.2s that is quite fast.

As for mentioned problems with the theme:

– render blocking css – not only theme problem.

– unused css – some CSS is used on that page and other on different pages. This notice will be shown on almost all WordPress themes

– too many fonts – our theme loads only two tiny font files for icons. A few fonts are loaded from Google for texts and a few fonts for Font Awesome icons loaded by WPBakery page builder.

– unused Js – we can give you a code to remove this library from your website completely if you don’t need it.

As for the CSS, all these factors doesn’t mean that it has bad quality. Yes, it has 7k rules but it is not a large number for such a theme. And vendor prefixes are required to make it cross-browser compatible.
If you think that our theme doesn’t have a good quality we can return your money back and you can request a refund here https://themeforest.net/refund_requests/new

Kind Regards

Hi,

Time has changed and is changing.
For your info, I have WP rocket. With all host changes I made during last 4 months (Siteground, Kinsta, etc. to find the fastest), I even made tests vs autoptimize, vs W3TC, and vs Cleanup Asset. There is no significant gain with minification. Even the cache benefit is not the point for woocommerce (it’s different for static pages). Best optimisation for WC are on the server caches, I now have Apache + Nginx + Varnish + memcached … Plus new relic. CDN is now desactivated, correct, but that only helps for abroad. Webp is also yet desactivated with CDN.

It’s a non-sense to evaluate pagespeed with GTmetrix. And their remarks are limited and previsible. And; with 2 years of test on same website with your only theme, I can say that their grade has no relationship with real speed. Whether you have a 56k modem or cable, speed is different. The only point is real life, with 55 / 60% mobile, mainly in 3G / 4G … the only waqy to know real life is via google tags, reporting effective measurements in analytics. And for a few weeks, Google has now a core web vitals indicator, where I am really bad, even on my most basic pages like product with only 1 optimised photo. This relates to page quality, and my bad thing is time to get DOM ready. You could say it’s on server side, but if you know one who remains affordable, and who is significantly better than Siteground or Kinsta or Cloudways for Woocommerce (again, if static, it’s different), let me know. When I started with your theme, I was at 6 / 9 seconds on average for page load. Now, I am at 3s, on average for all devices, all pages & all countries. I start to know a bit what I talk about.

I would be happy to optimize, really. Your theme is rich, that’s the good point, but not optimised for speed and mobile, because too … say complicated and heavy vs comparable ones -based as well on audits of demo, not on speed but on quality parameters. You can disagree with Google, but upset a gorilla in front of you is not the best thing to do. But if you are really willing to improve and anticipate future, what is even more important now in the current economical context with covid, let me know. But you have to move, not throw the ball in another field. Or be pragmatic and test your theme vs others like Savoy, Neve or Shoptimizer. With page content like some do.
Last, if you explain me (and even us), how to get a simpler DOM on super product page with 1 optimised photo only, without any tag, without any feed, without any other product (featured, suggested, ….) please SHOUT IT, I would be very happy

Take care
Cheers

More facts which should help to be less judgemental and more pragmatic. Knowing that there is also an impact of plugins, in addition to Theme. But theme is not guiltless.

* Xtemos70a – the reports I have from Google, specifying on top a simple product. Issue is here LCP (largest contentful paint). Based on real measurements by Chrome. There is also 1 on CLS. For PC and mobiles.
The line on top refers to a super simple product. Optimised photos + text, no feed, no suggestion, only Contact form which clearly impacts speed as well.

* Xtemos70b – Dom ready is 1.5s. That’s really high. it varies and can be lower (on this same page, with fully cleaned browser), be cc 1 or a bit less. It also depends on browser, but anyway, just for DOMready, on a so simple page, it’s too high.

* Xtemos70b – let’s review with Firefox developer tool. Here the console, let’s go to issues
– the one I already mentioned about the search field
– bootstrap … you use v3.3.1. now it is v4.5.2, there is v3.4.1. And V5 starting. It’s not ideal for current browsers.
– theme css: mentioned issues about selectors, -webkit, color def, etc. Each is peanut, but the whole starts to count
– etc.

All studies say that speed is key for success, and that all distractions (slides, overlays, hoover, …) have a negative impact … except if you are a highly desired brand, like Gucci, Vuitton …. Others may believe the opposite, but …

As of now, theme, if you prefer, is not helping to be fast. Not simple enough, too many old things in css or js versions. That are quick and dirty things to do, like identify the critical js … which are those to be defered or async?

Waiting for your suggestions
Take care

Attachments:

You must be logged in to view attached files.

Hello,

You are talking about the overall website performance and speed and its importance. You are absolutely right and we don’t disagree with all the points related to general website optimizations. But we are only theme developers and can’t be responsible for the whole performance of your website. We are still opened to help you with all the issues directly related to our theme. So let’s discuss them if any. As for the issues:

– Dom ready is 1.5s – we have tested your optimized product page and its loading time is 600-800ms (we tested 10-15 times). And it is when the cache is disabled. Here is a screenshot – https://prnt.sc/uy85qk
With cache – 300ms. Screenshot – https://prnt.sc/uy85yc

– the one I already mentioned about the search field – sorry, what search field issue do you mean?

– bootstrap – we use bootstrap for our grid only and it doesn’t have any issues and works very fast. There is no issue with that.

– theme css – could you please point us some concrete parts in the code that you think can affect your website speed? We already explained all the reported issues.

And still, you should minify and combine all CSS and JS files using WP Rocket or its alternatives. CDN service will really improve the loading time as well.

And yes, we compared our theme with almost all mentioned themes with a similar number of content. They load almost at the same speed. The difference may be in +-15% but not more. Of course, there are some extremely light themes without any extra features so they may have less CSS and JS. You can choose them for your project if you prefer.

Kind Regards

Hi there
I work on my website for 2 years. Whoever you question (host, plugin, theme, etc), it’s always because of others.
For info, CDN is usefull when many abroad. Combine JS and CSS would be far worse, since I am on http/2, and preparing http/3. You can see on waterfalls that js are loaded simultaneously, not 1 after the other.

1. The quantity of css and js, as of now, is a heavy handicap for any Woocommerce store.
An example with image71a: a product in woocommerce: you see that fonts weight 33% of the bytes, cc the same for JS, and ccs is cc 25%. So, my text and image, less than 10%.
If we except wordpress / woocommerce, those css / js / fonts come from theme and Wp bakery, also managed by Theme … at cc 90% in my case.
The weight of fonts is crazily excessive. It should be reduced by theme. On other themes, there can be the option not to load all what wpbakery may propose

2. The CSS has errors, the quality of code is low, what increases the timing for browser to parse … even more critical on mobile phones, which do not have recent CPU or have limited RAM.
The number of errors reported by the developer tool in firefox is really high (image71b.
Other sources that negatively evaluate the CSS: dareboost, yellowlab.
I wrote you to precise those in details (in other threads)

3. Theme is using several deprecated js, old too big libraries. Further, the use of all those old stuff generates security threats.
Examples:

– TweenMax.js
Author say: deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost half the size!

– OwlCarousel2
DEPRECATED jQuery Responsive Carousel. (source Github)

– magnific-popup.js
Not updated since 2015

– jQuery Waypoints – v2.0.2
Not updated since 2016

– jQuery-Parallax
Last release is dated 24/11/2014

Etc.

OK, you will naswer me that it works and it’s fast … there are Trabant or Austin mini that work. But for speed and security, current Mini is far better

So?

Kind regards

Attachments:

You must be logged in to view attached files.

Hello,

1. But the fonts are not loaded by the theme. They are loaded from Google Fonts. If you want, you can disable them completely in Theme Settings -> Typography.

2. What errors exactly do you mean? Please, point some concrete errors in the CSS file (exact line or screenshot) and we will fix them asap.

3. All these libraries are tested and working good. They don’t have any performance issues. If you want to disable some of them, we can give you a code to disable them completely.

If you refuse to optimize your website with CDN and files minification then it is not a theme problem.
Anyway, if you are not satisfied with the quality of our theme we can return your money back if you request a refund here https://themeforest.net/refund_requests/new
We are still opened to help you and fix all issues directly related to our theme. But you don’t report any of them that really impact your website performance.

Kind Regards

1a. when a font is chosen (eg say style / weight / alphabet), Theme downloads the whole library, ie all alphabets in all weights. Non sense

1b. how to stop the loading of font-awsome

2a. See my former posts on this forum

2b. You go on my website or your demo, use firefox / developer tool / console, and you see the css errors

3. I use minification and CDN (stackpath) but impact is marginal. Latency measures are far lower than DOM processing. I shall look at the figures that I sent you.

4. Libraries have no performance issue? Even the author says himself that it is deprecated and that there is better and faster? Why do you write such things?

1. Because we need different styles and weights across the site according to our design. If you don’t like it, you can disable Google Fonts completely or write a simple code to use some particular style only. Font awesome library is loaded by WPBakery page builder, not the theme.

2. Yes, we already wrote to you about those issues.

3. Anyway, this is not something related to our theme.

4. Yes, OWL Carousel is no longer in active development. But we still support it and it doesn’t have any issues at all. Moreover, it is one of the most optimized and fast libraries for the carousel even today. If it will have any problems, we will fix them or replace them with some alternative. But there are no real bugs at the moment.

hi There,
Few days ago, I bought another theme to compare with.
This is not about polemic, but performance.

1a. Fonts
You nicely propose to choose font at a rather fine detail level.
=> why are you having / imposing to load Simple-Line-Icons.woff + basel-font.woff? vs using the chosen ones?

1b. for info, re. font awesome, if, for your theme, it’s only about the icons for account / basket … other theme proposes to directly use specific icons and not to download the full library … and yes, we talk about wp bakery ! Meaning man may consider that this is your choice

2. Let’s see what you will deliver. But please, be fair, otherwise, this will become public information: you asked me: What errors exactly do you mean? Whereas I had communicated to you all errors inventored by dareboost + yellow lab + all those visible via firefox development tool as of today the 24th of October 2020 or jigsaw.w3.org.

3. you insisted about CDN vs speed … whereas it’s just about latency (matter of ms), except for far away people (America, Asia, …), whereas DOM ready for theme or your demo, tested from France to France, it’s about second.

4. Same comment: be fair! You use several deprecated / old updated js. Why focus on sole owncarousel? Start with first one, where author says that there is a faster better. And again, the issue about old js may be about performance, but above all, it’s about SAFETY !

Waiting for your feedback

Kind regards

Hi,

1. These fonts are for different purposes. Basel font is a limited number of icons for social buttons and some utility buttons like arrows. We can combine them into one but the loading time will not be changed.

1a. We don’t have our built-in font awesome. We use WPBakery Font Awesome icons only when you add some elements to your pages like share buttons. Then we force WPBakery to load the font-awesome library.

2. We asked about at least one example from the code. Because all those general issues don’t say anything about real code problems. Please, point some real problems in the code. For example, style.css like 267 has a wrong selector or wrong vendor prefix that should be removed.
We don’t say that our theme complaint with rules from such services like Yellow lab and W3 org.

3. Yes, we know that but if you are using some performance metrics like Gtmetrix or Google Page speed then they may low your score down because you don’t use CDN or other optimizations techniques.

4. Yes, and we take full responsibility for this library performance and security. Once any bugs or issues will appear we will release an update asap. If the library will be broken and doesn’t work stable, we will replace it with some other one.

Kind Regards

Hi,

Thank you very much for this feedback, it’s fair, professional, and I really appreciate.

I tested another theme, among the best sellers. There were plus and minus. This helped me to learn a lot. I study more in depth, and revert to you

Take care

Hello,

Thank you very much for spending your time investigating our theme’s performance. We are happy with this conversation so if you will have any other notes we would be glad to hear them.

Kind Regards

OK,
Roughly, all the js versions used in Basel date from when you did the theme, ie cc 2016.
Among them, the moment.js is reported to have vulnerabilities (snyk). Added to all complaints about it, incl. from Google
What authors write now:
we would like to discourage Moment from being used in new projects going forward. Instead, we would like to recommend alternatives that are excellent choices for use in modern applications today.

This, in addition to the former issues / threats mentioned above
Really, this is about security and performance.
Take care
Kind regards

Hello,

Thank you for letting us know. We will release an update without this library very soon.

Kind Regards

[Author]

Posts