Ways to increase performance of a Softr website (and underlying database)?

Ask the community
4

Dear community,

When I created my fully user tailored dashboard, the loading time was a massive 20 seconds (it had roughly 20 list blocks divided over 5 tabs to hide/show a few of them at the same time). To make these tabs I used the custom-code (to hide/show blocks) as explained here: New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally - Guides & Help Docs - Softr Community

However, the use of tabs with the current Softr has two problems:

  1. the order in which the blocks load differ from the order in which they’re placed in Softr - so from an user experience it can take the full 20 seconds before the first tab is loaded (much better would be if the first tab was loaded first and the rest thereafter in the background);
  2. the time it takes to load each block is simply too much.

So as a solution to this:
1. Question to Softr (or the community): is there a possiblity to assign a loading-order to blocks?

2. Instead of using tabs, just make it look like you’re using tabs, but in reality navigate to different pages. This improved the loading time from 20 seconds down to 2-4 seconds of most pages and one page takes 7 seconds. This can be done with this piece of custom-code (copy/paste this custom code to each page, and for each page all you need to do is change the “button active”):

<!DOCTYPE html>
<html>
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
         .button-group {
            display: flex;
            justify-content: center;
        }

        .button {
            background-color: #000000;
            color: white;
            font-family: 'julius sans one';
            font-size: 14px; 
            font-weight: bold;
            padding: 2px 10px; 
            margin-right: 6px;
            padding-top: 4px;
            padding-bottom: 4px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }

        .button:active, .active {
            background-color: #C5C9FF;
            color: #000000;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="button-group">
        <button class="button active" onclick="window.location='/'">Topic1 (home)</button>
        <button class="button" onclick="window.location='/page1'">Topic2</button>
        <button class="button" onclick="window.location='/page2'">Topic3</button>
        <button class="button" onclick="window.location='/page3'">Topic4</button>
        <button class="button" onclick="window.location='/page4'">Topic5</button>
    </div>
    
         <script>
    const buttons = document.querySelectorAll('.button');
        buttons.forEach(button => {
        button.addEventListener('click', function() {
            buttons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>
</body>

</html>
2 Likes