Tilda сайтында веб-сайтты жүктеуді жылдамдату әдісі

Tilda сайттары жылдам жүктейді: мысалы 1 және мысал 2. Беттерді одан да жылдам жүктеуге болады. Біз бұл мақаланы беттерді жүктеу жылдамдығы бірінші кезектегі міндет болып табылатын адамдар үшін жаздық, сондықтан олар дизайн бойынша ымыраға келуге дайын.
Интернет желісіндегі сайттарды жүктеуге ерекше көңіл бөлінуде. Сондықтан біз үшін Тильда жасалған беттерді жүктеу жылдамдығымен жұмыс істеу күнделікті күн тәртібіне айналды — біз жаңа технологияларды енгізіп, техникалық процестерді оңтайландырамыз. Кейбір жаңалықтар қолданушыға байқалатын, кейбіреулері көрінбейді. Бұл жалғасып жатқан процесс, бірақ біз қазірдің өзінде қол жеткізген жетістіктерімізді мақтан тұтамыз.

Бұл мақалада Тильдадағы ағымдағы құралдар мен параметрлерді пайдаланып сайттың жүктелуін жылдамдату әдісі туралы қысқа бақылау тізімін береміз, содан кейін әр элемент туралы егжей-тегжейлі айтып береміз. Осылайша, сайттағы параметрлердің дұрыстығын өз бетінше тексеріп, оны одан да жылдам жүктеуге болады.
Сайттың жүктелуін жылдамдатуға арналған тексеру парағы
  • Сайтта Lazy Load қосылғанына көз жеткізіңіз
  • Беттегі суреттерді қолмен оңтайландыру
  • Жүйелік қаріптерді пайдалану немесе параметрлерде жылдам мазмұнды көрсету мүмкіндігін қосу
  • Сайттағы барлық сыртқы кодтар мен сценарийлерді өшіру
  • Есептегіштердің жалқау инициализациясын өшірмеңіз
  • Сеансты қайталауды өшіру
  • Бет ұзындығын қысқарту
  • Беттің жоғарғы жағындағы суреттер санын азайту
  • Тораптың экспортталғанын тексеру
Әр нүкте туралы бөлек айтпас бұрын, сайттың жүктеу жылдамдығын қалай бағалау керектігін анықтайық.
Бетті жүктеу жылдамдығын бағалау әдісі
Көптеген Tilda қолданушылары сайттың бетті жүктеу жылдамдығын PageSpeed Insights арқылы тексереді, Google-дан сайтты мобильді құрылғылар мен компьютерлерге жүктеуді имитациялайтын және оған өз рейтингін беретін қызмет.
Бұл жүктеудің нақты жылдамдығын әрдайым көрсете бермейтін шартты техникалық құрал. Біздің тәжірибемізде, Chrome құрастырушы панелінде жинайтын және көрсететін деректер PageSpeed Insights симуляциясы арқылы алынған деректерге қарағанда әлдеқайда жақсы. Сондықтан ПСИ-ге толығымен сүйенуді ұсынбаймыз, оны жанама анализатор ретінде қарастырамыз.

Сайт беттерінің нақты жүктеу жылдамдығын бақылаған дұрыс. Мұны Chrome- дағы әзірлеуші консолінде жасауға болады - консольді ашыңыз (alt + ctr + i / option + cmd + i) → Бағалағыңыз келетін бетті қайта жүктеу → Toggle құрылғысы тақтасы мен Желі қойындысына өтіңіз. Ең маңызды параметрлері - DOMContentLoaded (бет құрылымының жүктеу жылдамдығын көрсетеді) және Жүктеу (бетті барлық мәнер кестелері мен суреттері бар жүктеудің толық жылдамдығын көрсетеді).

Бекітілген Chrome браузер панелі арқылы Тильда учаскенің нақты жүктеу жылдамдығын бағалау yourbeststylist.tilda.ws. DOMContentLoaded and Load индикаторларына назар аударыңыз.

Бірақ бұл әдіс те өте қолайлы емес — панельдегі жылдам 3G-дің еліктеуі сайттың мобильді құрылғыларға тиелуіне онша анық және дұрыс еліктей алмайды. Сондықтан нақты құрылғылардағы жүктеу жылдамдығын тексеріп, фактілерге сүйене отырып қорытынды жасау керек.
Тильда тұрғызылған учаскені жылдам жүктеу
Тильда бет жүктеуді жылдамдату үшін көптеген оңтайландыруларды жүзеге асырды. Негізгі сайттар, егер оларда код және бөгде сценарийлер болмаса, жылдам жүктелетін болады. Өзіңіз көре аласыз — Tilda сайтындағы веб-сайт үлгілерінің кез келгенін таңдап, оның жүктеу жылдамдығын сол PagesPeed Insights сайтында тексеріңіз.

