http client needs to access nginx twice to load css file

Question

I have the next situation. I have nginx and uwsgi configured. And have simple html page:

html = """

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>GET handler</title>
   <link rel="stylesheet" type="text/css" href="http://192.168.136.129/css/style.css" >
</head>
<body>
   <table>
      <thead>
      <tr>
         <th>Parameters</th>
         <th>Item</th>
      </tr>
      </thead>
      <tbody>
         {}// Here python adds parameters.
      </tbody>
      <tfoot></tfoot>
   </table>
</body>
</html>"""

This page is modified by python script with uwsgi server. The problem is that such configuration leads to the situation when client needs to access nginx twice: first to load html, next to load css external file. If I dont configure nginx to load css files separately and put css file from local folder like this:

<link rel="stylesheet" type="text/css" href="../css/style.css" >

nothing works. I surfed stackoverflow site and people say that I need to relate to http server once again to load css. I consider it inefficiently. Is there any way I can load CSS file together with html?

abarnert · Accepted Answer · 2015-05-05 20:38:27Z

3

This is inherent to the way HTTP works. A web page usually requires multiple requests—to load the .html, and the .css, and often one or more .js scripts, and maybe some .png images, and so on.

HTTP/1.1 at least allows the browser to pipeline all those requests over the same single TCP connection (or occasionally two connections in parallel) instead of making a whole bunch of separate connections. And web servers have spent the past few decades optimizing to deal with that.

HTTP/2 allows multiplexing multiple requests into the same stream, which is intended to solve this problem. Which is great, but since it was just ratified a couple months ago and most servers, browsers, and clients don't support it yet (or only do so experimentally), for now, you have to live with 1.1.

There are tricks you can do to work around this, but they're usually not worth it. There are ways to include both css and js directly in the page. For other resources, you can convert them into data: URLs (so when the browser "requests" the image, it doesn't have to go back to the server, it just has to unpack the data contents locally). So, you can dynamically generate an "all-in-one" file for each request out of the separate static files, and then cache it.

answered May 5, 2015 at 20:38

abarnert

368k54 gold badges626 silver badges691 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abarnert Over a year ago

It's worth mentioning that there are other benefits to HTTP/2, as well. For example, if the server knows your browser is going to need that .css file before the browser does, it can start pushing it before the browser even asks for it. The FAQ does a good job explaining the rationale for all the changes.

Collectives™ on Stack Overflow

http client needs to access nginx twice to load css file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related