symply_rabbit

Для начала нужно осознать, что проблема не на всех страницах. Например главная очень даже хорошо отображается.
Что касается остальных:
1) Для начала держим битрикс обновленным (иначе некоторые фишки могут не всегда корректно работать)
2) В настройках главного модуля нужно обязательно отметить опции "Объединять CSS файлы" и "Объединять JS файлы". В идеале конечно все из блока "Оптимизация CSS", но на практике иногда после этого большие проблемы с кешированием в браузерах.
3) Затем необходимо проверить форму входа - капча именно там выводится:


4) Далее нужно разобраться с картинками - слишком тяжелые. На странице каталога видел по 3МБ. Вообще в легкую без потери качества можно сжать минимум в 2х раза (а то и больше). Всякие JPEG 2000/XP и WebP не предлагаю, так как битрикс не работает с ними, но банально снизить качество (хотя бы до 80%) и разрешение можно.
5) Проведите рефакторинг в компонентах. В идеале inline javascript и css кода на странице быть не должно, а у Вас его куча.

До конца не понял, что хотите сделать.
вы поставили обработчик на событие добавления элемента, хотя это можно настроить в инфоблоке.
второй обработчик у вас не сработает
Если уже существующим товарам добавить символьный код, то
вот примерный код. суть в том, что вам надо сделать выборку, перевести название, сохранить
Здесь и разделы и элементы

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
CModule::IncludeModule('iblock');
$IBLOCK_ID = 3;
$fileElement = $_SERVER['DOCUMENT_ROOT'].'/scripts/elements.txt';
$fileSection = $_SERVER['DOCUMENT_ROOT'].'/scripts/section.txt';

$rsSections = CIBlockSection::GetList(
    array('SORT' => 'asc'),
    array('IBLOCK_ID' => $IBLOCK_ID),
    false,
    array('ID', 'NAME', 'CODE'),
    false
);
$currentSect = file_get_contents($fileSection);
$currentSect .= "-----------------\r\n";
while ($arSction = $rsSections->GetNext(false, false))
{
    echo '<pre>';
    print_r($arSction);
    echo '</pre>';
    $arParamsSect = array("replace_space"=>"-","replace_other"=>"-");
    $transSect = Cutil::translit($arSction['NAME'],"ru",$arParamsSect);
    echo '<pre>';
    print_r($transSect);
    echo '</pre>';
    $currentSect .= $arSction['CODE'].' - '.$transSect."\r\n";
    file_put_contents($fileSection, $currentSect);
    $bs = new CIBlockSection;
    $arFields = Array(
        'CODE' => $transSect
    );
    $res = $bs->Update($arSction['ID'], $arFields);
}




    $elDB = CIBlockElement::GetList(
        array('SORT' => 'asc'),
        array('IBLOCK_ID'=> $IBLOCK_ID),
        false,
        false,
        array('ID', 'NAME', 'CODE')
    );
    $currentEl = file_get_contents($fileElement);
    $currentEl .= "-----------------\r\n";

    while($arEl = $elDB->GetNext(false, false))
    {
        echo '<pre>';
        print_r($arEl);
        echo '</pre>';
        $arParams = array("replace_space"=>"-","replace_other"=>"-");
        $trans = Cutil::translit($arEl['NAME'],"ru",$arParams);
        echo '<pre>';
        print_r($trans);
        echo '</pre>';

        print_r($currentEl);
        $currentEl .= $arEl['CODE'].' - '.$trans."\r\n";
        file_put_contents($fileElement, $currentEl);
        $el = new CIBlockElement;
        $arLoadProductArray = Array(
            'CODE' =>$trans
        );
        $res = $el->Update($arEl['ID'], $arLoadProductArray);
    }

В вашем примере, они одновременно покажутся, чтобы это произошло с задержкой можно сделать так

setTimeout(function () {
    // Анимация для 1, когда она закончится, начнется для 2
    setTimeout(function () {
    // // Анимация для 2, когда она закончится, начнется для 3, и т д 
    }, 1000);
}, 1000);

думаю суть ясна, ну это хорошо, когда элементов 2-4, если же их будет больше, лучше циклом бежать по всем и уже делать по порядку, а то код превратится в помойку

.delay(1000) Если jquery
setTimeout, если JS