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

ChrisjChrisj · March 26, 2015, 10:12pm

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-->

Rubble · March 26, 2015, 10:17pm

I would guess the best way to improve speed would be to load thumbnail images from the videos and if the user selects one they are either taken to the video page or the video loads in the same page.

John_Betong · March 27, 2015, 12:30am

I have updated a demo where thumbnails, title, blurb, video length, etc are extracted from YouTube videos. Extracted information populates an array and the results displayed. A chevron link overlays the thumbnail and clicking activates the video.

http://www.johns-jokes.com/downloads/sp-d/ChrisJChrisJ-videos/

Source is shoiwn at the bottom of the page.

ChrisjChrisj · March 27, 2015, 2:22pm

Thanks for your reply.
I believe code shows that the “video loads in the same page” already.
Any additional help improving my html will be appreciated.

Rubble · March 27, 2015, 3:25pm

If you are loading lots of videos any modifications to your html code is going to have very little effect.

I notice everything below

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

Could have the html/css improved to save calling up the font specifications so many times.

Mittineague · March 27, 2015, 3:31pm

Agreed ++

Lose the Font tags

Do not use this element! Though once normalized in HTML 3.2, it was deprecated in HTML 4.01, at the same time as all elements related to styling only, then obsoleted in HTML5.

ChrisjChrisj · March 27, 2015, 3:53pm

Thanks for the replies.
Can you give me an example of how to code, say for example, vbox3, which has three different fonts in it?

Mittineague · March 27, 2015, 4:06pm

I would replace the font tags with spans, give them class values, and assign the styles to those classes with CSS

ChrisjChrisj · March 27, 2015, 6:55pm

Thanks for your message.
An example of that would be greatly appreciated

ChrisjChrisj · March 27, 2015, 11:15pm

Any tips on what I should do to help multiple videos load faster on a web page, would be greatly appreciated. I did a gtmetrix report and got an F for “Avoid Bad Requests”, "Specify Image Dimensions and “Defer Parsing of JavaScript”. Any insight or tips you like to share will be welcomed.

websitemedia · March 31, 2015, 12:51pm

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 Site Point contact page.

Good Luck,

Braulio

system · June 30, 2015, 8:05pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.