ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Reply Subscription Options  

Page too large and loading takes foreverr

Forums: Questions and Answers About Building Your Site
Created on: 01/20/16 08:56 AM Views: 2620 Replies: 31
Wednesday, January 20, 2016 at 8:56 AM

I was wondering if you had any suggestions for my "40s-50s Christmas" page. It's gotten so large with videos, movies, photos, and text that it takes forever to load. I'm sure many of my classmates just give up and don't bother seeing what's new.

My original idea was to add to it each year, and I would like to continue to do so but as I say it takes too long to load. I really don't want to break it into smaller pages.

Thanks,
Carole

Reply
Wednesday, January 20, 2016 at 1:05 PM - Response #1

Yes, there are over 200 pages there and I would have given up if not for your question. Wink

The only way to get it to load in a reasonable amount of time is to make each section no more than about 5 pages assuming graphics and videos more or less as now. But that results in 40 pages, so here are ways to make it smaller yet.

I would take the time to make a "next" page section that lets the user go from one page to the next. Look at our "Bothell History" page to see what I mean. History has 7 "pages" and then one can select two more related areas. (Need to fix the +zoom that I accidentally broke)

The other choice is to make sub-menus but those are not as friendly.

In terms of just load time, videos take a large amount of time to just get a basic start (There are also quite a few videos that no longer exist too.). I suspect 1/2 of the time is just getting those videos started.

You could put the videos on dedicated pages - IOW not all on one page. The other way to get a large number of videos to load faster is the use JVideoPlayer which will load in the same amount of time regardless of how many videos are included Idea (See History/McMenamis for an example of that.)

The general goal is to consolidate many into "packets" of data. Just a 'front' loads and then when a user clicks they see more. That keeps load times fast and yet you have the same amount of data for users to browse.

(mobile users will get a fairly large data charge too Exclamation )
Carole I. Mackey wrote:

..I really don't want to break it into smaller pages.

Reply
Edited 01/20/16 1:07 PM
Thursday, January 21, 2016 at 12:33 PM - Response #2

Hi Carole,

Personally, I prefer pages that do not require members to scroll very far. If that would happen, I would normally add one or more pages by theme/category. In your case, one for cards and so on.

When it comes to cards and graphics, why not scale them smaller and give each a link to open in a new tab or window in the larger size? That would help in the load time and give the viewer the option to see it larger. Of course, you need to note to click on graphics so your members get used to doing so.

I do like Jack's idea of a "Next" link at the bottom of each page. Instead of "Next", I would include two links: Take me back to 40s-50s Christmas and the name of the page you chose to be next.

Also, Jack has a very good point. We should always consider that our members may be looking at a page on their mobile phone and it will affect their data usage. Some smart phone users do not realize how much data they have used until the bill comes. Ouch!

I see you have spent time on two decades of Christmas history, Carole! Well done! Smile


Reply
Thursday, January 21, 2016 at 12:40 PM - Response #3

A story with two photos scaled smaller but linked to open larger in a new tab or window is found HERE.


Reply
Thursday, January 21, 2016 at 1:00 PM - Response #4

FYI "Scaling" does not change the load time. The exact same amount of data is being loaded Idea Scaling is just a display size control, not a data amount control.

"Zoom Click" system on an image is much more user friendly. Sort of like the gallery system. Stays on the same page, no transfers, no clicking back where one started. See the McMenamins for an example or for that matter our home page. Other pages also have that but I broke it. I'll look at it today to see what I messed up. If we had an actual tech area I could show everyone how to easily do that IdeaIdea

Pretty sure the main load time culprit comprise the videos. Learned that from all the JVideoPlayer testing I did. Wink

Reply
Thursday, January 21, 2016 at 1:02 PM - Response #5

Site Admin Joe Prather shares #1 hits almost daily on Facebook as part of his career. For a very long time, I grabbed his info adding it to an alumni site as you will see in Memory Lane. It is not finished as I had other things requiring my attention.

Links are found on the Memory Lane page for two pages that are unrestricted for your viewing. All other links were removed as they would have taken you to my alumni site where all the pages are restricted.

EDIT: Moved pages to TAP - The Administrator's Place.


Reply
Edited 01/21/16 1:46 PM
Thursday, January 21, 2016 at 1:11 PM - Response #6

Jack,
I would be interested in seeing how you do this. Use Jing. It works like a charm unless you need more than five minutes. Smile

Jack Vermeulen wrote:

FYI "Scaling" does not change the load time. The exact same amount of data is being loaded Idea Scaling is just a display size control, not a data amount control.

"Zoom Click" system on an image is much more user friendly. Sort of like the gallery system. Stays on the same page, no transfers, no clicking back where one started. See the McMenamins for an example or for that matter our home page. Other pages also have that but I broke it. I'll look at it today to see what I messed up. If we had an actual tech area I could show everyone how to easily do that IdeaIdea

