Reduce server response times (TTFB)

[Cyc]

I have a not good enough for me result of page speed test. Could this be the fault of poor optimization CMSMS database optimization?

https://developers.google.com/speed/pag ... tab=mobile

[Rolf]

https://developers.google.com/speed/pag ... simple.org

[Cyc]

So?

https://developers.google.com/speed/pag ... tab=mobile

Website without images is not a good example.

[Rolf]

What I am trying to say, there are much more items to fix first than thinking about CMSMS database optimization.
And loading images isn't a database action...

[Cyc]

Sure, thanks for response, but Your website is smaller than my. You write about "much more items to fix" like what for example? In page speed test I have only "Reduce server response times (TTFB)".

[DIGI3]

You can check if you have an unusually high number of database requests and/or delay using https://docs.cmsmadesimple.org/configur ... mance_info

Keep in mind that when you're logged into admin, the resulting numbers will not take caching into consideration. Do a couple of refreshes of the frontend in incognito mode to see how caching improves them (and work on your caching if it doesn't).

I don't think database optimization will be a significant solution to a high server response time, there are a lot of other things at play. Some improvements are simpler like checking compression, improving caching, reducing number of requests and file sizes, etc, and some are more drastic like upgrading hardware or moving to a better host.

[Cyc]

Ok thank you for tip Result is: Time: 1,480655 / SQL: 0,49581s for 3526 queries / Net Memory: 15451344 / Peak: 15896136 that's good?

[DIGI3]

A stock install should have around 40 queries. I assume that whatever you're using to build the featured products etc lists is causing that to jump up to ~3500. Is that LISE or some other module?

[Cyc]

I use only LISE. Do you wanna see my homepage templates?

[DIGI3]

You can try sharing it, or at least the LISE calls. You definitely want to get those queries down, and also work on caching - they aren't dropping on refresh which leads me to believe there's not a lot of caching going on.

[Cyc]

At the homepage I call to LISE few times:

Slider:

Code: Select all

{if $items|@count > 0}
<aside class="compsoul-slider compsoul-slider-horizontal">
  {foreach from=$items item=item}
  <div class="compsoul-slide">
    <div class="compsoul-slide-container row">
      <div class="compsoul-slide-content col">
        {if $item->fielddefs.title.value}<h2 class="compsoul-slide-heading">{$item->fielddefs.title.value|replace:"|":"<br>"}</h2>{/if}
        {if $item->fielddefs.href.value || $item->fielddefs.alias.value}
          <div class="compsoul-slide-more">
            <a href="{if $item->fielddefs.href.value}{$item->fielddefs.href.value}{elseif $item->fielddefs.alias.value}{cms_selflink href=$item->fielddefs.alias.value}{/if}" class="compsoul-slide-button">
              {if $item->fielddefs.more.value}{$item->fielddefs.more.value}{else}Czytaj więcej{/if}
            </a>
          </div>
        {/if}
      </div>
      {if $item->fielddefs.img.value || $item->fielddefs.big.value || $item->fielddefs.medium.value || $item->fielddefs.small.value}
      <figure class="compsoul-slide-figure col">
        <img class="compsoul-slide-img" alt="{if $item->fielddefs.alt.value}{$item->fielddefs.alt.value}{else}{$item->title}{/if}"{if $item->fielddefs.img.value} data-src="uploads/images/slider/{$item->fielddefs.img.value}"{/if}{if $item->fielddefs.small.value} data-480="uploads/images/slider/{$item->fielddefs.small.value}"{/if}{if $item->fielddefs.medium.value} data-800="uploads/images/slider/{$item->fielddefs.medium.value}"{/if}{if $item->fielddefs.big.value} data-1280="uploads/images/slider/{$item->fielddefs.big.value}"{/if} src="uploads/images/blank.png">
        <noscript>
          <img class="compsoul-slide-noscript" src="uploads/images/slider/{$item->fielddefs.img.value}" alt="{if $item->fielddefs.alt.value}{$item->fielddefs.alt.value}{else}{$item->title}{/if}">
        </noscript>
      </figure>
      {/if}
    </div>
  </div>
  {/foreach}
  <button class="compsoul-slide-next compsoul-slide-button icon"><span class="compsoul-slide-hidden">Następny slajd</span></button> 
  <button class="compsoul-slide-prev compsoul-slide-button icon"><span class="compsoul-slide-hidden">Poprzedni slajd</span></button>
  <nav class="compsoul-slide-navigation container">
    <h2>Nawigacja slidera</h2>
    <ul>
    {foreach from=$items item=item}
      <li class="compsoul-slide-nav">
        <button>
          <span class="compsoul-slide-point">
            {$item@iteration}
          </span>
        </button>
      </li>
    {/foreach}
    </ul>
  </nav>