Нақты мысалмен тексерейік. Тильда кітапханасынан үлгі таңдап, оны Аннаның жеке стилистіне арналған веб-сайт жасау үшін пайдаланайық. Ал енді оның жүктеу жылдамдығын PageSpeed Insights арқылы білейік.
Әрине, жылдамдық сайттың күрделілігіне, нақты блоктарға, бөгде виджеттердің, сөрелердің, статистиканың және басқа қондырмалардың қосылғанына байланысты, бұл сайтты бәсеңдетеді.

Мәселені өз бетінше түсіну үшін біз осы мақаланы дайындадық. Қандай параметрлер сайтты өте жылдам сайтқа айналдыратынын білесіз. Бірақ шешім қабылдауға тура келеді — бақылау тізімінен барлық элементтерді қолдану сайттың жүктеу жылдамдығына ғана емес, оның конструкциясына да әсер етеді.
Сайттарды жүктеуді жеделдету үшін тексеру парағын талдау
1. Сайтта Lazy Load қосылғанына көз жеткізіңіз
Lazy Load барлық суреттерді ашқан кезде бірден емес, бетті айналдырғанда жүктеуге мүмкіндік береді. Бұл параметр әдепкі бойынша қосылады және сайт өнімділігіне тікелей әсер етеді.

Реттелетін веб-сайттарды жасайтын дизайнерлер Lazy Load-ты қандай да бір себептермен өшіретінін жиі көреміз. Мұны жасаудың қажеті жоқ, ол сайтты бәсеңдетеді.

Lazy Load өшірілгенін тексеріңіз. Ол үшін Веб-сайт параметрлері → Қосымша бөліміне өтіп, Жалқау жүктеу суреттерін ажырату параметрі тексерілмегеніне көз жеткізіңіз. Сондай-ақ, Нөлдік блоктағы кескін және кескін параметрлерінде мүмкіндіктің ажыратылмағанына көз жеткізіңіз.
2. Беттегі суреттерді қолмен оңтайландыру

Жалқау жүктеме және кескінді қолмен оңтайландыру - оңтайландыруға болатын ең қуатты екі нәрсе. Суреттер веб-сайттағы ең ауыр нәрсе, сондықтан бет жүктемесінің жылдамдық жетістігінің 70%- ы соларға байланысты.

Тильданың резонанстық кескінді кері жүктеу деп аталатын эксклюзивті мүмкіндігі бар. Бұл сайтқа келушінің құрылғысына байланысты оларды учаскедегі контейнердің көлеміне дейін масштабтайтын кескінді өңдеудің арнайы технологиясы. Сондай-ақ, мүмкіндік суреттерді WebP- ге түрлендіреді, бұл жаңа буын пішімі, ол қандай да бір сапа жоғалтпай суретті қысады, сондықтан сайт тезірек жүктейді. Бұл автоматты түрде орын алады және адамға қандай да бір қосымша әрекеттерді орындаудың қажеті жоқ.

Кейбір жағдайларда автоматты түрде ұшып-қонуды оңтайландыруды суреттерді қолмен қысумен салыстыруға болмайды. Сондықтан бетті жүктеу жылдамдығы сіз үшін өте маңызды болса, суреттерді TinyPNG қызметі арқылы одан әрі оңтайландыруды ұсынамыз. Ол еркін және ешқандай көзге көрінбейтін жоғалтусыз суреттерді қысуға мүмкіндік беретін шығынсыз деректерді қысу технологиясын қолданады.

Тағы бір шешім - беттің жұмыс үстелі мен мобильді нұсқалары үшін жеке блоктар қосу және оларға әр түрлі өлшемдегі және салмақты суреттерді кері жүктеу. Мысалы, мұны бірінші экран үшін жасауға болады.

Бұл жағдайда Тильда ішіндегі алгоритм мынадай болады: бетті жүктеу кезінде, егер сіздің оңтайландырылған фотосуретіңіз біздікінен аз болса, біз сізге береміз. Мысалы, бұл кэш жылынғанда, жүйе әлі күнге дейін қажетті ажыратымдылықтағы суреттерді алдын ала дайындау мақсатында барулар бойынша статистикалық деректерді жинап жатқан кезде орын алуы мүмкін. Сондықтан қолмен оңтайландыру процесті нашарлатпайды, ал кейбір жағдайларда суреттерді оңтайландыруға және бетті жүктеу жылдамдығын арттыруға көмектеседі.
3. Жүйелік қаріптерді пайдаланыңыз немесе параметрлерде жылдам мазмұнды көрсетуді қосыңыз
Бұл салмақ пен маңыздылығы жағынан оңтайландырудың екінші санаты. Жүйелік қаріптер кез келген компьютерде қол жетімді, мысалы, Arial немесе Georgia. Сондай-ақ Ubuntu немесе Roboto сияқты жалғанатын қаріптер де бар.

