WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Custom CSS load time (6 posts)

  1. Olivierm67
    Member
    Posted 9 months ago #

    Hello,

    I am using Jetpack and Custom CSS.

    I have some trouble with my page load, and after check a speed test, I have seen that Custom CSS take 2.50 seconds to load.

    Do you know if there is a way to make it faster ?

    Thank for your response :)

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 9 months ago #

    This custom CSS file is generated from your database, and then cached before to be generated on your site.

    To speed things up, you could move all your Custom CSS code into an existing stylesheet, in your theme's style.css file for example. You will lose the flexibility of the custom CSS editor, but I'm afraid that's the only way to gain speed with the Custom CSS component.

    I hope this helps.

  3. Olivierm67
    Member
    Posted 9 months ago #

    Thanks for your response Jeremy.

    I will try to do this yes !
    See you :)

  4. amyritterbusch
    Member
    Posted 6 months ago #

    I am having the same problem with the Jetpack Custom CSS slowing down my page load times. See speed test results at Pingdom. The most recent test this morning shows 5 seconds for Custom CSS to load:
    Pingdom report

    I normally make all my CSS changes in a child theme style.css file. But I need to make some small changes to the mobile theme only. When I try to make these changes in the style.css file, they don't work. But it works fine using the Custom CSS. This is an example of one of the two changes I'm trying to make in the mobile theme css.

    .mobile-theme #site-title {
    	background-color: #435D7B;
    }

    I need the mobile title and description to have a dark background. If I could make these changes in style.css, I'd be happy to do that instead.

    ThankS!

  5. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    f I could make these changes in style.css, I'd be happy to do that instead.

    You won't be able to make these changes to your desktop theme. As soon as you switch to another theme (like Jetpack's Mobile Theme), anything you may have done in your previous theme is ignored.

    Instead, I would recommend that you create a small plugin that would load only in Jetpack's Mobile Theme, and include the CSS changes you want to see on Mobile. Here is tutorial:
    http://jetpack.me/2013/06/27/customize-mobile-theme/#throughactionsandfilters

  6. amyritterbusch
    Member
    Posted 6 months ago #

    Thank you so much for your quick reply. The instructions in the link you provided looked a little over my head. So instead, I figured out a workaround that will be fine for me, and will speed up my load time.

    1. In JetPack I deactivated the Custom CSS module (deactivate button hidden under the Learn More button).

    2. In Appearance > Customize I changed the header color to black (the color needed for the mobile theme). (I had previously had it set to white.)

    3. In my child theme style.css file I changed the header color to white (the color needed for my desktop theme).

    My website load time seems to be faster already with the Custom CSS deactivated, but I will keep checking the the site speed throughout the day to make sure it stays fast.

Reply

You must log in to post.

About this Plugin

About this Topic