PaulV888
Member
Hi,
Did I tell you guys today, that I love Fabrik and its awesome community? Well I do
So over the Easter weekend I was playing with my website to see if I can speed up my main dashboard. Researching http2, caching etc, but figuring out that the most time is spent building my about 10 Fabrik lists on the server.
Seeing if I could lazy load then, I put together a lazy load for just the data, which was easily done with updateRows which I was already using for polling updates. That helped some but not enough, so I needed to prevent any model building while loading the page.
After many hours of fiddling around it turns out it is a pretty straightforward solution and all the important hooks are already in place. And ended up with these few lines of code.
I am using DirectPHP and put this code in an article. So basically I am not building any list till the callback from the frontend.
The bolded part of the URL was the hidden gem that really made this work. And I was able to bring my page load time down from 2+ sec to about 800ms. I might run in some gotchas, but so far all looks great.
Greeting and happy Easter
Did I tell you guys today, that I love Fabrik and its awesome community? Well I do
So over the Easter weekend I was playing with my website to see if I can speed up my main dashboard. Researching http2, caching etc, but figuring out that the most time is spent building my about 10 Fabrik lists on the server.
Seeing if I could lazy load then, I put together a lazy load for just the data, which was easily done with updateRows which I was already using for polling updates. That helped some but not enough, so I needed to prevent any model building while loading the page.
After many hours of fiddling around it turns out it is a pretty straightforward solution and all the important hooks are already in place. And ended up with these few lines of code.
I am using DirectPHP and put this code in an article. So basically I am not building any list till the callback from the frontend.
Code:
<?php $tableId = 275;
echo '
<div id="fab_'.$tableId.'" class="tablefront">Loading...</div>
<script>
jQuery(document).ready(function() {
var timer = setInterval(function() {
clearInterval(timer);
jQuery.ajax({
dataType: "html",
url: "/index.php?option=com_fabrik&view=list&listid='.$tableId.'&calculations=0&resetfilters=0&Itemid=654&projectlist___status=0&layout=autoupdate&tmpl=component&ajax=1&format=partial",
method: "get",
timeout: 10000,
success: function(data)
{
jQuery("div#fab_'.$tableId.'").html(data);
},
error: function(xhr, textStatus, error)
{
jQuery("div#fab_'.$tableId.'").html(textStatus+" "+error+"</br>"+xhr.responseText);
},
});
}, 5);
});
</script>';
?>The bolded part of the URL was the hidden gem that really made this work. And I was able to bring my page load time down from 2+ sec to about 800ms. I might run in some gotchas, but so far all looks great.
Greeting and happy Easter
