Веб-сайтты жылдамырақ ету: практикалық чек-лист

Веб-сайтты жылдамырақ ету үшін алдымен PageSpeed Insights-пен өлшеңіз, содан кейін ол көрсеткен ең үлкен себепті түзетіңіз – әдетте тым үлкен суреттер, тым көп JavaScript, ауыр қаріптер немесе үшінші тарап скрипттері. Google-дың Core Web Vitals «жақсы» мақсаттарына жетуге ұмтылыңыз: негізгі мазмұн 2,5 секундта көрінсін, түртуге жауап 200 миллисекундта келсін, және бет іс жүзінде секірмесін. Көп сайт мұны қайта жазбай, бірнеше өзгерту арқылы жетеді.

Ештеңені өзгертпес бұрын өлшеңіз

Болжау уақытты босқа кетіреді. Екі тегін құрал көпшілікке жетеді:

• PageSpeed Insights (pagespeed.web.dev) – тірі URL қойыңыз. Ол нақты Chrome пайдаланушыларының өріс деректерін (сайтта жеткілікті трафик болса) және имитацияланған жүктеудің зертханалық деректерін, сонымен қатар нақты мәселелер тізімін көрсетеді.
• Lighthouse Chrome DevTools ішінде – ашып алатын кез келген бетте, соның ішінде алдын ала қаражатта, сол зертханалық сынақ. Mobile режимінде сынаңыз; проблемалар баяу желідегі телефондарда көрінеді.

Маңызды сандар – Google-дың Core Web Vitals көрсеткіштері. 2026 жылдың қыркүйегіндегі жағдай бойынша Google-дың web.dev құжаттамасы бетті жүктеудің 75-пайыздық мәнінде мына «жақсы» шектерді береді:

INP 2024 жылы ескі First Input Delay көрсеткішінің орнын басты. Егер құрал әлі FID туралы хабарласа, ол ескірген.

Бастапқы сандарыңызды жазып қойыңыз. Әр түзетуден кейін қайта сынаңыз, сонда не көмектескенін білесіз.

Уақыт қайда кетеді: тәсілдер мен айырбастар

Әр кең таралған себептің шешімі бар, және әр шешімнің бағасы бар. Ең арзан және ең кең таралғанынан бастаңыз.

Суреттер

Суреттер – ең кең таралған мәселе және түзетуі ең оңай. Экранда 800 пиксель болып көрсетілетін 4 000 пиксельді фото әр кірушіге көргеніне қарағанда бес есе көп жүктеуге мәжбүр етеді.

• Суреттерді көрсетілетін өлшемінде беріңіз, телефон мен десктоп үшін жауапты srcset өлшемдерімен.
• Заманауи форматтарды (WebP немесе AVIF) және ақылға қонымды сығуды қолданыңыз.
• Әр суретке width және height қойыңыз, сонда браузер орын сақтайды. Тек бұл көп макет ығысуын жояды.
• Экран сыртындағы суреттерді loading="lazy" арқылы lazy-load қылыңыз.
• Беттің жоғарғы басты суретін ешқашан lazy-load қылмаңыз. Google-дың LCP нұсқаулығы бұл туралы тура айтады: LCP суретін lazy-load қылу оны әрдайым кешіктіреді. Оған орнына fetchpriority="high" беріңіз.

JavaScript

Көп AI жасаған сайт – бір беттік қолданба (SPA): браузер JavaScript пакетін жүктеп, содан кейін бетті салады. Пакет неғұрлым үлкен болса, соғұрлым бос экран ұзақ тұрады. Күш шығыны бойынша реттілікпен түзету жолдары:

1. Қолданбайтыныңызды алып тастаңыз. Тәуелділіктер тізімін сұраңыз да, бір рет қосылып, ұмытылған кітапханаларды кесіңіз – бір күнге арналған күн кітапханасын, бес белгішеге арналған толық белгіше топтамасын.
2. Бетке қарай бөліңіз. Басқару панелін біреу ашқанда ғана оның кодын жүктеңіз, басты бетте емес.
3. Жария беттерді алдын ала рендерлеңіз. Маркетингтік бет JavaScript жұмыс істемей тұрып-ақ нақты HTML ретінде көрінеді. Бұл іздеу жүйелеріне де көмектеседі; қараңыз: AI арқылы жасалған сайттарға SEO.

