Is it possible that the HTTP module's deflate compression is only effective on specific CSS files and not all

I've been working on setting up mod deflate and gzip on my server, and while it's mostly functioning smoothly, I've noticed that not all files are being caught. It's not a matter of missing ALL javascript or CSS, but rather that some are slipping through uncompressed.

For example, the CSS at this link IS NOT being compressed:

However, the following CSS IS being compressed:

Below is the configuration in my htaccess:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

I've searched extensively online for solutions and tried different variations in the configuration above, but so far nothing has resolved the issue.

cssapachecompressiongzipdeflate

Answer №1

After some trial and error, I stumbled upon a solution that seemed to work:

The Solution

I decided to remove the htaccess directives and instead created a conf.d file on the server.

# Compress certain types of files - html, text, css, xml
AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml

# Compress javascript files
AddOutputFilterByType DEFLATE application/x-javascript application/javascript text/javascript text/x-js text/x-javascript

# Compress by file extension
AddOutputFilter DEFLATE js css htm html xml

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reduce the size of a webpage by 10%

Have you ever noticed that when you press Ctrl+- on any browser, the page scales down to 90% of its original size? It actually looks nicer at 90%, so I want my webpage to default to opening at 90% instead of 100%. I've tried following common approach ...

javascripthtmlcssweb

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

htmlcsspositionspacing

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

javascriptjqueryhtmlcsstwitter-bootstrap

Flexible layout of perfectly square elements

I am currently working on creating a responsive grid layout consisting of squares that are positioned absolutely within their parent element. The goal is to ensure that when the page is resized, the squares scale proportionally with their parent container ...

javascripthtmlcss

Is there a way to modify the CSS or add custom styling within an iframe form?

Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...

javascripthtmlcsswordpressiframe

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

csshtmlhyperlink

If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc. This code runs from an .html file <body> <div class="" id="pimg1"> </body><script> var x=new Date().getMonth(); if (x == 0||x == 5||x == 2){docu ...

javascripthtmlcsslogical-operators

The grid flex end is behaving differently than I anticipated

I am struggling to align two buttons vertically on the right side. Here is my code snippet: const WalletsContainer = () => { return ( <Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'} ...

javascriptcssreactjsmaterial-ui

What is the best way to place text side by side with an image?

How can I align text below a picture like this? https://i.stack.imgur.com/WcNRa.jpg Here is the code snippet: https://jsfiddle.net/vzjj9eLy/ HTML: <span class="test"> <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cd ...

htmlcss

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

htmlcssbootstrap-5

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

I am facing an issue with my WordPress page that has Buddyboss installed along with Elementor pro as the Pagebuilder. The Buddyboss plugin provides Facebook-like functions on the website. While it is easy to comment on posts within the Buddy Boss system, I ...

javascripthtmlcsswordpressblogs

Margin ambiguity in a vue.js application

I am facing an issue with my Vue.JS project setup. I want the App.vue to occupy the entire page and have different routes displayed within App.vue using router-view. But, when I try to add a margin to the content of my Game component, the margin seems to ...

javascripthtmlcssvue.jsvuejs2

Personalized Bootstrap grid rows and columns

https://i.sstatic.net/R0yFY.png As a beginner in Bootstrap, I am having trouble achieving this specific layout in Bootstrap 4 grid. The areas marked in red are not appearing as expected. Here is what I have attempted so far: <div class="row"> ...

cssbootstrap-4

A guide to adjusting the size of a mat-button using an svg mat-icon

I have PrimeNg and Angular Materials buttons on the same td. I am attempting to resize my mat-buttons to match the size of my pButtons but they are not adjusting properly. Should I consider using a different type of button with my icon? HTML <button ma ...

htmlcssangular

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

javascriptjquerycsshtml-table

Add motion to the div element when hovering and moving the mouse away

Looking to add animation to a list moving from left to right and vice versa. Now, I want the list to animate from left to right when the mouse hovers over the div, and then animate from right to left when the mouse leaves the div. Can someone assist me wit ...

javascriptjqueryhtmlcss

Issue with Bootstrap 5 dropdown menu on mobile devices when not sliding down upon clicking

Important things to know before getting started: Utilizing Django (python) Implementing Bootstrap Additionally, using html and css Steps taken (in sequence leading up to encountering an error): Copied the navbar template from the bootstrap navbar docume ...

htmlcssfrontendnavbarbootstrap-5

Responsive height using Material Design Lite

I have a website using MDL, with a prominent header centered on the page. To enhance visibility, I added a background box behind the text. To view the CodePen example, click here. The challenge is to ensure that when the window is resized, such as on a m ...

htmlcssresponsive-designheightmaterial-design-lite

What could be the reason for the top alignment of only a portion of the cell

Here is the code snippet I am working with: <html> <head> <style> table.t_group { border: 2px solid black; margin: 0 auto 0 auto; } table.t_group > tbo ...

htmlcss

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

cssangularbootstrap-4angular-materialbootstrap-5