</aside>
{/if}

News:

Code: Select all

<nav class="list-nav">
  <h2 class="hidden">Nawigacja artykułów</h2> 
  <ul class="list-nav-row row">
    {foreach from=$categories item=category}
    <li class="col">
      <button>{$category->name}</button>
    </li>
    {/foreach}
  </ul>
</nav>

Code: Select all

<div class="list-slider list-articles">
  {foreach from=$categories item=category}
  <nav class="list-slide">
    <h2 class="hidden">{$category->name}</h2>
    {LISEarticle template_summary="list" pagelimit="5" category=$category->alias}
  </nav>
  {/foreach}
</div>

Code: Select all

{if $items|@count > 0}
<ul class="list-container row">
  <li class="list-timer hidden">Timer</li> 
  {foreach from=$items item=item}
  {capture assign=gallery}{if $item->fielddefs.gallery.value}{Gallery dir=$item->fielddefs.gallery.value template="Miniatura"}{/if}{/capture}
  {capture assign=margin}{if $item->fielddefs.gallery.value}{Gallery dir=$item->fielddefs.gallery.value template="Margines"}{/if}{/capture}
    <li class="list-item list-item-{$item@iteration}{if !$gallery && !$item->fielddefs.thumb.value} no-image{/if} col">
      <a class="list-item-url row" {if !$item->fielddefs.more.value}href="{$item->url}" {/if}title="{$item->title}">
        {if $gallery || $item->fielddefs.thumb.value}
        <figure class="list-item-figure col">
          <img loading="lazy" class="list-item-img"{if ($item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value) || $margin} style="object-position: {if $item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value}{$item->fielddefs.thumbFit.value}{elseif $margin}{$margin}{/if}px 0;"{/if} src="{if $item->fielddefs.thumb.value}uploads/images/article/{$item->fielddefs.thumb.value}{elseif $gallery}{$gallery}{/if}" alt="{$item->title}">
        </figure>
        {/if}
        <h3 class="list-item-heading col"><span>{$item->title}</span></h3>
        <div class="list-item-footer col">
          <time class="list-item-time" datetime="{if $item->fielddefs.date.value}{$item->fielddefs.date.value|date_format:"%Y-%m-%dT%H:%M:%S"}{else}{$item->modified_time|date_format:"%Y-%m-%dT%H:%M:%S"}{/if}">{if $item->fielddefs.date.value}{$item->fielddefs.date.value|date_format:"%e %B %Y"}{else}{$item->modified_time|date_format:"%e %B %Y"}{/if}</time>
          <span class="list-item-more more">Czytaj dalej</span>
        </div>
      </a>
      <div class="listing-item listing-item-mobile{if !$gallery && !$item->fielddefs.thumb.value} no-image{/if} row">
        <div class="listing-item-content col">
          <h3 class="listing-item-heading heading-second">{if !$item->fielddefs.more.value}<a href="{$item->url}" title="{$item->title}">{/if}{$item->title}{if !$item->fielddefs.more.value}</a>{/if}</h3>
          {if $gallery || $item->fielddefs.thumb.value}
          <figure class="listing-item-figure listing-item-figure-mobile">{if !$item->fielddefs.more.value}<a href="{$item->url}" title="{$item->title}">{/if}
            <img loading="lazy" class="listing-item-img"{if ($item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value) || $margin} style="object-position: {if $item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value}{$item->fielddefs.thumbFit.value}{elseif $margin}{$margin}{/if}px 50%;"{/if} src="{if $item->fielddefs.thumb.value}uploads/images/article/{$item->fielddefs.thumb.value}{else if $gallery}{$gallery}{/if}" alt="{$item->title}">{if !$item->fielddefs.more.value}</a>{/if}
          </figure>
          {/if}
          {if $item->fielddefs.summary.value}
          <div class="listing-item-summary content">
            {$item->fielddefs.summary.value}
          </div>
          {/if}
          {if !$item->fielddefs.more.value}
            <a class="listing-item-url more" href="{$item->url}" title="{$item->title}">{if $item->fielddefs.moreText.value}{$item->fielddefs.moreText.value}{else}Czytaj więcej{/if}</a>
          {/if}
        </div>
        {if $gallery || $item->fielddefs.thumb.value}
        <figure class="listing-item-figure col">{if !$item->fielddefs.more.value}<a href="{$item->url}" title="{$item->title}">{/if}
          <img loading="lazy" class="listing-item-img"{if ($item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value) || $margin} style="object-position: {if $item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value}{$item->fielddefs.thumbFit.value}{elseif $margin}{$margin}{/if}px 50%;"{/if} src="{if $item->fielddefs.thumb.value}uploads/images/article/{$item->fielddefs.thumb.value}{else if $gallery}{$gallery}{/if}" alt="{$item->title}">{if !$item->fielddefs.more.value}</a>{/if}
        </figure>
        {/if}
      </div>
    </li>
  {/foreach}
