how can we defer or async style.css using wp enqueue, without plugins

  • Hello Members,

    Do any one knows about how can we defer or async ‘style.css’ using wp enqueue, without plugins. When I was checking the performance of one of my website, google says that i have render-blocking css in my website, and can be use defer or asyc method to load css files. So how can i do this without using a plugin. I think it can be done with wp enqueue method. When I search for this, everyone refering about JS defer and no one is talking about CSS defer or async. So how can i done this with wordpress. Thanks in Advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    If you defer/delay loading CSS, your site may not appear correctly to the viewer. Don’t get carried away chasing a pefect Google pagespeed score. Focus on how it looks/loads to your viewers and used a plugin like autoptimize to combine all of your site’s CSS into one minified file.

    Moderator bcworkz

    (@bcworkz)

    To expand on Steve’s reply, combining and minimizing your CSS will improve page load speed as experienced by your visitors (the real goal), but Google’s page speed tool will still complain about render blocking content unless you inline everything. By inlining everything, you can introduce other problems. See this blog post.

    To truly address the issue as Google intends (inline + defer), you would need to manually go through all of your CSS files and extract all CSS that applies to above the fold content (everything visible in the window’s initial view, which varies a lot by device). All extracted CSS should be listed inline in the head section and the remaining CSS deferred by loading in the footer.

    If you were to delete the extracted CSS from the original files, as would be logical, you would be altering theme and plugin files in a very unsustainable way. It should be OK to leave the files as is, except loading them in the footer. Ironically, this means fully meeting Google’s intentions would actually increase the total amount of data transferred since all above the fold CSS is transmitted twice!

    Thus, our don’t get carried away recommendation. Do everything reasonable to improve page speed. Fully addressing the above the fold criteria is beyond reason in nearly all WP installations.

    Thread Starter shaijuelayidath

    (@shaijuelayidath)

    Thanks Steve & Bcworks for suggestions, following is my work:
    https://www.coinoneinvents.com/trial/
    But interesting thing is in gtmetrix i got 100% page speed score. https://gtmetrix.com/reports/www.coinoneinvents.com/TwidkjVJ

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how can we defer or async style.css using wp enqueue, without plugins’ is closed to new replies.

Tags