Сайтты мүмкіндігінше жылдамдатқыңыз келсе, өз қаріпіңізді қоспаңыз, бірақ жүйелік қаріптердің бірін таңдаңыз. Осылайша 100-400 кб үнемдейсіз, бұл бетті жүктеу кезінде елеулі.

Брендингті пайдалану қажет болса, жаңа мүмкіндікті — лездік мазмұнды көрсетуді пайдалануға болады. Параметр фирмалық қаріптің жүктелгеніне немесе жүктелмегеніне қарамастан, мазмұнды сайтта көрсетуге мүмкіндік береді. Сайт алдымен жүйелік қаріппен пайда болады, ал бірнеше секундтан кейін қаріп қосылғанда мәтін қайтадан сызылады, бірақ бұл жолы корпоративтік қаріпте.

Әдепкі бойынша бұл мүмкіндік қосылмайды. Егер веб-сайтты жүктеу жылдамдығы тегіс жүктеу мен визуализациядан гөрі маңыздырақ болса, мүмкіндікті қосыңыз: Сайт параметрлері → Қаріптер мен түстер → Қосымша параметрлер бөліміне өтіңіз.

Жылдам мазмұнды көрсету әдепкі бойынша қосылмайды. Сайттың жүктелуін жылдамдатқыңыз келсе, оны параметрлерде белсендіріңіз.

4, Сайттағы барлық сыртқы кодтар мен сценарийлерді өшіру

Сөйлесу немесе сөре сияқты сыртқы код немесе сценарий қосылғанын тексеріңіз. Тильда олар Т123 агрегатының көмегімен қосылады. Бетте немесе сайттың үстіңгі деректемесінде осындай блоктың бар-жоқтығын тексеріңіз.

Біздің бақылауларымыз бойынша, 95% жағдайда сайтқа қосылған код тиеу стратегиясы үшін оңтайландырылмаған және бетті көрсетуді айтарлықтай баяулатуы мүмкін. Сондықтан біздің ұсынысымыз – бөгде сценарийлерді қолданбау немесе дұрыс қосылыммен пайдалану.

Егер бөгде кодсыз істей алмасаңыз, онда сценарийді жүктеу мен инициализациялауды кейінге қалдырыңыз. Бет көрсетудің алғашқы секундтары өте маңызды, сондықтан ештеңені үстеме жүктеудің қажеті жоқ. Мысалы, Intercom виджетін қосып жатсаңыз, беттің негізгі мазмұны көрсетілгеннен кейін 3 секунд өткен соң ("DOMContentLoaded" немесе "құжат дайын" оқиғасы пайда болады) сценарийді қосып, инициализациялаған дұрыс. Бұл қадам негізгі жүктеу жібін бұғаттаудан аулақ болуға көмектеседі, сондықтан бет тезірек беріледі.

Мысалы, Тильда, әдепкі бойынша, сөрелер бет жүктемелерінен кейін 2 секундтан соң жүктейді. Бұл туралы келесі тармақта айтатын боламыз.
5, Кейінге қалдырылған қарсы инициализацияны өшірмеңіз

Кейінге қалдырылған қарсы инициализация - соңғы кездері барлық Tilda пайдаланушыларына ашылған жаңа мүмкіндік. Беттегі сөре қосылуы үшін браузер сценарийді жүктеп, кодты талдап, оны орындауы қажет. Yandex.Metrica немесе Google Analytics файлдары айтарлықтай ауыр, сондықтан оларды бірден жүктесеңіз, олар бетті көрсету жылдамдығын бәсеңдетеді. Осыған байланысты, әдепкі бойынша, бұл сөрелерді бет жүктемелерінен кейін 2 секунд өткен соң қосуға болады.

Сайт параметрлері → талдауларында параметрдің ажыратылмағанын тексере аласыз.

Сайт тезірек жүктелетіндей сөрелердің кідіртілген инициализациясын өшірмеу

