Responsive output is too slow

eurbanova3379eurbanova3379 Community Member Posts: 15

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



  • mspermon9445mspermon9445 Community Member Posts: 5
    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.


  • pjackson2462pjackson2462 Community Member Posts: 69 ☆ Roadie ☆
    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
  • mspermon9445mspermon9445 Community Member Posts: 5
    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.


  • ssnegssneg Community Member Posts: 1,466
    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.
  • ssnegssneg Community Member Posts: 1,466
    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.
  • pjackson2462pjackson2462 Community Member Posts: 69 ☆ Roadie ☆
    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


    Regards, Peter
  • eurbanova3379eurbanova3379 Community Member Posts: 15
    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.
  • ssnegssneg Community Member Posts: 1,466
    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.
  • pjackson2462pjackson2462 Community Member Posts: 69 ☆ Roadie ☆
    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
  • ssnegssneg Community Member Posts: 1,466
    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.
  • ssnegssneg Community Member Posts: 1,466
  • pjackson2462pjackson2462 Community Member Posts: 69 ☆ Roadie ☆
    Sergey, got it now, thank you very much.
  • eurbanova3379eurbanova3379 Community Member Posts: 15
    Thank you :)

    The multiple textboxes though we created because we could not change the font size of the same text box in various views. We could change the size of the box but not the font size.

    The page titles we changed at the end, because the Lectora page title seems to be the title of the page in the browser and we wanted it to seem like one page...

    We will try to simplify the course as you suggested and I will let you know whether changes helped soon.
  • eurbanova3379eurbanova3379 Community Member Posts: 15
    I found the text scaling option at last :)
  • ssnegssneg Community Member Posts: 1,466
    Yes, scaling :)

    Also, when it comes to backgrounds, you can use multiple images as source files for a SINGLE background image object in different views. So again, no need to multiple image objects and multiple actions to switch between them in different views.

    Let me know if you need any further help. I'd be happy to take another look at the second version you come up with.

    Here's a great tutorial by Daryl Fleary:
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!

The Big Launch - Exciting News From eLearning Brothers

eLearning Brothers is all set to rock the eLearning world in 2021, and we want to let you in on the plans! Join us for The Big Launch event, where you’ll hear from company leaders like Andrew Scivally, Co-founder and CEO, Christian Weibell, CPO, and more special guest stars. We’ve got a lot of eLearning awesomeness up our sleeve—you won’t want to miss The Big Launch.