INP баяу болса, әдетте бір ұзақ тапсырма бетті бөгеп тұр деген сөз – әр таңбада үлкен тізімді сүзу, немесе бір ұяшық өзгергенде бүкіл кестені қайта рендерлеу. Chrome DevTools-тың Performance панелі соны көрсетеді.

Қаріптер

Әр қаріп отбасы және салмақ – тағы бір файл. Екі отбасы мен үш-төрт салмақ көбіне жеткілікті. Экранның үстіндегі қаріпті preload етіңіз, мәтін бірден көрінуі үшін font-display: swap қолданыңыз, ал сыртқы қаріп қызметі келушілеріңізге баяу болса, қаріптерді өзіңізде хостаңыз.

Үшінші тарап скрипттері

Чат виджеттері, аналитика, жылу карталары, жарнама пиксельдері, ендірілген бейнелер және әлеуметтік арналар кодты басқа серверлерден жүктейді. Әрқайсысы кішкентай көрінеді; жиынтығында олар бет жылдамдығын көбіне баяулатады. Нақты қарайтындарыңызды қалдырыңыз. Қалғандарын бет интерактивті болғаннан кейін жүктеңіз, ал ауыр ендірілімдерді (YouTube ойнатқышы, карта) нақты нәрсені басқанда жүктейтін жеңіл алдын ала көріністермен ауыстырыңыз.

Сервер жауабы

Time to first byte (TTFB) – сервердің жауап бастауға қанша уақыт алатыны – барлық басқа көрсеткіштің астында жатыр. CDN-нен (кірушілеріңізге жақын серверлер желісі; қараңыз: CDN дегеніміз не) берілетін статикалық беттер барлық жерде жылдам. Әр сұрауда сервер құрастыратын беттер сол серверге және оның дерекқорына тәуелді. Қайталанатын жұмысты кэштеу және баяу сұраулар үшін дерекқор индекстері әдеттегі түзету.

Жұмыс істейтін промпттар

Нақты болыңыз: бетті, көрсеткішті және шектеуді атаңыз. Қолда болса, PageSpeed Insights табыстарын қойыңыз.

PageSpeed Insights басты беттің mobile-дегі LCP көрсеткішін 4,8 с деп көрсетеді, ал LCP элементі – басты сурет. Басты суретті өлшемін өзгертіңіз және WebP-ке айналдырыңыз, жауапты өлшемдерді беріңіз, width мен height қойыңыз, оған fetchpriority="high" беріңіз және оны lazy-load қылмаңыз. Экран сыртындағы барлық суретті lazy-load қылыңыз. Дизайнды өзгертпеңіз.

Осы қолданбаның тәуелділіктерін аудит жасаңыз. Әр пакетті, оны не пайдаланатынын және пакетке шамамен қанша қосатынын тізіңіз. Қолданылмайтындарын алып тастаңыз және /admin мен /settings бағыттарын тек кірілген кезде жүктелетін бөлек бөліктерге бөліңіз.

/products бетіндегі іздеу жолағы баяу сезіледі. Сүзгіні debounce қылыңыз, әр таңбада бүкіл тізімді қайта рендерлемеңіз, ал тізімде 200-ден көп элемент болса, оны беттерге бөліңіз немесе virtualise жасаңыз.

Қадамдап