</ul>
{else}
<ul class="list-container no-item container row">
  <li class="list-timer hidden">Timer</li> 
  <li class="list-item no-image col">
    <div class="list-item-url row">
      <h3 class="list-item-heading col"><span>Brak wpisów w tej kategorii</span></h3>
    </div>
  </li>
</ul>
{/if}

Tags list:

Code: Select all

{if $items|@count > 0}
<nav class="mosaic-nav">
  <h2 class="hidden">Mozaika</h2>
  <ul class="mosaic-list">
    {foreach from=$items item=item}
    <li class="mosaic-item">
      <a href="{cms_selflink href=$item->fielddefs.id.value}"{if $item->fielddefs.blank.value} target="_blank"{/if} title="{if $item->fielddefs.title.value}{$item->fielddefs.title.value}{else}{$item->title}{/if}" data-text="{$item->title}"><span>{$item->title}</span></a>
    </li>
    {/foreach}
  </ul>
</nav>
{/if}

Logos list:

Code: Select all

{if $items|@count > 0}
  <ul class="partners-list row">
    {foreach from=$items item=item}
    <li class="partners-item col">
      {if $item->fielddefs.id.value != -1 || $item->fielddefs.href.value}<a href="{if $item->fielddefs.id.value != -1}{cms_selflink href=$item->fielddefs.id.value}{else if $item->fielddefs.href.value}{$item->fielddefs.href.value}{/if}"{if $item->fielddefs.blank.value} target="_blank"{/if} title="{if $item->fielddefs.title.value}{$item->fielddefs.title.value}{else}{$item->title}{/if}">{/if}
      {if $item->fielddefs.logoUpload.value || $item->fielddefs.logoPicker.value}<img src="{if $item->fielddefs.logoUpload.value}uploads/images/partners/{$item->fielddefs.logoUpload.value}{else if $item->fielddefs.logoPicker.value}uploads/images/partners/{$item->fielddefs.logoPicker.value}{/if}" alt="{if $item->fielddefs.title.value}{$item->fielddefs.title.value}{else}{$item->title}{/if}">{else}{$item->title}{/if}
      {if $item->fielddefs.id.value != -1 || $item->fielddefs.href.value}</a>{/if}
    </li>
    {/foreach}
  </ul>
{else}
<div class="content">
  <p>Brak linków do wyświetlenia.</p>
</div>
{/if}

Lastes products:

Code: Select all

{if $items|@count > 0}
  {assign var=index value=0}
  {foreach from=$items item=item}
  {if $item@first}<ul class="list-slide list-slide-first list-container row">{/if}
  {if $item@last || $item@iteration % 5 == 0}
    <li class="list-timer hidden">Timer</li>     

    {assign var=size value="large"}
    {LISEproducts template_summary="list item" start=$index * 5 pagelimit=5}

    {assign var=size value="medium"}
    {LISEproducts template_summary="list item" start=$index * 4 pagelimit=4}

    {assign var=size value="small"}
    {LISEproducts template_summary="list item" start=$index * 3 pagelimit=3}

    </ul>{if !$item@last}<ul class="list-slide list-container row">{/if}
    {assign var=index value=$index + 1}
  {/if}
  {/foreach}
{else}
<ul class="list-container no-item container row">
  <li class="list-timer hidden">Timer</li> 
  <li class="list-item no-image col">
    <div class="list-item-url row">
      <h3 class="list-item-heading col"><span>Brak wpisów w tej kategorii</span></h3>
    </div>
  </li>
</ul>
{/if}

Code: Select all

