Hummingbird: Combining files on http2 and minifying HTML

1) I personally would use the combine feature even on http2, as it makes the output look cleaner.

2) And I would also like to minify the HTML (removing unneeded spaces would also save a few bits and bytes)

  • Nastia

    Hello Stefan

    Hope all is well!

    Let me explain how the HTTP 1 is working; the HTTP 1 protocol is loading a website, one file at the time. Meaning, it will load next file one, right after the other. Please see an example here of loading order here

    For example, your website might have 50 different icons for your logo, social media logos, and various other small graphics. These images will start loading, one after each other.

    So combining CSS and JS files allowed to load the website a little bit faster. Also, HTTP 1 is loading every single file that is added to a website, even if the file is not used on a page.

    The HTTP 2 protocol will load every single file at the same time:

    HTTP 2 is organizing all site's assets and load only files that are needed on that page, so combining files with HTTP 2 will no make a website faster, it might even make it slower.

    For a reference, please have a look at this article:
    https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

    2) And I would also like to minify the HTML (removing unneeded spaces would also save a few bits and bytes)

    Thank you for this suggestion. I hope enough members will vote "+1"s on this feature so our developers will consider adding it to a features list.

    Please let us know if you have any further questions!

    Cheers,
    Nastia

  • Stefan

    Hi Nastia,

    Thanks, I hope you're well too. :slight_smile:

    Thanks for your explanation of HTTP 1 and HTTP 2. I do know that HTTP 2 does handle a lot of requests more efficiently than HTTP 1 and solves a lot of problems.

    My main point is, shouldn't the user be able to choose? Same as he gets to choose to not combine files on HTTP 1, shouldn't he also be able to choose to combine files on HTTP 2?

    I'm just a design and frontend guy though, so I might be completely wrong on these rather technical points.

    1) Older versions of Internet Explorer do not support HTTP 2. For them a combined CSS file instead of 10 CSS files would be faster to load, and would only result in a minimal performance hit for new browsers.
    2) When delivering files with compression, a combined file might result in more bytes saved than 10 smaller compressed files.
    3) Maybe this can be neglected, but even with HTTP 2 each file needs to be requested from the server and then confirms that it has been loaded. As far as I know HTTP 2 is a lot better at doing this, but still has to do it somehow. OR do you think splitting a 10000 lines long CSS file into 1000 tiny CSS files would result in the best performance on HTTP 2, even if 980 of the tiny CSS are being used on the page that is being loaded?

    Regarding minifying HTML, I think removing line breaks and HTML comments would be a great feature. And even more awesome would be if the inline css that is being added by some plugins or custom CSS from themes, could be added to the main CSS file.

    This feedback post and feature request has been created by one of wpmu devs support heros after I chatted with them. Maybe it makes sense to have the minify HTML feature request in its own post? I think that would really be a great feature that a lot of your members would appreciate.

    (I can imagine less people care about my combining CSS files on HTTP 2 preferences.) :slight_smile:
    Feel free to delete this post if you see no reason to enable combining files on HTTP 2.

  • Nastia

    Hello Stefan

    Hope all is well!

    Currently, there is no easy way to bring back combine for HTTP/2 websites. I've forwarded your feedback to our developers and they will take it into account. At this moment, we added a feature request to add a filter that will allow combining files for HTTP 2 websites. Our developers mentioned also, that the inline CSS will be available on next Hummingbird releases :slight_smile:

    Have a nice day and take care!

    Cheers,
    Nastia

  • Stefan

    Hello Nastia,

    I hope you're well.

    I found another reason why combining some files might be useful on certain sites, even with http2 servers.
    I've built a theme that writes a custom css files from the WordPress customizer. (Custom colors and other custom styles, I think writing these styles into a css files is a better solution than having them in inline styles.)
    The theme always loads the main style css file AND the custom css file. Combining these two files would even on http2 be the right solution, as the styles from both files are needed on every page.

    The theme also loads css files according to enabled features. For example, if I enable the custom post type to display a team overview, the corresponding css files is being loaded. If I enable WooCommerce, an additional css file is loaded. If I enable the slideshow post type, the slider.css is being loaded. For these css files it makes sense to NOT combine them on http2 because they apparently would only being loaded on pages that require them.

    BUT combining the main style.css file and the custom theme.css written by the WP customizer, would make sense.

    And I'm sure a lot of themes do write their own css files according to their customizer settings. I understand why in most cases it would make sense to not combine files, but I think you see that at least having the option to combine certain files does make sense.

    I'm optimistic that wpmudev will find a solution that gives their customers the most possible freedom while still educating them about the proper usage.
    For example, if you change the notice
    from "We've disabled the Combine option because your server has HTTP/2 activated. HTTP/2 automatically optimizes the delivery of assets for you"
    to "We've disabled the Combine option because your server has HTTP/2 activated. HTTP/2 optimizes the delivery of assets, combining files is often not necessary. If you know what you're doing, you can enable the Combine option by clicking [This Button]."

    Wouldn't that be a great solution?

    Cheers,
    Stefan

  • Nastia

    Hello Stefan

    Hope you are doing well!

    Thank you for the additional information. I've forwarded it to our developers and I am quoting their response below:

    The limitation that HTTP2 removes is latency between responses. In HTTP1.1, for example, if you have 2 assets, a browser will send a request for the first file, wait for the response, send the request for the second file and wait for the response. And the performance impact was from these time intervals that browsers spent on doing requests and waiting. It's some fractions of a second for each request, but with hundreds of files, you get a 1-2 second delay depending on where the site is hosted. HTTP2, on the other hand, doesn't need to make multiple requests. It can get all the files in one go. So you can combine all the files into one or leave 100 separate files, it won't make a difference.

    Moreover, if you combine multiple files into one file with HTTP2, you are penalizing your users. For example, you're using browser cache. And you combine all the files. If you change one single line of code, users will have to re-download the cached file. But if you were to have many smaller files, updating one would only mean that the cache has to be refreshed for just that small asset, no need to redownload all the files.

    Hope this explains it!

    Kind regards,
    Nastia

  • Stefan

    Hello Nastia,

    Yes, doing well, I hope so are you.

    I'm sorry, but never combining or grouping any files on http2 under any circumstances is wrong (as far as I understand it after reading up on the issue).
    According to your devs understanding of http/2 it would make sense to load 100 or 1000 tiny css or js files, which is proven to be wrong. Article incl. benchmarks: The right way to bundle your assets over http/2

    Between San Jose and US West (N. California)

    Going from 1000 files to 50 increases speed by an average of 66%. 6 files and 1 file concatenated show almost a 70% page load speed increase as well.

    Between San Jose and Asia Pacific (Seoul)

    We can see here that the average page load speed is much slower because of the distance between the client and server, but going from 1000 files to 50 and below has an average speed increase of around 27%.

    According to the articles I read, it would actually make sense to add a feature to hummingbird that allows for grouping of files, instead of just combining them into one file for header and footer.

    But anyways, hummingbird is a tool, it does and should not force combining files on http/1, and it should not force not combining files on http/2.

    It would also be great if your dev could link to some articles or benchmarks that prove that loading 100 or 1000 files over http2 does not make a difference or even improve the sites performance, rather than just explain his understanding of how http/2 works.
    This is not about being right or wrong, this is about making hummingbird as good as possible. I will gladly shut up about this issue if your dev can provide benchmarks that show that loading 100 or 1000 files does indeed not make a difference or even improve loading times.

    Kindest regards,
    Stefan

  • Nastia

    Hello Stefan

    I trust all is well!

    Thank you for sharing this research with us. With HTTP 2 combining files still, could bring complications, the protocol only loads the files that are added to the page, so the files can be combined with files that do not belong to a loaded page.

    This means that the Hummingbird's user needs to be very experienced when it comes to combining files because the files need to be carefully selected.

    I'm quoting here explanation from CloudFlare why combining files may bring worse results:

    However, concatenating files is no longer a best practice in HTTP/2. While concatenation can still improve compression ratios, it forces expensive cache invalidations. Even if only a single line of CSS is changed, browsers are forced to reload all of your CSS declarations.

    In addition, not every page in your website uses all of the declarations or functions in your concatenated CSS or JavaScript files. After it’s been cached, this isn’t a big deal, but it means that unnecessary bytes are being transferred, processed, and executed in order to render the first page a user visits. While the overhead of a request in HTTP/1.1 made this a worthwhile tradeoff, it can actually slow down time-to-first-paint in HTTP/2.

    Based on this, combining files can hurt performance in browsers that support HTTP/2.

    Nevertheless, I have forwarded your request to our developers for their consideration.

    Have a nice day and take care!

    Cheers,
    Nastia

  • James

    I just wanted to chime in and say I would also really like the ability to combine files. I understand combining everything may not always be the best option depending on the circumstances, but most performance testing tools still penalize pages for what it considers too many requests. I would like to be able to use my own judgement and combine certain files as I see fit.

    Thanks

  • Nastia

    Hello Stefan and James

    Hope you're doing well!

    In latest version 1.7.1 we added a new feature which allows enabling Advanced mode. Please see the screenshot below:

    Though, I am afraid combining files when HTTP 2 is detected is still not possible. Looks like, from your end, the HTTP 2 protocol was not detected and combine option is available. Currently, HTTP 2 can be detected only if cURL is installed on a server.

    Please let me know if you have any further questions!

    Kind regards,
    Nastia

  • Dimitris

    Hello there Stefan, James,

    HTTPS/2 detection is not accurate on some servers where curl is compiled without HTTP/2 support. This is already known to our developers, who are investigating better ways to check for HTTPS/2 (most probably via some API endpoint that is going to be 100% accurate).

    We'll keep you posted here as soon as we've got some development on this. Meanwhile, if you see any other pending update notification about HummingBird plugin, feel free to grab a recent backup and proceed with update (or set Automate do that for you!).

    Warm regards,
    Dimitris