1. Тірі бетті тексеріңіз PageSpeed Insights-те mobile режимінде. LCP, INP және CLS көрсеткіштерін және тізілген үш негізгі мәселені жазып алыңыз.
2. Алдымен суреттерді түзетіңіз: өлшемдері, форматтары, өлшемдері, экран сыртындағыларын lazy-load қылу, басты суретке басымдық.
3. Қолданбайтын үшінші тарап скрипттерін алып тастаңыз, қалғанын кешіктіріп жүктеңіз.
4. Қаріптерді қажетіне дейін қысқартыңыз.
5. JavaScript-ті азайтыңыз: қолданылмайтын пакеттерді алып тастаңыз, бетке қарай бөліңіз.
6. Жария беттерді алдын ала рендерлеңіз, егер әлі клиентте рендерленсе және LCP әлі баяу болса.
7. Серверді тексеріңіз: кэштеу, дерекқор индекстері, сирек өзгеретін мазмұнға статикалық хостинг.
8. Қайта жариялап, қайта тексеріңіз. PageSpeed Insights-тегі өріс деректері нақты кірулер жиналған сайын бірнеше аптадан кейін жаңарады, сондықтан алғашқы нәтижені зертханалық деректермен бағалаңыз.

Жиі кездесетін қателер

• Тек жылдам ноутбукте сынау. Келушілеріңіз орташа телефондарда және әлсіз мобильді деректерде отырады. Mobile режимінде сынаңыз.
• Керемет 100 ұпайға ұмтылу. Зертханалық ұпай – нұсқаулық. Core Web Vitals жақсы диапазонға кіргенде, мазмұн мен қолдану соңғы бірнеше ұпайдан маңыздырақ.
• Бәрін lazy-load қылу, соның ішінде басты суретті. Бұл LCP-ді нашарлатады.
• Жылдамдық плагині немесе кітапханасын үстіне қосу. Салмақты азайту оны басқаруға код қосудан әрдайым тиімдірек.
• Тірі сайтты емес, алдын ала қаражатты оңтайландыру. Даму алдын ала қараулары оңтайландырылмаған құрастырмаларды іске қосады. Жарияланған URL-ді өлшеңіз.
• Жылдамдықты бір рет түзету. Әр жаңа виджет, сурет және мүмкіндік салмақ қосады. Үлкен өзгерістерден кейін қайта тексеріңіз.

Жылдамдық чек-листі

• Mobile-де LCP ≤ 2,5 с, INP ≤ 200 мс, CLS ≤ 0,1
• Суреттер өлшемі өзгертілген, сығылған, заманауи форматта, width және height бар
• Басты сурет lazy емес; экран сыртындағы суреттер lazy-load
• Қолданылмайтын JavaScript кітапханалары жоқ; ауыр бағыттар бөлек
• Екі қаріп отбасы немесе аз; негізгі қаріп preload
• Тек қолданылатын үшінші тарап скрипттері, кешіктіріліп жүктелген
• Жария беттер мүмкіндігінше алдын ала рендерленген немесе статикалық
• Жариялағаннан кейін тірі URL-де қайта тексерілген

Жылдамдық пен мобильді макет бірге жүреді; қараңыз: веб-сайтты мобильді бейімдеу. Іске қосар алдындағы толық тексеру үшін AI прототипін өндіріске шығару қалғанын қамтиды.

Mythex-те жылдамдық

Mythex-те бұл өзгерістерді чатта сұрау арқылы немесе Pro-да код редакторында жасайсыз. Алдын ала қараудың емес, жарияланған URL-ді тексеріңіз, өйткені Preview даму серверін іске қосады. Статикалық фронтенд жариялағанда статикалық сайт ретінде орналасады (статикалық веб-сайттар), бұл мазмұн беттеріне жарасады. Серверлі қолданбалар нөлге дейін масштабталады: бос тұрғанда ұйықтайды және келесі кірісте оянады, сондықтан тыныш кезеңнен кейінгі алғашқы сұраныс баяу болады, ал қоса қосылған дерекқор 5 минут бос тұрғаннан кейін ұйықтайды (хостинг шектеулері). Жария бет тек алғашқы кіруде баяу болса, себебі сол болуы мүмкін. Маркетингтік беттерді статикалық ұстау көмектеседі. Өзгерістерден кейін қайта жариялап, бетті күшпен жаңартыңыз.

Сұрақтар