Looking for help with improving my html to help speed up the page

This page is intended to load/show/play several small vid players.
I understand that images and video will slow a page load down, but I know my html needs improvement too.
If you'd simply like to provide advice or just show me what you'd do with a portion of this, I'd appreciate any/all help with it.

<div id="inner-templates-container">
<div class="vbox">
<div class="vbox1">

<div id="content">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="135" height="130" type="video/mp4" poster="../1video/Mary-Ann.jpg" src="../1video/Mary-Ann.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<div id="content1">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="130" height="125" type="video/mp4" poster="../1video/Lauren.jpg" src="../1video/Lauren.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<div id="content2">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="130" height="125" type="video/mp4" poster="../1video/Ron.jpg" src="../1video/Ron.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<div id="content3">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="130" height="125" type="video/mp4" poster="../1video/Chris.jpg" src="../1video/Chris.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<!--2nd Row>-->
<div class="vbox2">

<div id="content4">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="130" height="125" type="video/mp4" poster="../1video/Vic.jpg" src="../1video/Vic.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<div id="content5">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="135" height="130" type="video/mp4" poster="../1video/Julie.jpg" src="../1video/Julie.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<div id="content6">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="130" height="125" type="video/mp4" poster="../1video/Carlos.jpg" src="../1video/Carlos.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

<div id="content7">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
<video width="135" height="130" type="video/mp4" poster="../1video/Lori.jpg" src="../1video/Lori.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

</div><!--vbox2-->
</div><!--vbox1-->


<div class="vbox3">
<div class="headline"><font-face="arimo" font size="5px" color="#be7e7e">text text text text text text</font><br />
<font size="3px" color="#696969" font face="Arial">text text text text text text<br /> text text text text text texttext text <br /> text text text
text text text text text text</font><br />
<font size="3px" color="#cccccc" font face="Century Gothic">< &nbsp;text text</font></div><br />

<div class="headline1"><font size="5px" color="#ababab" font-face="arimo">text text text&nbsp;&nbsp;<img src="themes/default/images/Films8.png" vertical-align="bottom">&nbsp;&nbsp;text text text</font><br />
<font size="3px" color="#696969" font face="Arial">text text text text text text<br /> text text text text text text
text text text text text </font></div><br />
<br />

</div><!--vbox3-->
</div><!--vbox-->


<div class="home-bottom1">
<div class="home-bottom2"><br /><br />
<img src="../themes/default/images/61.png"><br />
<br />
<br /><a href="../v1.php"><font size="3" color="#ffffff" font-face="arimo"> text text text text text text</font> - <font size="3" color="#ffffff" font-face="arimo">text</font></a><br />
<font> text text text text text text</font> <font size="2" color="#464646" face="arimo">textexttext</font> text text text <br />
<a href="../v1.php"><font size="2" color="#F2F2F2" font-face="arimo"> text text text text text text</font></a>
</div>


<div class="home-bottom2"><br /><br />
<img src="../themes/default/images/62.png"><br />

<br /><a href="../v1.php"><font size="3" color="#ffffff" font-face="arimo">text text text text text text</font></a><br />
<font>text text text -</font> <font size="2" color="#464646" face="arimo">text text</font> text text text <br />
<a href="../v1.php"><font size="2" color="#F2F2F2" font-face="arimo">text text text </font></a>
</div>

<div class="home-bottom3"><br /><br />
<img src="../themes/default/images/63.png"><br />
<br /><a href="../v2.php"><font size="3" color="#ffffff" font-face="arimo">text text</font> - <font size="3" color="#ffffff" face="arimo">text text</font></a><br />
text text text text text text text text text text text text text text text text text text text text text text text text<br />
<a href="../v2.php"><font size="2" color="#F2F2F2" font-face="arimo">text text text</font></a>
</div></div>


<div class="home-bottom">
<center><table><tr>
    <td><a href="../index.php"><font size="3" color="#F2F2F2" face="helvetica" style="margin-left: 30px;">home</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../page.php?page=1b"><font size="3" color="#F2F2F2" face="helvetica">faq</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../join11.php"><font size="3" color="#F2F2F2" face="helvetica">register</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../[var.login_out_link]11"><font size="3" color="#F2F2F2" face="helvetica">login</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../upload"><font size="3" color="#FF9912" face="helvetica">upload</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../page.php?page=1x"><font size="3" color="#F2F2F2" face="helvetica">contact</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../page.php?page=1y"><font size="3" color="#F2F2F2" face="helvetica">terms/privacy</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="../page.php?page=5z"><font size="3" color="#F2F2F2" face="helvetica">feedback</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td><a href="../page.php?page=1a"><font size="3" color="#F2F2F2" face="helvetica">tell-a-friend</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr></table></center>
</div>
</div><!--inner template-->

