3

I'd like to perform a live demonstration where the same web page, created two different ways are loaded at the exact same time, side-by-side.

... the purpose of this is to demonstrate speed differences between various frameworks or approaches to building web pages. Instead of presenting benchmark results, I'd like to show what speed differences actually look and feel like.

I know that I can create a Chrome extension to do this, but I'm wondering if I'm overlooking some simple way to accomplish this without writing code?

Note: (in response to comments below) I already have the two web pages hosted at different URLs (for example http://localhost:4400 and http://localhost:4401). This question is not about how to serve two pages, it's about how to load them simultaneously and side-by-side.

2
  • 1
    Your question is not clear. Its not possible to have 2 versions of a website if they are the same website. Do what everyone else does. Have your live website in one directory and the other version in another.
    – Ramhound
    Jan 17, 2015 at 22:04
  • Like @Ramhound suggested: http://mysite/old_way/ in one tab then http://mysite/new_way/ in another tab .. keep in mind you'll have to account for latency since you're trying to demonstrate a 'side-by-side' comparison on the same box (i.e. traffic from both 'sites' is being transferred over the same 'interface' so if one site loads faster, it might not necessarily be the site's 'code', more your computer handling those requests first over the other).
    – txtechhelp
    Jan 17, 2015 at 22:26

3 Answers 3

2

You could try the following bookmarklets.

  1. Just create a bookmark with one of the following urls and add it to the bookmarks bar

  2. Navigate to the page you want to demo.

  3. Click the bookmark and the page will reload in two frames side by side.

Note: For some reason this doesn't work on superuser.com

Split Vertically:

javascript:document.write('<HTML><HEAD></HEAD><FRAMESET COLS=\'50%,*\'><FRAME SRC=' + location.href + '><FRAME SRC=' + location.href + '></FRAMESET></HTML>')

Split horizontally:

javascript:document.write('<HTML><HEAD></HEAD><FRAMESET ROWS=\'50%,*\'><FRAME SRC=' + location.href + '><FRAME SRC=' + location.href + '></FRAMESET></HTML>')
2
  • any reason for the down vote?
    – Shazvi
    Jan 18, 2015 at 2:31
  • I didn't downvote (+1 in fact), but interesting idea. Would have to replace location.href with different URLs though.
    – Gil Birman
    Jan 18, 2015 at 5:55
1

If it's 2 websites you want to show, why not create a third one with only 2 frames in it? Each frame containing the different websites you want to show. Then open this file.

1
  • Thanks this solution sounds pretty reasonable. If anyone comes across this solution keep in mind that it might be necessary to serve the pages from different domains (like localhost vs 0.0.0.0) to convince the browser to load the iframes asynchronously.
    – Gil Birman
    Jan 18, 2015 at 5:52
1

You could try Split Screen and configure the defaults to load the pages you want.

enter image description here

Not the answer you're looking for? Browse other questions tagged .