Is it OK combined wp-include js, jquery, css? [closed]

TL;DR

Yes, your performance will get better, and no, the security as far as WordPress is concerned is not a problem, and apart form general cache-related problems (realtime information etc.) there won’t be any major negative sideeffect.

but…

To give a WordPress specific answer here, I assume that your site and your server-setup meet your security standards already. If they don’t, please refer to Webmasters to get some information about your general setup.

The WordPress specific part

Well, not directly WordPress, it is mainly the W3TC Plugin.

Functionality of the site

If all your scripts/plugins/functions use the right way of enqueueing the CSS and JS in WordPress, you should be safe in general.

With a combination of Javascript-Files into one big combined minified (yeah, it can get really big) you face a few difficulties that you have to master.

The First one would be kind of obvious, but very important – always check your site functionality after trying something new in W3TC (In fact, always check it anyway 😉 ). The thing is, it could happen that you combine your JS files, and you check out your site. Everything works, no JS error. Then you check out your site (not logged in), same result, and you are happy with yourself for getting a higher PageSpeedResult. However, the next user that visits the site finds it being broken. This is because the cache is usually not prebuilt, but after the first not logged-in user visits the site.

Your check routine for combining JS and CSS with W3TC should contain at least these three steps (and yeah, on different browsers, but you get the idea):

  • First check – logged in
  • Second check – logged out
  • Second second check – logged out

Performance of the site

Well, after you managed to finally get the files in the right order and you are confident everything works, you run your performance tests again. This is why you wanted to combine your JS in the first place, isn’t it? 😉

You will find out that you get better results for the number of requests, but you get worse results for the amount of JS and CSS loaded in the <head> or above the fold.

Now comes the second step

This one is going to take a LOT of time, as it is the manual combination of your different JS and CSS files.

As great as W3TC is, it offers you the possibility of defining which script should be combined and loaded at which part of the site. This sounds like the perfect scenario – load all the basic stuff that is necessary in the head, and the rest after your site has rendered.

The problem lies in the fact that not all plugins use the best practices for enqueueing scripts and styles with wp_enqueue_script() and wp_enqueue_style(), and the functionality of a lot of those scripts greatly depends on the position of ther inclusion.

For example, a popular Fancybox Plugin also outputs a part of it’s script inline. With moving the JS Files to the <footer> or combining them in your way can break your whole jQuery-magic in one instance.

Adding new functionality/Plugins

Yeah, you guessed right, and I hate to break this to you – you will have to do the same routine every time you add new Plugins or new functionality to your site. So be sure everything works as expected before putting hours of optimizing into your project before it’s finished.

Mobile concerns

As @rarst pointed out, having huge JS and CSS files can be problematic with mobile devices. Keep that in mind – but this is not the issue concerning your caching, but your site in general.

The WordPress performance itself WILL get better

As W3TC creates files that are delivered instead of dynamically generating them, your site will gain speed and reduce the number of requests. However, this only applies for requests after your cache is built.

What’s next

Unfortunatley, there is no generic solution to how you should deal with this issue. I hope you know what to look out for, and how to learn which plugins you can use and trust there.

Have fun experimenting with this stuff! You may need to alter a few scripts to get them into the right WordPress way, but that’s part of the fun. And the frustration.

And, once again, be sure to check everything multiple times. You reduce the complex functions of various systems (starting from PHP on the Webserver, including your Database, WordPress itself and all your customization and content) to static files.

That’s a really big job, but if you did everything right in the first place, everything should be fine afterwars!