HTML:

 

Well...

You have an insane amount of divs, for no reason. Concoct, and use the list instead - and why an ordered list? Is it important that they're numbered, or in sequence?
Second, you have an insane amount of font-tags - those are... not recommended - use CSS for styling.
Third, the table at the bottom, why is that a table? That looks like a menu, and it's definitely not tabular data.

Here's a quick clean-up of the HTML - no CSS, that you'll have to do yourself:

<div id="inner-templates-container">
  <div id="content" class="tn3gallery">
  <ul>
  <li>
  <video width="135" height="130" type="video/mp4" poster="../1video/Mary-Ann.jpg" src="../1video/Mary-Ann.mp4"></video>
  </li>
  <li>
  <video width="130" height="125" type="video/mp4" poster="../1video/Lauren.jpg" src="../1video/Lauren.mp4"></video>
  </li>
  <li>
  <video width="130" height="125" type="video/mp4" poster="../1video/Ron.jpg" src="../1video/Ron.mp4"></video>
  </li>
  <li>
  <video width="130" height="125" type="video/mp4" poster="../1video/Chris.jpg" src="../1video/Chris.mp4"></video>
  </li>
  <li>
  <video width="130" height="125" type="video/mp4" poster="../1video/Vic.jpg" src="../1video/Vic.mp4"></video>
  </li>
  <li>
  <video width="135" height="130" type="video/mp4" poster="../1video/Julie.jpg" src="../1video/Julie.mp4"></video>
  </li>
  <li>
  <video width="130" height="125" type="video/mp4" poster="../1video/Carlos.jpg" src="../1video/Carlos.mp4"></video>
  </li>
  <li>
  <video width="135" height="130" type="video/mp4" poster="../1video/Lori.jpg" src="../1video/Lori.mp4"></video>
  </li>
  </ul>
  <div class="headline">
  <p>Text text text text text</p>
  <p>text text text text text text</p>
  <p>text text text text text texttext text</p>
  <p>text text text text text text text text text</p>
  </div>
  <div class="headline">
  <p>text text text <img src="themes/default/images/Films8.png"> text text text</p>
  <p>text text text text text text</p>
  <p>text text text text text text text text text text text</p>
  </div>

  <div class="bottom">
  <img src="../themes/default/images/61.png">
  <a href="../v1.php">text text text text text text - text</a>
  <p>text text text text text text <span>textexttext</span> text text text</p>
  <a href="../v1.php">text text text text text text</a>
  </div>
  <div class="bottom">
  <img src="../themes/default/images/62.png"><br />
  <a href="../v1.php">text text text text text text</a>
  <p>text text text - <span>text text</span> text text text</p>
  <a href="../v1.php">text text text</a>
  </div>

  <div class="home-bottom">
  <ul>
  <li><a href="../index.php">home</a></li>
  <li><a href="../page.php?page=1b">faq</a></li>
  <li><a href="../join11.php">register</a></li>
  <li><a href="../[var.login_out_link]11">login</a></li>
  <li><a href="../upload">upload</a></li>
  <li><a href="../page.php?page=1x">contact</a></li>
  <li><a href="../page.php?page=1y">terms/privacy</a></li>
  <li><a href="../page.php?page=5z">feedback</a></li>
  <li><a href="../page.php?page=1a">tell-a-friend</a></li>
  </ul>
  </div>
</div><!--inner template-->

Code (markup):

You'll see that quite a lot of classes are removed, so are some IDs - if those are needed, they can be added back to existing elements (for instance the <li>-tags). The total byte-count is approximately halved, the html is cleaned up, and the line-count is reduced by about 100

 

All modern browsers support and automatically negotiate gzip compression for all HTTP requests.

Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource (videos in your case), reduce data usage for the client, and improve the time to first render of your pages. See text compression with GZIP to learn more.

Alternatively, consult the documentation for your web server on how to enable compression:

• Apache: Use mod_deflate
• Nginx: Use ngx_http_gzip_module
• IIS: Configure HTTP Compression

 

PoPSiCLe has it right that you've got endless pointless DIV for nothing, and the use of OL/LI is utter and complete gibberish since if there's only one list item for each list, what makes ANY of them a list? Honestly given that NONE of it is flow content with no descriptor text I would probably end up axing everything EXCEPT the video tags.

Though I'd probably end up with the same amount of code if not more thanks to the idiotic halfwit BS that is HTML 5 VIDEO, since where are your other two file formats you should be supporting?

... and FONT? Really? what is this, 1997? PoPSiCLe said they're "really not recommended" -- that's an understatement since they've been invalid code on new websites since 1998!!!. The same can be said of "CENTER", the use of tables for layout, non-breaking spaces and line-breaks doing padding's job... I mean looking at this do you even HAVE an external stylesheet as it looks like you've been working in some sort of WYSIWYG?