{foreach from=$items item=item}
  {capture assign=gallery}{if $item->fielddefs.gallery.value}{Gallery dir=$item->fielddefs.gallery.value template="Miniatura"}{/if}{/capture}
  {capture assign=margin}{if $item->fielddefs.gallery.value}{Gallery dir=$item->fielddefs.gallery.value template="Margines"}{/if}{/capture}
  <li class="list-item list-item-{$item@iteration} list-item-{$size}{if !$gallery && !$item->fielddefs.thumb.value} no-image{/if} col">
    <a class="list-item-url row" {if !$item->fielddefs.more.value}href="{$item->url}" {/if}title="{$item->title}">
      {if $gallery || $item->fielddefs.thumb.value}
      <figure class="list-item-figure col">
        <img loading="lazy" class="list-item-img"{if ($item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value) || $margin} style="object-position: {if $item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value}{$item->fielddefs.thumbFit.value}{elseif $margin}{$margin}{/if}px 50%;"{/if} src="{if $item->fielddefs.thumb.value}uploads/images/products/{$item->fielddefs.thumb.value}{else if $gallery}{$gallery}{/if}" alt="{$item->title}">
      </figure>
      {/if}
      <h3 class="list-item-heading col"><span>{$item->title}</span></h3>
      <div class="list-item-footer col">
        <span class="list-item-more more">Czytaj dalej</span>
      </div>
    </a>
    <div class="listing-item listing-item-mobile{if !$gallery && !$item->fielddefs.thumb.value} no-image{/if} row">
      <div class="listing-item-content col">
        <h3 class="listing-item-heading heading-second">{if !$item->fielddefs.more.value}<a href="{$item->url}" title="{$item->title}">{/if}{$item->title}{if !$item->fielddefs.more.value}</a>{/if}</h3>
        {if $gallery || $item->fielddefs.thumb.value}
        <figure class="listing-item-figure listing-item-figure-mobile">
          {if !$item->fielddefs.more.value}<a href="{$item->url}" title="{$item->title}">{/if}<img loading="lazy" class="listing-item-img"{if ($item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value) || $margin} style="object-position: {if $item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value}{$item->fielddefs.thumbFit.value}{elseif $margin}{$margin}{/if}px 50%;"{/if} src="{if $item->fielddefs.thumb.value}uploads/images/products/{$item->fielddefs.thumb.value}{else if $gallery}{$gallery}{/if}" alt="{$item->title}">{if !$item->fielddefs.more.value}</a>{/if}
        </figure>
        {/if}
        {if $item->fielddefs.summary.value}
        <div class="listing-item-summary content">
          {$item->fielddefs.summary.value}
        </div>
        {/if}
        {if !$item->fielddefs.more.value}
          <a class="listing-item-url more" href="{$item->url}" title="{$item->title}">{if $item->fielddefs.moreText.value}{$item->fielddefs.moreText.value}{else}Zobacz produkt{/if}</a>
        {/if}
      </div>
      {if $gallery || $item->fielddefs.thumb.value}
      <figure class="listing-item-figure col">
        {if !$item->fielddefs.more.value}<a href="{$item->url}" title="{$item->title}">{/if}<img class="listing-item-img"{if ($item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value) || $margin} style="object-position: {if $item->fielddefs.thumb.value && $item->fielddefs.thumbFit.value}{$item->fielddefs.thumbFit.value}{elseif $margin}{$margin}{/if}px 50%;"{/if} src="{if $item->fielddefs.thumb.value}uploads/images/products/{$item->fielddefs.thumb.value}{else if $gallery}{$gallery}{/if}" alt="{$item->title}">{if !$item->fielddefs.more.value}</a>{/if}
      </figure>
      {/if}
    </div>
  </li>
{/foreach}

I trying to off one by one, to check which make most requests.

[Cyc]

Without news and latest products I have 184 queries.
Without latest products I have 927 queries.
Without news I have 2765 queries.

I told you, my front end is brilliant... But I do something wrong on smarty template, probably I can't use LISE call in foreach loop.

[DIGI3]

The nesting in the Latest Products is likely what's killing it - calling lise multiple times for every item shouldn't be necessary. You may wish to rethink how this is done, it's a bit beyond the scope of a forum post for me to diagnose that for you.

There are other optimizations you can do to reduce a lot of hits. Think of what's happening in

Code: Select all

{capture assign=gallery}{if $item->fielddefs.gallery.value}{Gallery dir=$item->fielddefs.gallery.value template="Miniatura"}{/if}{/capture}

You're capturing something (which is an expensive operation) even if the condition is false - you're just capturing an empty response. You could rethink that, perhaps something like:

Code: Select all

{if $item->fielddefs.gallery.value}{$gallery={Gallery dir=$item->fielddefs.gallery.value template='Miniatura'}}{/if}

just a simple change, but probably cuts down on a decent amount of overhead. That's not going to fix everything, but if you go through your code and look for optimizations where you can it will have a significant impact.

Final note, the next version of LISE is going to have a noprops=true parameter similar to Navigator's loadprops=0 which drastically reduces database hits in any calls that don't need the additional fielddefs loaded.

[Cyc]

Thank You DIGI3. You are my favorite DEV TEAM! I will try do my best to optimization my code. I have to reduce my LISE calling. Please watch this thread because I suck in backend...

[Cyc]

Ok I made code refactoring, and now I have 2126 queries. But it is not template issues, because when I set default template I have 2900 queries. So are there another ways to reduce queries?