Size of CSS files that have been transferred and resources utilized

Visiting two different websites piqued my curiosity:

Upon analyzing the CSS files, I discovered that on the Apple site, landingpage.css had a 34.6KB transferred size and a 411KB resource size. Meanwhile, on the Lenovo site, core.css showed a 44.2KB transferred size and a 289KB resource size.

Interestingly, although Lenovo's resource size is smaller than Apple's by 122KB, the transferred size is actually about 10KB larger?

To test this further, I conducted an experiment on my own website with two CSS files under the same conditions. The results were surprising: CSS1: Size - 400KB, Transferred Size - 89KB CSS2: Size - 780KB, Transferred Size - 70KB Both files were compressed using brotli compression.

This discrepancy begs the question: Why does the transferred size not always correlate directly with the resource size?

css

Answer №1

  • Minimizing resource size

Utilizing gzip, web servers aim to reduce the amount of data transmitted to clients. When a browser that supports gzip sends a request, it includes "gzip" in its Accept-Encoding header. Upon receiving the request, the server processes the response as usual and checks the Accept-Encoding header to determine how to compress the resource. If gzip is supported, the server uses it to compress each resource.

The compressed versions of the resources are then sent with an additional Content-Encoding header indicating gzip compression. The browser decompresses the content back to its original form before displaying it to the user.

  • Effects on File Size Post Compression

The discrepancy in transfer sizes arises from varying compressibility levels of resources based on their content. A more compressible resource typically contains more repeating characters, particularly in the case of lossless compression. This underscores the mechanics of encoding.

  • Further Reading Resources

Understanding gzip Compression - pingdom

Insight into Character Encodings - W3C

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

The transparent sticky navigation bar isn't functioning as intended

I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: https://i.sstatic.net/lexRl.jpg Here is how I copied the code: CS ...

htmlcssbootstrap-4

identifying the :hover state of a link that has a distinct ID

If I were to have the code as follows: .nav > li.dropdown.open.active > a:hover and I needed to target the same style for a link 'a' with the unique id #futurebutton, what would be the correct syntax? Would it not be?: .nav > li.d ...

css

Top align a flexbox layout with three columns

I am facing a challenge in aligning my 3 columns at the top with multiple "rows". When I apply the CSS property align-items: flex-end;, I achieve the desired layout, but the elements are aligned at the bottom. However, if I attempt to use align-items: flex ...

cssflexbox

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

htmlcssweb-applicationsuser-interfaceuser-experience

Centered image inside a div with an unknown height and width

I am trying to center an image using a CSS Trick, even when the image size is random and not fixed. I don't want to make the image responsive, but rather bring it to the center without changing its actual pixel dimensions. Here is my code: HTML: &l ...

jqueryhtmlcss

What steps can I take to satisfy Chrome's rendering of inputs (an image and a text input)?

Visit to see a text input field and an image submit input. Initially, these elements were arranged inline without any formatting issues. However, a recent change has caused the text input to appear on the left of the image input. This alignment is still ...

htmlcssgoogle-chromecross-browser

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Currently, I'm working on a project that involves combining navigation and a video player within the same div container. Here is an image link And another image link The concept is that when you click on one of the four boxes, a new video will appe ...

javascriptjqueryhtmlcss

Use CSS alignment to combine both the profile picture and title on a webpage

Is there a way to seamlessly integrate a profile picture with text (title) on my tumblr theme? My main challenge lies in getting the alignment right. Additionally, I want it to look good in responsive view. If the title becomes too long, it should wrap un ...

htmlimagecssalignmenttumblr

Error: Cannot import CSS because the window object is not defined

Encountered an error while trying to import CSS in a React JS application: This application functions as a dashboard, with Node.js on the server side and React JS on the client side. webpack.base.js module.exports = { // Configuring Babel for all fi ...

cssreactjswebpackless

Unable to hide the mobile menu button

https://i.sstatic.net/5rdYY.pngI am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My g ...

javascriptjqueryhtmlcss

What is the best way to place an icon in the lower right corner of a design

I have encountered an issue while building the testimonial section below. The problem arises when the amount of text in each block is not the same, causing the quote icon to be displayed improperly in the bottom right corner. Sometimes, it even extends out ...

htmlcssbootstrap-4

"Fixing the TopMenu in ASP.NET: A step-by-step guide

No Fixed https://i.sstatic.net/84wsi.png Fixed https://i.sstatic.net/y0NVY.png Layout Issue (_Layout Side) <div style="text-align:center; max-width:1200px; min-width:1200px; min-height:30px; padding:5px 0; text-align:left; left:26.3%; position:fixe ...

javascriptc#htmlcssasp.net

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

`Turn a photo into a circular shape by cropping it`

Even though I know that the solution involves using border-radius: 50%, it doesn't seem to be working for my situation. In my code using React/JSX notation, this is how the icon is displayed: <i style={{ borderRadius: '50%' }} className= ...

javascripthtmlcssreactjsicons

What is the best way to ensure that an input tag within a fieldset tag is required

I am currently working on creating a sign-up page using HTML and JavaScript. However, I am facing an issue with making the input tag required in the HTML code. The following code snippet does not seem to be working as expected: <input type="email" requ ...

javascripthtmlcssinputfieldset

HTML - header banner with missing links

Currently in the process of learning web development and constructing a practice website, I have encountered some challenges. Specifically, I am attempting to add a background/banner behind the section containing links to other websites. I believe that I h ...

htmlcsshyperlinkheaderbanner

"Error: Tooltip z-index is not properly displayed and is hidden beneath

Currently, I am facing an issue with a tooltip displaying when hovering over navigation elements. The problem is that while the tool tip appears over the element being hovered on, it displays underneath all other elements as well. (To clarify, imagine a na ...

htmlcssbootstrap-4tooltip

Is it possible to prevent a line break in a div tag, or are there other options available?

On my ASP.NET 4 / VB website, I encountered a scenario where I needed to incorporate a class called "noprint" in my footer, as specified in the print.css file. However, there was already a span class present, so I ended up enclosing div tags around it. Mor ...

javascriptasp.netcssstylesheet

What is the best way to insert a "Read More" link following a short snippet of text

I am looking to implement multiple "read more" links to enable users to continue reading after a specified amount of text, such as 1000 words or 2 paragraphs. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script&g ...

javascripthtmljquerycss

Tips for adjusting webpage layout automatically based on window dimensions?

As someone who is new to web development, I am in search of a simple solution that allows my developing page to dynamically resize according to the window size without disrupting the layout. Additionally, I am trying to center the page, but experiencing is ...

csshtmllayoutresize