Pretty sure the main load time culprit comprise the videos. Learned that from all the JVideoPlayer testing I did. Wink


Reply
Thursday, January 21, 2016 at 1:57 PM - Response #7

I'd use Jing for an 'advertising' sort of quick overview showing the results more or less like beauty cream commercials. You put it on and you are 20 years younger.

So Jing is good for quick overviews in a very general way but really not useful for Technical details describing HTML/code interaction. CC uses that a lot, but it is no replacement for real documentation. Technical specs are one area that CC would benefit having 'old' updated fashioned specs. Plus the videos are way harder to update than real documentation.

For an example, look at the documentation for HTML! Short/long videos are not used to teach this sort of thing. It's a step-by-step learning curve following code examples. And it's always evolving. Heck even YouTube has had dramatic changes in the past 2 years. It was only the last year that they implemented API code that allowed me to create JVideoPlayer. There is no video by Alphabet on that either. But there are real documentation pages starting HERE The use of videos as candy/examples is just like one uses videos on a CC page. But NOT as documentation.

Anything that requires specific code details is just not video doable/applicable. One has to end up with something that actually explains each step that is static and easily reviewed.

I agree, that the first time for 'coding' is a hurdle. But it is a step that has to be taken. If one can't read tech docs then it's just not for that person. Tech stuff/coding is not for everyone just like I can't dance Twisted Evil

The links I gave to our site pretty much show how it works easier than a Jing video and one can play as much as one likes. Idea

Reply
Edited 01/21/16 11:39 PM
Thursday, January 21, 2016 at 9:31 PM - Response #8

Fixed the +zoom on the BHS history pages. Got sidetracked converting to a newer zoom script.

Reply
Thursday, January 21, 2016 at 9:49 PM - Response #9

Ah, good example of how user content determines whether on not a page is Responsive Exclamation

Fixed size tables will not adjust on mobile. Nor will the videos adjust.

JVideoPlayer can auto-adjust (make a video 'responsive') on mobile by using the 'autosize' option. Idea It can also compress the number of links required on pages as well as number of embeds (which slows things down for mobile).

The way to make a 'table' responsive is to use percent not absolute sizes (or comparable CSS which is preferred) for width specs.

Gwen Corey wrote:

I grabbed his info adding it to an alumni site as you will see in Memory Lane. It is not finished as I had other things requiring my attention.

Reply
Sunday, January 24, 2016 at 12:32 PM - Response #10

Thanks to you and Gwen for responding to my question concerning my 40-50s Christmas page. I was sidetracked with house guests and couldn't comment earlier to your suggestions.

First: I think I've trained my classmates to scroll further than 5 or 7 pages because of the topics I've covered on our site: Riverview, Radio Premiums, Chicago Neighborhoods, etc.

Mine is an "old" bunch who can read but can't seem to respond so to keep them coming to the site, I've had to discuss age-and-location-appropriate topics. Sometimes, I hit upon something that will elicit more of a comment than, "Thanks Carole;" but haven't been too successful too often.

I like your suggestion of moving page to page with "next" and think I can change the "Christmas" stuff into that format fairly easily; and most important, I think my classmates will be able to follow the new format without any problems. (Just reading this over for typos and wondering how so I change it to page to page--links?)

As for the videos that are broken, I knew they were but was too busy (lazy) to fix them. I didn't know that they were causing additional problems.

I couldn't find your History/McMenamis on your site. Using your J/Video Player sounded like a good idea so I'd like to see it and try to use it or "mobile" loads, which I have no idea what they are. I think you gave instructions for the J/Video Player a while back which I would have saved or could find on ClassCreator.

Again, thanks for your help. Can't wait to get started redoing the Christmas page. Ugh!=--it's more fun to do something new, but I have 10 months to work on this.

Thanks, Jack!
Carole

Reply
Sunday, January 24, 2016 at 12:44 PM - Response #11

Found "History/McMenamis." Does this have to be in this format: one under the other or can it be separated? I haven't worked with the J/Video+ so I don't yet know how it's set up.

Thanks, Carole

Reply
Sunday, January 24, 2016 at 12:44 PM - Response #12

This is Bothell History LINK (sublink in BHS-Bothell History)

This is McMenamins Link (sublink in same)

Here's link to topic on CC forum. In Building Blocks, but first post I made has had a lot of changes since then.

This is link to JVideoPlayer docs That's the actual generator - click on links for explanations.

Reply
Sunday, January 24, 2016 at 12:47 PM - Response #13

There are 3 different styles and two more with/without playlist showing. So six different ways. If you click on the new docs link I gave, there are examples of every single way it can display Cool

Carole I. Mackey wrote:

Found "History/McMenamis." Does this have to be in this format: one under the other or can it be separated? I haven't worked with the J/Video+ so I don't yet know how it's set up.

Thanks, Carole

Reply
Sunday, January 24, 2016 at 6:12 PM - Response #14

Whew! I have some homework to do.

Thanks so much,
Carole

Reply
Sunday, January 24, 2016 at 7:33 PM - Response #15

Overall just like inserting a YouTube Video. Idea The difference is there are more choices but those are pretty much point and click.

Here a demo using the videos on your first Fifty Folks combined into one playlist. So that makes that 1 page shorter. (Other videos can be done too, but need a bit more explanation.)

I just entered the links you had directly into the "generator", made video size the same as you used and set the playlist height to 76 since there are only 4.

Paste the code below in Source mode into a NEW test page and press Preview. You don't have to enter any align center, does that by itself. Options are automatically generated by the generator code. Don't have to know what they mean unless you are curious. Explained in docs.

You do not have to have a playlist showing, nor does it have to be on the bottom. This is just one example relating to your page. If you do not want the playlist showing, uncheck Showlist.

FYI: Many (most?) TV links and Upchucky no longer exists! But you can recreate all those using JVideoplayer. Actually a lot more convenient since it stays ON your page, does not transfer to another site and you have 100% control over content. It's fairly easy to get all the songs from the past via YouTube. There's a site John Ralph referenced that makes that real easy. It's a bit techie to get the playlists used, but not that hard either since you've done quite a bit of detailed work already on your pages.

Reply
Sunday, January 24, 2016 at 7:36 PM - Response #16

And I had a car like you showed, except it was a "hotrod" with a newer Buick V8 Twisted Evil

Reply
Sunday, January 24, 2016 at 7:50 PM - Response #17

Your page reminds me of another general idea I had.

Can you see a use for a "Gallery" program that combines images and lets you flip through them? Like Gallery Creator (and many other sites), but all the images would come from links you supply and everything would be under YOUR control, not some other site's rules.

Common Image source would be CC File Vault but technically could be anywhere. Would have automatic ZOOM. Similar to the example on Bothell McMenamins 'gallery' on the bottom. So you can stay on the page and not be transferred back and forth if you want to see a larger image.

Creating the embed code would work sort of like JVideoplayer, but simpler to create. Just give display size (or auto) and then add each image URL.

Not meant to replace Gallery Creator, just a different way to display data. Much data is not really suited for Gallery Creator - like a lot of the images on your 50's page - which come from offsite and thus take no vault storage Idea

Reply
Edited 01/24/16 7:50 PM
Sunday, January 24, 2016 at 10:03 PM - Response #18

Was the car red--it should have been, if not.

Reply
Edited 01/24/16 10:12 PM
Monday, January 25, 2016 at 9:09 AM - Response #19

Every youtube video I choose tells me the owner doesn't permit it to be used in embed players--even those I've made myself. What am I doing wrong?

(I'd be a lot further along with my learning if you didn't have all those Ricky Nelson songs on one of the examples. I keep getting sidetracked and have to listen to them again and again.)

Reply
Monday, January 25, 2016 at 12:07 PM - Response #20

Either one likes Ricky or they don't. Wink I pretty much like most popular songs from late '50s on.

Yes, some videos have 'embed' restriction. And some do not. For example, your existing page videos do not, as in the example above. VEVO is a mixed bag since that is a subscription service.

Your own video setting can be changed by you - 'info and settings' and then "advanced Settings". 'Advanced' settings should be any, allow embedding (first thing to check), no caption certification .. pretty much all just default values.

My "unlisted" and "private" work, however, I'm logged in to Google. Post a link to your video and I"ll see what it does for me. If it doesn't work, my guess is it has embedded disabled on the advanced setting.

Getting music videos is sort of a learned art. Fast method is to look for a category, for example '50's music'. Then retrieve Playlists made by others. That gets you huge lists very fast. Edit/delete those you do not want.

Here's one https://www.youtube.com/watch?v=tc295YaJ9Is&list=PLCFEB3C06C87F6748 Paste that link into JVideoplayer URL and it will retrieve all the 131 songs in the playlist. Exclamation (There are three are restricted - meaning you just got 128 songs.)

Looking for a specific song works too, but might involve trying multiple links. VEVO sources tends to be more restricted, however their playlists always appear to have a few that are not.

I have a playlist of about 1000 music videos that I use for testing created by retrieving lists like that.

Reply
Monday, January 25, 2016 at 2:57 PM - Response #21

I've tried at least 30 without finding one that would work. Now that I know that can happen, I'll keep trying. I thought I was doing something wrong with the generator. I put in the link you just sent and received a n> Video is not starting - connection? message but am enjoying listening to it. At least it's a change from a morning of Ricky.

You may remember my video:

I checked it, and it is marked embeding allowed so I'm not sure what the problem is. Some of the others I made give the same result. My thought was that the music accompaniment was preventing it from being embed in your player, but that's a guess.

I'll go back to my 50s page or to my Christmas page and try those.

Again thanks for your help and music.
Carole

Reply
Monday, January 25, 2016 at 3:04 PM - Response #22

It worked!!!!!! I should have stayed with my Christmas videos--the ones that weren't broken. Now I can fix my pages.

I have already broken them into segments to use the "next" procedure. Now I can fix the videos and lessen the page load further.

I thank you sooooo much.

Carole

Reply
Monday, January 25, 2016 at 3:24 PM - Response #23

Peanut link works for me. Since it's OK and you get an embedded not allowed error message, I have a suspicion that the URL being entered is incorrect in some way. That results in that error message (given by YouTube - not me). Also causes "video not starting message".

Make sure the URL line is Highlighted (just click the URL area till it selects/highlights) or clear it out before you paste in a Video URL. Any extra characters will interfere. There's sometimes an "index= " on some and that has to be erased. URL for now is either a PL (playlist) or a single ID. The index means it came from a playlist and that is the entry there. Could ignore the index stuff. I was not sure that all playlists would always be 11 characters - I'm learning myself on this.

Sometimes if there is a poor connection, you'll get the video not starting but usually it's a typo/syntax error on the URL. Best to wait a bit after it URL line says it's done loading. Connections vary all over the place and videos are the most demanding.

Press Ctrl+F5 to reload if somehow it doesn't load. Should work 2nd time if it's not a URL typo.

Try that playlist URL I gave above. It can make collecting songs a lot faster.

Reply
Monday, January 25, 2016 at 3:36 PM - Response #24

Excellent. With a bit of practice it should get easier. Very Happy

This site http://www.1959bhsmustangs.com/VideoJukebox.htm has collected a lot of 'old' music. Some of it is not original music, so you still have to dig out the junkie ones Twisted Evil

You can actually extract the playlists there in FF by right click, inspect element right by the video box. Those playlists look like this

The YouTube IDs are after ?playlist=. If you copy those entries you can paste them directly into JVideoplayer URL field. (full URL not required). This is just the playlist

For example, if you paste y2iFJmo-hak,L9-PN1sftaI,q04_ClDxRsk you will get three Elvis videos (if you copy them all, there are 97 there - instantly. Edit, actually 96, one is restricted now).

Reply
Edited 01/25/16 3:49 PM
Saturday, January 30, 2016 at 9:52 PM - Response #25

Just finished a 40-50s Christmas Favorite songs' list of 72 songs. How about that!

I'm really doing well with your generator. It sure is easy to use. I've been working on my Christmas pages--the easy ones first.

Thanks so much for your help correcting my huge 40s and 50s Christmas project. I think my classmates will be able to actually use it next year instead of falling asleep waiting for it to load.

Carole

Reply
Sunday, January 31, 2016 at 6:30 PM - Response #26

Thanks for giving me feedback. Will add some more checks to catch typos that YouTube either doesn't give the right message for or just plain stops.

Can't do it without you.

Reply
Wednesday, February 3, 2016 at 10:16 PM - Response #27

Just finished a long playlist - without a hitch - in The Cinnamon Bear.

Carole

Reply
Monday, December 4, 2017 at 10:08 AM - Response #28

Hey Jack, I am using Jvideoplayer and it works great on my computer, but I am having a problem on the iPhone saying that it is restricted from playback. I have tried Chrome and Safari. Do you have any suggestions?

Reply
Monday, December 4, 2017 at 2:41 PM - Response #29

I think the issue is that you have two video players on the page. One is created via an "iframe" (jvideoplayer2) and other is a regular one. (That is the correct way to do this and how you get more than one player on the same page - just explaining.)

For whatever reason, 'iframe' style players on iPhone,"i" etc stuff is "restricted" with that message yet it works on Android and PCs. (Technically it's an iframe inside of an iframe - since youtube code also generates an iframe).

So the solution right now is to remove the second player and make the first use the standard "JVideoPlayer" id.

Reply
Tuesday, December 5, 2017 at 5:18 PM - Response #30

Thanks Jack!!! I love this player!

Reply
Wednesday, December 6, 2017 at 12:19 AM - Response #31

Thank you - it's a fun project with a few challenges left.

I've been looking to see if anyone has a code solution for this, but haven't seen one yet. The only one now is to use one playlist per page and then used sub-pages for each list to get more.

Autosize (&vautosize=1) might work well for your RD design. That makes the video fit portable devices automatically - like RD does. The width is set to match the device's width.

You could also add MP3s. They work on everything and load very fast. There are programs to extract music from YouTube videos.

Reply
New Topic Reply  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.