6. Сеансты қайталауды өшіріңіз
Сеансты қайталау - сайттың жылу картасын жасауға арналған құрал, ол пайдаланушы сеанстары кезінде сайтта не болып жатқанын және адамдардың қандай элементтерге көбірек көңіл бөлетінін көрсетеді. Қосылған Сеансты қайталау қосымша жүктеме тудырады — ол пайдаланушының сайтқа кіруінің скриншоттарын жібереді. Бұл сайт пен келуші арасындағы алмасу трафигін айтарлықтай арттырады, интернет-арнаны бітеп жатыр. Әсіресе сайтта анимация қолданылса.

Сондықтан Сеансты қайталауды өшіріп, қажет болған жағдайда ғана қосыңыз. Оны өшіру үшін Сайт параметрлері → Analytics → Yandex.Metrica → Сеансты қайталауды ажырату 2.0 бөліміне өтіңіз.

Сайт беттерін жылдамырақ жүктеу үшін Сеансты қайталауды өшіру

7, Бет ұзындығын қысқарту
Нүкте анық сияқты, бірақ ол жұмыс істейді: бетте ақпарат аз болса, соншалықты тезірек жүктелетін болады. Сайтыңызды сыни тұрғыдан қарап көріңізші: Беттегі барлық ақпарат пен суреттер шын мәнінде қажет пе, әлде оны қысқартуға бола ма? Мысалы, өте ұзын бет (20+ экран) болса, жүктеу жылдамдығын арттыру үшін мазмұнның бір бөлігін одан екіншісіне жылжытыңыз. Бұл тікелей ықпал ете алатын тұс.
8. Беттің жоғарғы жағындағы суреттер санын азайту
Кейде қолданушылар бірінші экранға үлкен мұқаба фотосурет орналастырады, ал келесі блокқа тағы да төрт шағын фотосурет қойылады. Бұл жағдайда браузерге бір фотосуретті емес, бесеуін бірден жүктеу қажет. Бұл трафикті, әсіресе, мобильді интернетте бітеді. Сондықтан сайттың басында көптеген фотосуреттерді орналастыруды ұсынбаймыз.

Беттің басына көп фотосуреттер орналастыруды ұсынбаймыз, бұл сайттың жүктеу жылдамдығына әсер етеді

9. Веб-сайтыңыздың экспортталғанын тексеріңіз
Тораптың экспортталмағанын, API арқылы синхрондалмағанын тексеріңіз, басқаша айтқанда, ол Tilda серверлерінде. Немесе, экспорттасаңыз, веб-серверіңіз оңтайлы түрде конфигурацияланған.

Тильда сапалы ішкі инфрақұрылымды құрды, оны біз одан әрі жетілдіріп, дамытуды жалғастырудамыз. Біз көп нәрсені қамтамасыз еттік: сенімді және жылдам серверлер, CDN кескінді жеткізуді жеделдету үшін, DDoS шабуылдарынан қорғау және сайттардың ең жылдам жұмыс істеуіне бағытталған тағы бірнеше техникалық параметрлер.

Үшінші тарап хостингінде жүйе әкімшілерінің жұмыс көлемі мен сапасын бақылай алмаймыз. Бірақ сайтты экспорттаған болсаңыз, сайттарды жылдам жүктеу үшін не істеу керектігі туралы кейбір кеңестерді бере аламыз:
— CDN-ді қосу және таратылған мазмұн жеткізу желісі арқылы суреттерді беру;
- Веб-сервер параметрлерінде CSS/JS/HTML кэштеу тақырыптарын қосу, клиенттің браузері оларды әр уақытта жүктеп алмау үшін, оларды кэштен алады;
- CSS, JS және HTML файлдары үшін gzip немесе brotli қысуды қосу.
- Async атрибутын үшінші тараптың JS сценарийлеріне қосу, олардың жүктелуі бетті жүктеуді бәсеңдетпеуі үшін;
— үшінші тарап виджеттерін қажет болған жағдайда ғана қосып, бет мазмұнының сызылуға уақыты болуы үшін инициализация кідірісін 2-3 секунд етіп ұйымдастырыңыз.
Қорытындылайық
Tilda сайтындағы сайттар қазірдің өзінде тез ашылып жатыр. Бірақ сайтыңызды одан да жылдамдатқыңыз келсе, бақылау тізімінен біздің ұсыныстарымызды пайдаланыңыз. Олар сізге аса жылдам сайт құруға көмектеседі, бірақ визуалды компонентте ымыраға келуге тура келеді. Бұл шешімдер мен басымдықтар әрқашан платформа пайдаланушысының қалауы бойынша болады.

Өз тарапымыздан платформаны оңтайландыру және сайтты одан әрі жылдамдататын жаңа шешімдерді енгізу бойынша жұмысты үздіксіз жалғастырудамыз.
20__ жылғы «___» __________
Тильда