Related Posts:

  1. JavaScript Loading Screen while page loads
  2. Automatically decrease font size for long words
  3. Getting click on item to open closest relevant element (popup) with jQuery
  4. jQuery for Fade Preload Causes My Site Favicon to Disappear from Tab of Browser
  5. Site images are fixed in front of my site content [closed]
  6. WP Media Uploader modal conflicts with Bootstrap modal
  7. How to set time delay in javascript
  8. Adding an onclick function to go to url in JavaScript?
  9. Change Background color (css property) using Jquery
  10. JavaScript: filter() for Objects
  11. JavaScript runtime error: ‘$’ is undefined
  12. Use images like checkboxes
  13. How to make html table vertically scrollable
  14. Why is the jquery script not working?
  15. TypeError: $(…).DataTable is not a function
  16. How to center image in carousel
  17. How to get client’s IP address using JavaScript?
  18. Simple throttle in JavaScript
  19. Enable & Disable a Div and its elements in Javascript
  20. Javascript : array.length returns undefined
  21. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  22. The ‘describe’ keyword in javascript
  23. How do I remove a box-shadow effect from an element when another element is hovered?
  24. Slide right to left?
  25. How to set “style=display:none;” using jQuery’s attr method?
  26. Add tinymce buttons to caption textarea in media uploader
  27. How to prevent wordpress from loading old versions of jquery in wp_head();?
  28. Move WordPress native javascript to bottom of page?
  29. RequireJS in custom theme. Working Example
  30. How to handle multiple instance of “send_to_editor” js function
  31. Best approach for loading a sidebar Only if the screen max-width is >900px?
  32. Trying to get single posts to load on the front page via ajax
  33. Stylizing external SVG files with jQuery and CSS
  34. Ajax not firing properly using Firefox, but works in Chrome
  35. wp_enqueuescript won’t load in footer even with true value set?
  36. Execution of JavaScript on save post
  37. Prevent five different copies of jquery from being included on every page
  38. Is placing stuff in page text edit window bad form?
  39. javascript is not working on Event Submission?
  40. Add colorpicker to featured image
  41. Gravity Forms not loading under https, jQuery is not defined
  42. Gravity list field override and adding javascript [closed]
  43. WordPress audio player causing js error, mediaelementplayer is not a function
  44. Add a Fancybox automatically to post type “post” images
  45. Enqueuing javascript files
  46. WordPress customizer refresh screen after save
  47. Creating multiple enclosing shortcodes and fixing JS issues on click
  48. Can’t load a class into WordPress post editor’s content field
  49. Slider loading issue
  50. Correct way to write jQuery functions in WordPress
  51. Add a class to posts in increments of 2
  52. How to make an WordPress element sticky? [closed]
  53. How to Dynamically Load Content Into Body of Bootstrap Modal Window?
  54. I want to import my Json file into a custom made display-modal. How do i link my Json file?
  55. show/hide div with simple jQuery script [closed]
  56. Searching multiple tags and adding jQuery dependant script onto page template?
  57. TinyMCE 4 remove/add attributes for all images
  58. Trouble with WordPress Ajax Login System – 302
  59. Javascript stopped working [closed]
  60. Why load JS through the CMS framework? [duplicate]
  61. url – ajax loaded but no JS
  62. Callback After WordPress Customizer Complete Loading
  63. Close Fancybox, sumbit form data and redirect
  64. Loading scripts on a single page plants the script in the footer
  65. Getting a ‘slide down’ js panel implemented within WP
  66. Nested Gallery Shortcode INTERMITTENTLY working
  67. Problem Implementing parallax in header of bp-default theme
  68. How to keep HTML form field that is conditional hidden with javasript hidden after page reload?
  69. Accessing javascript in multiple files [closed]
  70. Issues loading Jquery on WordPress website
  71. Required radio button does not validate in form, when clicked through Javascript/jQuery
  72. Blur.js with WordPress – Enqueued, but server not finding file
  73. Including Older Version of jQuery for IE7/IE8
  74. Parse wordpress blog data using json api and ajax
  75. Problem adding MP3 attachments to a jPlayer playlist
  76. Jquery not working
  77. A carousel slideshow plugin in JavaScript
  78. JS behavior differs depending on page tree [closed]
  79. Add other class content with reference class value
  80. Theme customisation – how to store javascript externally when it utilises php variables?
  81. Get ajaxForm response value
  82. why does so many javascript libraries are loaded along with my website?
  83. Why does my media selection script write to ONLY the first input field?
  84. onclick jquery function not working in wordpress header file [duplicate]
  85. Add a jQuery snippet for sepcific user role
  86. Adding scripts before plugins scripts
  87. jQuery search function not running in WordPress but running locally (fiddle)
  88. Masonry – Can’t Find Variable imagesLoaded
  89. Possible jquery / library conflict in plugin usage
  90. How to update scrollbar when using Jetpack’s Inifnite Scroller?
  91. Clear custom field when new tag is added
  92. Are you sure popup on Contact Form 7 [closed]
  93. change the icon of a custom post type in WordPress to use twitter boostrap
  94. Element works, but not on wordpress site [duplicate]
  95. javascript not loading in wordpress
  96. JS file not loading [closed]
  97. Carousel Hover Image
  98. How do I add Javascript and CSS files into WordPress?
  99. How to Javascript/jQuery
  100. can’t make jQuery work (change image on time interval) [closed]