Scripts/CSS not working on initial page load?

  • hooplah64

    (@hooplah64)


    9 years, 8 months ago

    Hey there!

    Since installing Autoptimize, I’ve run into an odd problem where elements of my site aren’t loading correctly the first time someone views the page (with image and text sizes, floats, and positions being off from what they should be). However, when you reload the same page a second time, all fo the elements look and work correctly.

    I’ve got two plugins that have this problem (Soliloquy & WP Ultimate Recipe). I’ve tried working with the developer of WP Ultimate Recipe but we couldn’t seem to track down the issue. The only thing he could tell me is that he felt it was the javascript caching that was the cause (and not the CSS).

    Is there an easy way to troubleshoot the cause of this?

    Examples of what’s happening:

    URL: http://homemadehooplah.com/
    PLUGIN: Soliloquy http://soliloquywp.com/
    PROBLEM: Images in slider appear so small they look like tiny moving dots. After the page is reloaded, images load at their proper size.

    URL: http://homemadehooplah.com/recipes/how-to-make-pumpkin-pie-spice/ (or any other recipe post)
    PLUGIN: WP Ultimate Recipe https://ww.wp.xz.cn/plugins/wp-ultimate-recipe/
    PROBLEM: At the top of the recipe card (located down near the bottom of the page) the Recipe Title, Recipe Description, Recipe Image, Recipe Times, and Recipe Rating all appear on separate rows. Once the page is reloaded, they are properly placed in a combination of columns and rows.

    Settings within Autoptimize:
    * Optimize HTML code is ON
    * Optimize JavaScript Code is ON
    * Exclude scripts from Autoptimize: s_sid,smowtion_size,sc_project,WAU_,wau_add,comment-form-quicktags,edToolbar,ch_client,seal.js,homemade-hooplah.js,jquery.js,jQuery-UI-Touch-Punch/jquery.ui.touch-punch.min.js,wpurp-public.js
    * Optimize CSS code is ON
    * Remove Google Fonts is ON
    * Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Frank Goossens

    (@futtta)

    9 years, 8 months ago

    first of all; those are some tasty dishes hooplah64 🙂

    Now regarding the problem you describe; that’s a hard one really. the CSS used on first pageload is the same as the one used on 2nd (or later) pageload, so that can’t be it. to make things even more difficult; I can’t reproduce the problem; I tested in Chrome and Firefox, on Windows and Linux and in both cases the images in the slider appeared at normal size, same for the recipe card. I did a quick test on webpagetest.org and there too the images in the slider seemed to load normally (scroll down the page until you see the screenshot).

    So that brings us to these questions:
    * what browser are you seeing that problem in?
    * are you at that point logged in to your site or not?

    frank

    Thread Starter hooplah64

    (@hooplah64)

    9 years, 8 months ago

    Thanks for the reply Frank! (And about the dishes :D)

    I’ve tested the page in both Chrome and Firefox and it seems to happen in both browsers. I’m always logged in on Chrome, though I’ve tried it both ways with Firefox (logging in and logged out of WP) and the issues persists.

    I also had a friend send me a screenshot of my page with the slider doing the same thing on her screen (I think she uses a Mac, but not sure if she’s on Safari or another browser). Honestly I thought it was just a weird issue on my end before she messaged me about it.

    This is the screenshot she sent me of the slider: http://homemadehooplah.com/wp-content/uploads/2016/09/14340016_10154467892631684_218139850_o.jpg

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 8 months ago

    Darn, tried again and still can’t reproduce. I’ll try some more later today, but if not reproducible for me I can’t inspect the rendered page to see which CSS is (not) applied to the slider and the recipe.

    Regarding “he felt it was the javascript caching that was the cause (and not the CSS)”; is there any JS error/ warning on your browser’s console to be seen? Did you try temporarily disabling JS optimization to see if this makes the problem go away?

    Now what you off course also could do is excluding the CSS- or JS-files of the Soliloquy & WP Ultimate Recipe plugins from autoptimization. Excluding only one type (CSS or JS) also would help identifying where things actually go wrong.

    have a nice weekend,
    frank

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Scripts/CSS not working on initial page load?’ is closed to new replies.