I couldn't even START to try to rewrite that without knowing what the content is and what you are trying to do with it -- but guessing wildly all the DIV and list around those VIDEO tags I'd throw in the trash, and all your font/br/nbsp garbage below would be replaced with numbered headings, paragraphs, and MAYBE a DIV or two with classes on them.

It basically looks like you've fallen into the trap of writing your HTML based on what you want it to look like, instead of what things ARE. There's this term "semantic markup" that is little more than a sick euphemism for "using HTML properly" -- we use it so as not to offend people who refuse to extract their craniums from 1997's rectum... What it means is that the tags in HTML have MEANINGS. These meanings are why you should choose your tags. If you are choosing your tags based on what they make things look like you are choosing all the wrong tags for all the wrong reasons -- you want to worry about what things look like, that's CSS' job. Putting CSS into an external file can mean it's cached across page-loads making return visits possibly faster. If you put the appearance of all pages into a single file it can make all your sub-pages load faster...

Though if you are having speed problems, fixing the above markup likely wouldn't make THAT big an impact. It most certainly should be dragged kicking and screaming at LEAST up to practices circa 2003, but if you are having page load issues it is likely they are somewhere else in your site... are you leveraging cache properly by keeping static non-markup stuff out of your HTML? How many separate files are being loaded on a page? How many separate stylesheets do you have per media target (the proper answer would be one)? How much scripttardery is the site loaded down with?

Is the above code bloated? Yes. Should it be fixed and modernized? Yes. Is it likely the cause of slow pageloads? eh..... unlikely, but I'd have to see the entire page that's from to say for certain. It's far, FAR more likely you've got poorly optimized images and too many separate files involved. Remember, the more separate files you have on a page the slower it will load REGARDLESS of connection speed, and instead be more based on how long the request takes (which is typically in parallel to "ping time" to the server). That's why having for example a dozen or more separate javascripts and a half dozen or more stylesheets is the road to failure. If you have less than 24 separate files on the page you are probably alright, more than that and handshaking is gonna kill you.

 

ChrisJ,

We have summarized the lessons learned in speeding up our page loading speeds. The summary for your use is here.

The test platform that we are using is Google PageSpeed Insights tool. You can use it to track your improvements. Take a reading as is, make a change and take another reading to see the improvement. Make another improvement, take another reading to see the improvement.

Contact me directly via my Digital Point contact page.

Good Luck,

Braulio

 

I'm not good at markup and CSS things. So let's the others do that consultation.

But images and videos are not necessary slow. Look at you tube for instance.

If you are serious about this issue use rtcDataChannel and file reader API. It doesn't use compression but read file as blob, slice it on the way as it read, transfer data in chunks, reassemble them along the way until finished the job. With that, I can load a 1GB movie file from a server in mere minutes.

Yes, it's 1GB full HD MP4 file. And all are done with few javascript lines if implement properly. But if you are not familiar with file reader API and rtcDatachannel, that's quite long story.

 

Actually, @ketting00 made a point that made me look back at it...

ARE YOU REALLY putting all those videos on a single page? LOOK at youtube; LOOK at videoBash or any other video site. Look at Porn sites...

They don't do that. They put up a static picture or mouse-over slide-show and when you want to actually watch a video, they open it on a page all by itself. They do this for a reason...

So the browser doesn't start trying to load all those videos at the same time in the background. Well there's your problem!

If your code is LITERALLY that, no wonder you are having problems. You don't put 8 separate videos loading en-masse without any sort of "traffic control" in place. (traffic control is what FB does using scripttardery to neuter video data throughput when they aren't focused). That's just asking to choke out the connection and/or have issues. There's a reason Youtube and it's ilk don't work that way, and instead open a new page. (or use scripting to replace the contents of the current page) to actually view a video.

Big tip: if you are having problems doing something, look at how the big success stories handle it.

 

Wow, useful info. I never know about that, but I do know how to make it fast. That's actually brain-boosting food.

I once came across an Aussie guy who crazy enough to send data near a speed of light with JavaScript.

 

I am very interested in learning web design. For that, I started to learn HTML basic. At this moment I can't understand in this section
<video width="130" height="125" type="video/mp4" poster="../1video/Vic.jpg" src="../1video/Vic.mp4"></video>. Here You write "../1video/Vic.jpg". Please tell about "..". What is the meaning and necessity of this two dots in HTML code?

 

