1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Should I make one request for the whole web site or separated requests, which is better

Discussion in 'HTML & Website Design' started by ketting00, Feb 10, 2020.

  1. #1
    Hi guys,
    I've just learned that you can make just one request to the server for the whole website like a trick below:
    <!doctype html><html lang="en">
    #Head
        #CSSfile
      
    <body>
    #Navigation_main
    #MainContainer
    #Footer
    #JSfile
    </body></html>
    Code (markup):
    In this case, I send just one request for a simple html file to the server.
    At the server, I replace a hastag like #Footer with block of code like something below:
    <div id="footer">
        Footer Stuffs
    <div>
    Code (markup):
    Now, I was wondering if it is better than a normal html file like example below:
    <!doctype html><html lang="en"><head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
      
        <link rel="stylesheet" href="/css/styles.css" media="screen,projection,tv"> <!-- This sends another request -->
      
    </head><body>
        <div id="navigation_main">
            <h1>Site Name</h1>
        </div>
        <div id="mainContainer">
            BLAH BLAH BLAH BLAH & BLAH
        </div>
        <div id="footer">
            Footer Stuffs
        <div>
      
    <script src="/js/main.js"></script> <!-- This sends another request -->
    </body></html>
    Code (markup):
    My concern is speed and overall performance, so which one is better since you can read files asynchronously today.
    Thank you,
     
    ketting00, Feb 10, 2020 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I bet if you look at your network traffic using developer tools you're still making a ton of requests.

    The only way I could see you getting a page to load with a single request is to have all css and js on the page, all images are inline and not separate files - it's essentially what angular does

    The big question is why don't you want content cached?
     
    sarahk, Feb 10, 2020 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Thank you Sarah,

    That's good info. Keeping them coming up...
     
    ketting00, Feb 10, 2020 IP
  4. scu8a

    scu8a Greenhorn

    Messages:
    81
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    15
    #4
    That reminds me a bit of when I used server-side-include-files on a massive project back in the day. Developers would also use frames on the client-side UI to speed up response times without the end-user having to reload the entire page. I've worked on project that would essentially do the same as what you're doing but using XML. I vaguely remember seeing hashtag placeholders in another language, ...I think... well, if you've got a massive web site that needs to get up and running fast, you could create and easily manage templates using server-side includes, and/or client-side frames.

    If you're using a 14.4K dial-up modem (I've been using America Online since 1996 and I've got an Intel DX2 i486 desktop computer to run Windows 95!), you probably want to send and receive as little data as possible. Just let some computer elsewhere handle the work. I like redundancy. If you distribute your demands across multiple systems, that helps ensure up-time redundancy, efficiency, and it can also provide a security benefit in the event of a breach or loss. Just distribute all the work to other independent systems. That's what comes to mind...
     
    scu8a, Feb 10, 2020 IP
    ketting00 likes this.
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Thank you,

    That's very useful information. I have no idea if what I'm doing a server side include or not. I'm doing something similar to Gulpjs here: https://gulpjs.com/

    But instead of using a library I write my own code and it's much much lightweight than them.
     
    ketting00, Feb 11, 2020 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Do you have a link to the source you got this... gibberish from? I have absolutely zero clue what you're even talking about, or what the code you shared filled with # is even supposed to do; apart from being invalid markup that no browser or server-side software I'm aware of would do anything with.

    Is that some sort of template system or something?!?
     
    deathshadow, Feb 11, 2020 IP
    sarahk likes this.
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Yes, it begins with this page: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

    But I write all the code by myself without looking at them code and go further a bit.

    It is just javascript after all. You can view pretty much everything on the console and you can manipulate anything as you wish.

    My example code is just a mock up though.
     
    ketting00, Feb 12, 2020 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #8
    I think I maybe misunderstood what you're doing.

    You're not trying to get the content with a single request - you're trying to load a page and then change the content using ajax, right?

    The main downsides with that approach are that
    1. users see a single url which makes it harder to share content, bookmark content.
    2. search engines probably don't see all your content
     
    sarahk, Feb 12, 2020 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    deathshadow, Feb 12, 2020 IP
  10. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #10
    Thanks @sarahk I didn't think of that

    I just send a request for page load normally, but since it's a node.js you can monitor incoming requests on the server
    Let's me explain further a bit. Look at this normal request for page load:
    http//www.mysite.com/video.html?video_id=5
    Code (markup):
    and at the server, you can see inbound requests like this:
    /video.html                            //=> a request for page load
    /videos/How%40To%40Get%40Rich.mp4      //=> a request for a video which ID = 5, %40 is spacing
    /images/previous.png                         //=> a request for a thumbnail image of prvious video
    /images/next.png                             //=> a request for a thumbnail image of the next video
    /js/main.js                                   //=> a request for a JavaScript file that do awesome stuffs on the page
    /css/style.css                             //=> a request for a CSS file to make the page look fancy
    Code (markup):
    And here's how I can eliminate these requests.
    Look at this code:
    ...
    <body>
       @@include('./header.html')
       Content
       @@include('./footer.html')
    </body>
    ...
    Code (markup):
    If I put @@include('./css/style.css') in the header.html file you won't see a request for a CSS file on the server console.
    This is also true if I put @@include('./js/main.js') in the footer.html.
    So if I put @@include('./videoContent.html') on the page I can eliminate all requests for videos and thumbnail images.
    What do you see in the console is just:
    /video.html
    Code (markup):
    Now, I'm confused should I send a bulk payload on a single response or do it normally.

    Thank you,
     
    Last edited: Feb 12, 2020
    ketting00, Feb 12, 2020 IP
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #11
    So when you view the source you see that style.css is on the page, right?
    Which means that it's not cached
    That's ok if you're brutal with your styles and only have the ones that are relevant to that actual page
    Most of us aren't, we have one style.css and we have it cached and every page calls the exact same file.
    I don't see a huge benefit in spending the time making sure the right styles are included and having it all on the page.

    If your users are still on dial-up, or 2G networks there may be a benefit in tight, small pages - but you could end up with huge, wallowing, bloated pages just as easily with this technique.
     
    sarahk, Feb 12, 2020 IP
  12. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #12
    Yes, thank you. Your input is very helpful.
     
    ketting00, Feb 12, 2020 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Whilst I'm still utterly lost in what you're talking about, if it's putting style into the markup /FAIL/ at web development.

    You'd be better off using HTTP/2 push
     
    deathshadow, Feb 13, 2020 IP
  14. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #14
    Thank you for all the inputs. I'll see if I can cache data by manipulating the response headers and eliminate request along the way.
     
    ketting00, Feb 13, 2020 IP