Header text style loading wrong, Jetpack CDN integration

  • Resolved careerbreakadventures

    (@careerbreakadventures)


    5 years, 4 months ago

    Hey, Frank. I just installed Autoptimize the other day and have been very satisfied. Thank you in advance for your help, I have read many of your forum responses with legendary customer service.

    I have seen a good improvement on my PageSpeed insights after installation, mainly due to reductions in Render Blocking scripts. I use this plugin in conjunction with WP Fastest Cache (I have turned off minification settings in WPFC) along with Jetpack CDN for images and scripts. I have been using advanced caching for a month or so, and the CDN for a long time.

    Since installing Autoptimize, mostly everything seems to be working well, although I have uncovered one strange behavior that I cannot figure out how to fix. On my “pages” (but not on my “posts”, which are working fine, or my homepage, which is also working fine), the post grids have changed their text header and snippet styling. Up until now, I have had relatively small headers and text under each thumbnail image, but that has suddenly changed to very large wording, as if it is now inheriting the style from a different source.

    When I have the “By default Autoptimize is also active for logged on users, uncheck not to optimize when logged in e.g. to use a pagebuilder.” checked, I can see the new large font style which is shown to other visitors who are not logged in. When I uncheck this box to see it without the Autoptimize settings, it looks normal.

    Here are the before and after. The one with the large text is the one I am trying to correct.

    https://imgur.com/a/00Cm7fo

    https://imgur.com/a/Q1s81CQ

    The settings which I currently have turned on in Autoptimize are as follows, and I have made no changes to any of the automatic excluded scripts:
    Optimize JavaScript Code?
    Aggregate JS-files?
    Exclude scripts from Autoptimize: wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js
    Optimize CSS Code?
    Aggregate CSS-files?
    Also aggregate inline CSS?
    Exclude CSS from Autoptimize: wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
    Optimize HTML Code?
    Save aggregated script/css as static files?
    Minify excluded CSS and JS files?
    Remove emojis
    Remove query strings from static resources

    If I did not add it to the list above, the option is not selected. Also, here are my current WPFC settings. I have unchecked the options for combining CSS and JS because that is covered with Autoptimize already. I assume this is correct?

    https://imgur.com/a/Led7lvs

    And lastly, I have one more unrelated question. I want to ensure that my Jetpack CDN is properly integrated with Autoptimize, and need to input my CDN root URL into the plugin. The issue is, as you have likely run into before, Jetpack does not use one CDN root. There are numerous server URLs that show up when I check the pages with Pingdom, such as s0.wp.com/… s1.wp… i3.wp… etc. Likely at least 6 or more. I reached out to Jetpack to ask them what my root CDN URL was, but predictably, they were not helpful. Do you know what your customers who use Jetpack CDN put in this field? If it is blank, am I missing some of the static file CDN capabilities?

    Thank you again for your help!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter careerbreakadventures

    (@careerbreakadventures)

    I should also have mentioned that the area that is no longer styled correctly is built using a Creativo Theme setting which imports a post grid. It is not built manually into the page.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    hi careerbreakadventures;
    re fontsize; can you try with “also aggregate inline CSS” unticked?

    re cdn; the jetpack image optimization CDN can, as far as I know, not be used as a “normal” cdn, so just leave AO’s CDN-field empty.

    hope this helps,
    frank

    Thread Starter careerbreakadventures

    (@careerbreakadventures)

    Yes thank you for the suggestion and the clarification on the CDN. I unchecked the aggregate inline CSS and it fixed the problem right away. Also, do you know if also having the “combine JS and CSS files” options enabled in Fastest Cache will cause any compatibility issues with Autoptimize as it sounds like a similar function? Or will this potentially capture files from different sources which otherwise may not have been included?
    Thanks again!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Hey @careerbreakadventures hadn’t received a notification of your answer.

    In general I advice all CSS/ JS optimization to be turned off in other plugins, the risk of conflicts is too real to ignore.

    kind regards,
    frank

    Thread Starter careerbreakadventures

    (@careerbreakadventures)

    Frank, no problem and thanks for the support. I have two additional questions which have recently popped up.
    When I check my Google Pagespeed scores, I have a new issue related to loading unused Autoptimized css which is causing a big delay (4.6+ sec per Google). I can pull up the minified/optimized file but am unclear as to what I am reading.

    This is the file which you will see on top of this Pagespeed test:
    autoptimize_3bdade80c8275f6e4e5cde65c2c03859.css

    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcareerbreakadventures.com%2F2019%2F01%2F26%2Fcarretera-austral-road-trip%2F&tab=mobile&hl=en

    I have also had a recent issue pop up, possibly unrelated to this plugin, but wanted to ask just in case. My lazy loading feature (currently through Jetpack), has stopped working. I have tried turning it off and switching it to the LL feature in Autoptimize, but that doesn’t seem to work either as images are all loading together and causing more speed issues. This was not the case until recently. Are there any settings which might cause this to happen?
    Again, thank you for your support!
    Grant

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    re. unused CSS; that is being reported as being Autoptimize’s, but AO merely aggregates all the CSS provided by your theme & plugins, so if you (really) want to tackle “remove unused CSS” then you should look into your theme & plugins (you might be able to get some improvement using e.g. “plugin organizer” to only allow plugins to work on specific pages). Moreover the unused CSS will likely be different for different pages (or parts of your site), so that would lead to different autoptimized CSS-files being loaded on different pages.

    re. lazyloading; it’s possible you need to exclude jetpacks’s lazyload (file and/or inline) JS from AO JS optimization. maybe start by checking if JP LL works when AO is off by adding ?ao_noptimize=1 to the URL?

    hope this clarifies,
    frank

    Thread Starter careerbreakadventures

    (@careerbreakadventures)

    Ok thank you for the info, it is helpful

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome, feel free to leave a review of the plugin and support here! ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header text style loading wrong, Jetpack CDN integration’ is closed to new replies.