Uhm, really? That is *nix (Linux/Unix) for "up one folder from current location" and then load the content from that location and then 1video/vic.mp4 - so, if your website is residing in a subfolder under your domain, for instance like this:
www.domain.com/subfolderforwebsite/videoloader
but you have your videofolder placed at the root of the domain, like this:
www.domain.com/1video/files in here
then, to access that video-folder from the file "videoloader" you'd have to do ../1video/filename - if "videoloader" was in the root folder, like this:
www.domain.com/videoloader
all you'd have to do is "1video/filename" - regardless, both ways are bound to fail, and if you start learning about server-side code, like PHP, you should consider using complete URI-strings - like "http://www.domain.com/whateveryouwantgoeshere" - that can be achieved to cater for any type of installation based on server-side variables built into the system, so you could install your script wherever, and it would still work.

 

We may be confounding ourselves. The simple answer is that ".." addresses the parent directory. There is also the single dot, "." which addresses the current directory. These shortcuts apply in that legacy OS, Win*, also.

Why? Let's say you're several layers deep in your directory structure and you want to move a file from your current directory's great-grandparent to where you're working. To avoid having to type the entire path a couple of times, risking error, simply (using CLI in BASH; for DOS, use appropriate command and syntax) type

mv ../../../thefile ./

Code (markup):

In human talk, that says move "thefile" in the parent of the parent of the parent (the great-grandparent) to the current directory.

cheers,

gary

 

You might note some incredulity in the responses as to your not knowing this, the reason is this is the type of low level computer stuff you should have learned LONG before getting as far as writing HTML/CSS -- but don't worry about that; you didn't know. We can fix that.

The above explanations are correct, but as a rule of thumb if you have to resort to pointing "up-tree" to the parent directory with "../" there is probably something WRONG with your directory structure -- admittedly most people sleazing out websites wouldn't know proper directory structure from the hole in their arse.

Either way it's called "relative paths" as it's "relative" to the current directroy -- Just remember, src or href are "directory paths" -- hence if you have:

poster="/1video/Vic.jpg" -- points at the /1video directory from the root.

poster="./1video/Vic.jpg" -- points at the /1video under the current directory (there is usually ZERO legitimate reason to do this)

poster="../1video/Vic.jpg" -- points at the /1video under the parent of the current directory, aka a directory/folder that is a sibling to the current one.

To make that a bit clearer, let's make an example tree, where the file currently being served is in /data/pages

Tree               Raw/Absolute Path   Relative path from /data/pages
----------------------------------------------------------------------------
|                  /                   ../../
|
|-- data           /data               ../
|  |
|  |-- pages       /data/pages         ./
|  |   |
|  |   |-- video   /data/pages/video   "video/" or "./video"
|  |  
|  |-- video       /data/video         "../video"
|
|-- video          /video              "../../video"

Code (markup):

You can use either the raw path or the relative path to get to said folder/directory. Old school computer folks say "directory", crApple / windows generation kids call them folders -- same thing.

The above basically shows three folders with the same name in three different locations, and how you would get to them via the "raw" or "absolute" path, and where it would be relative to /data/pages

There's a command in many languages called "tree" that will show you your directory structure in this manner. In Windows there's a tree-view of the file paths available in the options for Explorer... and on some other window managers I usually end up screaming at the display "Oh for **** sake just show me a filesystem tree!" (yes crApple, I'm looking at you!) -- probably stems from my having been a Xtree Gold user for ages under DOS.

As I mentioned USUALLY if you have to use relative paths up-tree (pointing at parent directories/folders) you have not planned your directory structure very well. It can lead to headaches when you try to move your program/site, and is often sloppy/more code.

Something to remember too is that if it's HTML or JS, the "current" directory is the path the HTML file is served from, but if you use a path in CSS the current directory is the path the CSS is served from. This can get confusing, but can also be leveraged to your advantage.

My "normal" directory structure when building a site or custom CMS usually goes a little something like this:

/                          Root, contains all user-callable files HTML/PHP/ASP
/images                    Content images
/libraries                 JavaScripts and other includes relating to content
/sources                   PHP includes
/theme                     Theme template folders
/theme/themeName           CSS for said theme
/theme/themeName/images    Images unique to this theme
/theme/themeName/libraries JavaScript and other includes unique to the theme

Code (markup):

That's a bit of an oversimplification, but the general idea is that with ALL HTML or user callable files (like PHP) in the root, (or more specifically a single index.php through which I route ALL requests) means I never have to point up-tree with "../". My LINK tag for the CSS points to "theme/default/screen.css" for "screen,projection,tv", my HTML IMG tags can point to "/images" simply as "images/imageName.jpg", and in my external stylesheets it can point to "/theme/themeName/images" simply as "images/imageName.jpg" as well... which is good since different themes/templates may use different presentational images so keep the presentational images (CSS) separate from the content images (HTML IMG tag) and don't let the two mix.

Good organizational skills can go a LONG ways in doing this stuff, and usually if you see ../ being used, it's thanks to a lack of them. *NOTE* I said USUALLY! There are always exceptions. It's something that may come up and be forced on you, it's just not something you should plan for from the start.