You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Edit and finalize draft for publishing (remove draft label, add draft-finalized label)
Assign Issue to yourself and create Markdown file (remove draft-finalized label, add pending)
Project Lead: Review and Publish KB Article (remove pending label, add published label)
Additional TODOs
Additional TODO list items go here.
title: Why doesn't the HTML Compressor combine CSS/JS into one file?categories: questionstags: html-compressionauthor: raamdevgithub-issue:
I see that the HTML Compressor is combining CSS and JS into multiple files instead of a single CSS file and a single JS file. Is there a particular technical reason for this?
When it comes to CSS, I originally made every effort to get all CSS into a single file; i.e., that's how the HTML Compressor was originally released. The problem was that some <link rel="stylesheet" media="all" /> tags contain different media specifications. wpsharks/html-compressor#16
The HTML Compressor needs to preserve the original @media queries. Since IE 9/10 won't allow us to nest media queries, this means that we need to create separate files.
As the HTML Compressor scans your HTML, if it finds things like this:
That ends up becoming three CSS files, only so that the HTMLC can break the media queries down properly. One way to optimize your site, is to change that to this.
However, in order to preserve the cascading effect in the stylesheets, it needs to become three. Otherwise, we would be pulling the last line up above the second line when they are combined. For that reason, any change in the media query leads to more files.
JS files are a different beast. These we can combine without needing to consider anything like a media query. However, we do need to consider their location in the document. All JS files in the head should become one, assuming there were no exclusions between them. The same for any in the footer.
So what can cause more than one JS file in the head or footer?
This will almost always become one JS file. However, if /b.js is excluded, it becomes three files. The HTMLC leaves the original intact, which means that it can only compress /a.js and /c.js (together with anything after /c.js).
Again, it is non-obvious with JS too. You would think that if /b.js was excluded, that this could become just two JS files.
It becomes three, because /b.js needs to remain in the same exact loading order. Which means that we compress /a.js (with anything above it), we leave /b.js as-is (it is excluded), and then we continue by compressing /c.js (along with anything below it).
a secret tip that can be used to optimize the impact that our HTML Compressor will have on your site. The tip being, to look at your theme and other plugins, and try to bring them all into the same media query. Often times, one theme will choose to use all, while another chooses to use screen or a specific query for mobile devices. It's better to write your CSS <link> tags with the same media query, which results in just one CSS file after the HTML Compressor runs. If you have CSS that only applies to mobile devices, or only applies to printers, you can use @media{} queries in the CSS for this. That's fine, so long as you don't nest @media{} queries, which is what the HTML Compressor would need to do (it can't, due to compat. issues).
The text was updated successfully, but these errors were encountered:
KB Article Creation Checklist
draftand eitherquestionsortutorialsdraftlabel, adddraft-finalizedlabel)draft-finalizedlabel, addpending)pendinglabel, addpublishedlabel)Additional TODOs
Additional TODO list items go here.
When it comes to CSS, I originally made every effort to get all CSS into a single file; i.e., that's how the HTML Compressor was originally released. The problem was that some
<link rel="stylesheet" media="all" />tags contain differentmediaspecifications. wpsharks/html-compressor#16The HTML Compressor needs to preserve the original
@mediaqueries. Since IE 9/10 won't allow us to nest media queries, this means that we need to create separate files.As the HTML Compressor scans your HTML, if it finds things like this:
That ends up becoming three CSS files, only so that the HTMLC can break the media queries down properly. One way to optimize your site, is to change that to this.
Now it will all become one CSS file. i.e., so long as each media query is the same, we can combine the files.
It is non-obvious at first, because you would think that this could become two CSS files:
However, in order to preserve the cascading effect in the stylesheets, it needs to become three. Otherwise, we would be pulling the last line up above the second line when they are combined. For that reason, any change in the media query leads to more files.
JS files are a different beast. These we can combine without needing to consider anything like a media query. However, we do need to consider their location in the document. All JS files in the head should become one, assuming there were no exclusions between them. The same for any in the footer.
So what can cause more than one JS file in the head or footer?
This will almost always become one JS file. However, if
/b.jsis excluded, it becomes three files. The HTMLC leaves the original intact, which means that it can only compress/a.jsand/c.js(together with anything after/c.js).Again, it is non-obvious with JS too. You would think that if
/b.jswas excluded, that this could become just two JS files.It becomes three, because
/b.jsneeds to remain in the same exact loading order. Which means that we compress/a.js(with anything above it), we leave/b.jsas-is (it is excluded), and then we continue by compressing/c.js(along with anything below it).a secret tip that can be used to optimize the impact that our HTML Compressor will have on your site. The tip being, to look at your theme and other plugins, and try to bring them all into the same media query. Often times, one theme will choose to use
all, while another chooses to usescreenor a specific query for mobile devices. It's better to write your CSS<link>tags with the same media query, which results in just one CSS file after the HTML Compressor runs. If you have CSS that only applies to mobile devices, or only applies to printers, you can use@media{}queries in the CSS for this. That's fine, so long as you don't nest@media{}queries, which is what the HTML Compressor would need to do (it can't, due to compat. issues).The text was updated successfully, but these errors were encountered: