Explore the community Forums Lectora Lectora Questions & Answers Responsive output is too slow

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #315415 Score: 3
    Profile photo of Elena Urbanova
    Elena Urbanova
    Member
    beginner
    intermediate
    friend finder
    contributor
    3 pts
    @eurbanova3379

    Hi,

    I don’t know whether someone experienced this problem in Lectora 16, but I have a course that contains about 80 buttons (2 sets of question of 10 + 4 choices each). But the amount of resources that is generated is really big which (I assume that is the cause) makes my page load too slow. Apart from that it doesn’t look good, the page is timed for 5 seconds of which at least half is gone when I finally see the question.

    Since there are 80 buttons -> times 3 (as in states) is 240 -> times 5 (number of possible devices/orientations) is 1200. This is the number of images generated (buttons only). And they are not very big, but I am not sure how they load (there is option checked to preload them).

    We tested it locally, so the bandwith can not be a problem. We also turned off the responsive output – that helped considerably, but we want it to be responsive.

    So it seems, that either the number of resources is the problem or the way the responsive output is generated. I think.

    Is there a way to improve the speed of such project?

    Thank you

     

    This post has received 3 votes up.
    #315426 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    13 pts
    @pjackson2462

    G’day Elena,

    This has been reported previously, we need more developers to vote on these so engineering will fix it ASAP.

    I have tried everything and on some pages I have 192 images that are exactly the same image and even though the page does not use the original image it is in the preload list so that’s another 4:-(

    Regards, Peter

    #315625 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    332 pts
    @ssneg

    Could you please share the title? I’d be happy to take a look and find ways to improve loading times.

    #315822 Score: 0
    Profile photo of Mark Spermon
    Mark Spermon
    Member
    beginner
    intermediate
    @mspermon9445

    Hi Elena,

    I’ve seen the same problem. In responsive courses with the standard Lectora Buttons and Shapes. Lectora generates new images for each page and each device. So the amount of images can add very quickly.

    A workaround is to make button images (.jpg or .png) outside Lectora and use them ore use a generated image form your published images folder. If you use this image on multiple pages Lectora there only one source image in your published project.

    Regards,

    Mark

    #315823 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    13 pts
    @pjackson2462

    G’day Mark,

    Unfortunately, I don’t follow your logic.  When I add an image button I’m asked to supply an image for 3 states, these images are added to the images list within the resources.  I also add a disabled image, therefore, there are only 4 images in the resources for a given button.  If I have multiple buttons via copy/paste then for each button I get 4 images for each button in the images (published) folder, I also get the original images that are in the resources list and these are added to the pre-load images list, even thought they are not needed.

    If I have a title with 100 buttons that use the same 4 images for the 4 states I will have 404 images created when I publish, so that’s 404 files that need to be fetched and downloaded from the server when we only need 4, this significantly increases the time it takes to load a page.  To add insult to injury, the original 4 files are .gif, 413 bytes, very small, the other 400 files are .png, 1,436 bytes.  That’s 410 KB that I do not need to download!

    I have tried all file formats and I get the same result.

    I’m surprised that this issue is not seen as important and the best way for us to let Trivantis know that it is important is for us to vote on a given post.  Therefore, I ask all members that read this and any post that they think is important, then they should vote on the post.

    Regards, Peter

    #315824 Score: 0
    Profile photo of Mark Spermon
    Mark Spermon
    Member
    beginner
    intermediate
    @mspermon9445

    Hi Peter,

    a workaround is to create your own button with Lectora actions. It is quite some work but saves the problem that the images are multiplied when you publish your Lectora course.

    Regards,

    Mark

    #315832 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    332 pts
    @ssneg

    The attached screenshot shows how many images are generated for a single text button in an RCD title. WOW, I did not know that. Out of curiosity, I went to check how many images are generated for LUC2016 app that I built. The answer is ZERO. I used textboxes with OnClick actions instead of buttons. I think this would be a viable workaround for Elena and others.

    I also think that Lectora are going towards SVG buttons and graphics, which means there will be no need for tons of images really soon.

    Attachments:
    #315841 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    332 pts
    @ssneg

    Now regarding Elena’s question of “how they load”.

    For each TEXT button, there are 20 images (5 views x 4 states). For each IMAGE button (including stock buttons) there are 23 or 24 images (3-4 original images plus 5 views x 4 states).

    This is what happens on loading every button:
    1. For text buttons, 4 states for current view are loaded. When a view changes, only 1 extra image is loaded (the default state for the new view). Other 3 images for this new view are only loaded as necessary (i.e. on hover, on click, and if the button is disabled).

    2. For image buttons, it’s the same except the 3-4 original images are additionally loaded the first time, and then never used.

    In other words, if you have 80 buttons, at least 1600 images will be generated. If you put 10 questions on a single page, 40 buttons (160-190 images) will be loaded.

    My advice is to avoid buttons, add actions directly to text boxes, and use Lectora’s standard questions. I’ve checked, even if you use custom image radio buttons / checkboxes for questions (to make them look good), no additional images are generated.

    #315848 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    13 pts
    @pjackson2462

    G’day All,

    Unfortunately, we do not need a work around, we just need the issue fixed and the best way for us to let Trivantis know that we think that this is a problem is to vote on a given post, I see that no one else has voted on the original post. Please, please vote on the original post and ask others to do so – please.

    BTW SVG buttons will be great for text buttons, image buttons are very easy to use when you already have the images:-)

    I know that I have said this before – The fix is easy, just add an option to the publish dialog to “Use resource images for image buttons” and do that when publishing. i.e. Don’t create new ones.  This way even RCD will have only 4 images, if the size changes with a different view then the browser will re-size the image – simple

    TIA

    Regards, Peter

    #315853 Score: 0
    Profile photo of Elena Urbanova
    Elena Urbanova
    Member
    beginner
    intermediate
    friend finder
    contributor
    3 pts
    @eurbanova3379

    Hi everyone,

    thank you all for your replies. We tried this: we substituted standard buttons for an image, over which we placed a transparent button and we attached actions to this button so that on mouse enter or exit we simulate the hover state (I think this is what Mark suggested). We don’t need the down state, so that was enough for us. That reduced the number of images considerably. Then we removed shapes and replaced them with images – that also helped.
    This got us to number of images in:

    Non-responsive project: 138

    Responsive project: 154 (there are few buttons we haven’t changed yet)

    The problem remains though with the responsive output. If we publish this project non-responsively, the speed is much higher – there is almost no visible transition between pages. But in the responsive output, there is about a second of white screen before the next page loads.
    So it seems to me that although reducing the number of resources helps, it is not the main cause of the problem. The problem seems to be in the way, Lectora generates pages for responsive version.

    @Sergey: I also attach here our project – if there was a way to improve its speed. Thank you.

    P.S. We were also browsing through various templates on this forum, and we haven’t found one that would be responsive and without this problem. Somewhere it is less noticeable and somewhere more. So Peter might be right that this is something Trivantis could fix.

    #315926 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    332 pts
    @ssneg

    Peter, I think you are supposed to upvote posts by the means of the “up arrow” next to it. The thumbs up icon is for selecting best answers.

    #315930 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    13 pts
    @pjackson2462

    G’day Sergey,

    I don’t see an “up arrow”, just the thumbs up icon.  Please see attached.

    Can you share what you see if it different to what I see – thanks.

    Regards, Peter

    Attachments:
    #315961 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    332 pts
    @ssneg

    Elena, first of all I must say that I loved the course design. When learners play as a male, they should guess car makes in the quiz, and when learners play as female, they should guess car colors. You’d probably be sued for this in the States but that is very cute nonetheless 🙂

    Friendly tip first. Do not name all your pages the same. It makes development much harder e.g. when you have to set page-related conditions or create navigation. Currently all pages in your title have the same name.

    The general problem of this course is that you are using dozens of actions to recreate RCD functionality which is… already there! You use conditional actions to show and hide objects based on the view – but that is already done in RCD.

    Another problem is that you create too many objects. E.g. on the first page, you have three text boxes with the same text (“Prove that you know cars!”) which is only different in position and font size to accommodate multiple devices. And you use actions to show them based on view. You should not have to do that. In RCD, you use ONE box and just set it up differently on each view.

    Also, you use PNG files with transparency for all the cars (because the photo frame has to be transparent). Instead, it is better to just use a PNG for an empty frame and add all cars as JPG files. Less size, faster loading.

    I strongly suggest that you get in touch with Trivantis to take a course on how RCD works. By the looks of this course, it will save you A LOT of time in future.

    #315962 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    332 pts
    @ssneg

    Peter, see attached.

    #316023 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    13 pts
    @pjackson2462

    Sergey, got it now, thank you very much.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.