Jump to content

Tool to Optimize / Suggest CSS?


ChenXiu
 Share

Recommended Posts

Certain "CSS-heavy" page that loads weird: when they load, I can see movement, jostling and repositioning taking place until a "homeostasis" occurs.

It feels as if there is some conflicting CSS that the browser "eventually figures out."

My CSS has no errors. However I'm sure some things can be done better.

Other than a.) Spending the next year and a half learning CSS from the ground up, or b.) hiring a CSS Master to review my pages, is there on online tool that can help? Or even something built into Firefox/Chrome Developer tools that can help?

The internet searches I have done on this topic only point to "CSS minifiers" and "CSS error detectors" ... but I have no errors, and minification has no effect on what I've described.

Thank you.

Link to comment
Share on other sites

I for one have found using Grids and Flex to reduce the CSS file size a lot as you really don't use that much CSS when using Grids/Flex, plus it's very easy change the layout of the website. It's well worth redoing the CSS using grids/flex and it's a tad bit better than doing it from the ground up, but not by much.

 

Here's a small example of my css (Actually it's SCSS, but it's just a processor version of CSS) - Though looking at this example it looks like just plain CSS in this portion.

/* Approximately the size of an iPad Pro 12.9in 1024px */
@supports (grid-area: auto) {
  @media screen and (min-width: 64em) {
    .site {
      display: grid;
      grid-template-columns: 1fr minmax(19.2em, 44.80em);
      grid-template-areas:
				"header header"
				"nav nav"
				"sidebar main"
				"footer footer";
      justify-content: center;
    }
    .masthead {
      background-image: url(../images/img-header-001-1024.jpg);
    }

    .registerStyle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
              "email email"
              "first last"
              "screenName telephone"
              "password1 password2"
              "birthday submitForm";
      justify-content: center;
    }

    .first {
      grid-area: first;
      margin: 0 0.625em;
    }

    .last {
      grid-area: last;
      margin: 0 0.625em;
    }

    .screenName {
      grid-area: screenName;
      margin: 0 0.625em;
    }

    .telephone {
      grid-area: telephone;
      margin: 0 0.625em;
    }

    .emailStyle {
      grid-area: email;
      margin: 0 0.625em;
    }

    .password1 {
      grid-area: password1;
      margin: 0.3125em 0.625em;
    }

    .password2 {
      grid-area: password2;
      margin: 0.3125em 0.625em;
    }

    .birthday {
      grid-area: birthday;
      text-transform: capitalize;
      margin: 0.3125em 0.625em;
    }

    .submitForm {
      grid-area: submitForm;

      button {
        float: right;
      }
    }

  }
}

Another thing that will bog down the CSS is having LARGE image files and having redundant CSS. 

 

I also would stylize for smartphones first and work yourself up from there when it comes to CSS responsive web design.

Edited by Strider64
Link to comment
Share on other sites

What you're describing sounds like a FOUC (Flash Of Unstyled Content) and is usually caused by any or all of a few things:

  • Slow-loading (typically remote) stylesheets
  • Stylesheet links at the bottom of the page instead of in the head
  • Javascript styling

Does your site use jQuery or Google Fonts, for instance? I've had this issue pretty consistently with Google Fonts or Adobe Font Kit.

Link to comment
Share on other sites

On 6/30/2021 at 3:12 PM, maxxd said:

Does your site use jQuery or Google Fonts

No, nothing is external. No internal javascript styling, the 20 css rules are all in the <head> and the javascript I use is in the bottom of the page (completely removing all scripting doesn't make things better). My CSS is error-free, my HTML is error free, and my page loads in about .05 (5/100ths) of a second.
I don't see any "flash of unstyled content," rather, I see a very quick "repositioning" of things. For example a <textarea> starts to appear in the middle of the page, and then quickly scoots over as the <ul><li> appears next to it.

Like wearing one brown sock and one black sock, nobody else would really notice (or really care).... but I do 😀

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.