Home Forums Basel – Premium Template BAD CSS QUALITY

Tagged: 

This topic contains 12 replies, has 2 voices, and was last updated by Artem Temos Artem Temos 1 day, 2 hours ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #232508

    pierredemeudon
    Customer

    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

    #232598

    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

    #232616

    pierredemeudon
    Customer

    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

    #232617

    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

    #232623

    pierredemeudon
    Customer

    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

    #232629

    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

    #232726

    pierredemeudon
    Customer

    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

    #232790

    pierredemeudon
    Customer

    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.
    #232825

    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

    #233892

    pierredemeudon
    Customer

    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.
    #233933

    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

    #234093

    pierredemeudon
    Customer

    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?

    #234189

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.