PageSpeed Insights-тің жасыл аймағы: сайтты оңтайландыру бизнесіңіз үшін неліктен маңызды екенінің 3 себебі

Құрметті достар! Егер сіз дизайны мен мазмұны керемет сайтыңыздың неге күткен конверсияны әкелмейтіні немесе іздеу нәтижелерінде бір орында тұрып қалғаны туралы ойланған болсаңыз, бұл мақала сізге арналған. Бүгін мен сайттың жүктелу жылдамдығын оңтайландыру, браузердің рендеринг процестері және PageSpeed Insights (PSI) жүйесіндегі көптен күткен жасыл балдарға қол жеткізудің техникалық құпиялары туралы егжей-тегжейлі сөйлескім келеді.

Көптеген бизнес иелері, маркетологтар және тіпті кейбір тәжірибелі әзірлеушілер әлі күнге дейін PageSpeed Insights платформасындағы 90+ балл тек технарьлардың мақтанышы үшін керек әдемі сан деп санайды. «Сайт ашылып тұр ғой, пайдаланушылар шағымданбайды», — дегенді жиі естиміз. Бірақ шын мәнінде, қазіргі жылдам интернет заманында жылдамдық — бұл тікелей ақша. Оңтайландыру неліктен өмірлік маңызды екенін және біз өз жобаларымызда оған неге соншалықты көп көңіл бөлетініміздің үш іргелі себебін терең техникалық тұрғыдан талдайық.

1-себеп. Пайдаланушы тәжірибесі және конверсия (CR)

Ең қарапайым және маңызды нәрседен — сіздің клиенттеріңізден бастайық. Қазіргі интернет пайдаланушылары лездік реакцияларға үйренген. Google компаниясының зерттеулері мен статистикалық деректеріне сүйенсек, егер мобильді беттің жүктелуі 3 секундтан артық уақытты алса, пайдаланушылардың 50%-дан астамы сайттың ашылуын күтпей, оны жауып тастайды. Елестетіп көріңізші: сіз маркетингке, PPC жарнамасына және SEO жылжытуға қыруар бюджет жұмсадыңыз, әлеуетті сатып алушыны сайтқа әкелдіңіз, ал ол сіздің бірегей ұсынысыңыз бар алғашқы экран тым ұзақ жүктелгендіктен, бұрылып, бәсекелестеріңізге кетіп қалды. Бұл — тікелей қаржылық шығын.

PageSpeed Insights жай ғана синтетикалық баға қоймайды, ол нақты пайдаланушы тәжірибесін көрсететін Core Web Vitals — негізгі өнімділік метрикаларын өлшейді. Осы көрсеткіштерді тереңірек қарастырайық:

• LCP (Largest Contentful Paint): Беттің негізгі визуалды элементінің (мысалы, басты баннер немесе үлкен мәтіндік блок) экранда пайда болу уақытын өлшейді. Жақсы көрсеткіш — 2.5 секундтан аз уақыт. Бұған қол жеткізу үшін сервердің жауап беру уақытын (TTFB) азайту және рендерді блоктайтын ресурстарды жою қажет.
• INP (Interaction to Next Paint): 2024 жылдың наурыз айынан бастап ескірген FID (First Input Delay) метрикасының орнына келген жаңа маңызды көрсеткіш. Ол пайдаланушының сайттағы кез келген әрекетіне (батырманы басу, мәзірді ашу) интерфейстің қаншалықты тез жауап беретінін өлшейді. Жақсы INP көрсеткіші 200 миллисекундтан аспауы тиіс. Егер сізде JavaScript негізгі ағынды (main thread) бос ұстамаса, пайдаланушы клик жасағанда сайт «қатып» қалады.
• CLS (Cumulative Layout Shift): Жүктеу кезінде беттегі элементтердің кенеттен жылжуын (визуалды тұрақсыздық) өлшейді. Мысалы, пайдаланушы мақаланы оқып отырғанда немесе батырманы басайын дегенде, жоғарыдан баннер жүктеліп, бүкіл контент төмен сырғып кетсе, бұл өте жағымсыз тәжірибе береді. Жақсы көрсеткіш — 0.1-ден төмен. Бұған жол бермеу үшін суреттер мен жарнама блоктарына CSS арқылы нақты өлшемдер немесе aspect-ratio қасиетін беру қажет.

Төмендегі диаграммада беттің жүктелу жылдамдығының пайдаланушылардың сайттан кету деңгейіне және жалпы конверсияға қалай әсер ететіні айқын көрсетілген:

Бұл көрсеткіштердегі жасыл аймақ пайдаланушының бірқалыпты, интуитивті және өте жылдам тәжірибе алатынын білдіреді. Ал қанағаттанған пайдаланушы мақсатты әрекетті жиірек жасайды — сатып алады, өтінім қалдырады немесе жазылады. Үнемделген әрбір миллисекунд сіздің Conversion Rate (CR) көрсеткішіңізді тікелей арттырады.

2-себеп. Google-да ранжирлеу (SEO)

Google іздеу жүйесі Core Web Vitals көрсеткіштерін ресми түрде ранжирлеу факторы (ranking factor) ретінде қабылдайтынын мәлімдеген. Іздеу роботтары өз пайдаланушыларына тек сапалы ақпаратты ғана емес, сонымен қатар техникалық тұрғыдан мінсіз, жылдам жұмыс істейтін сайттарды ұсынуға тырысады. Егер сіздің сайтыңыз баяу болса, сізде қаншалықты тамаша мақалалар мен мықты сілтемелік профиль (backlinks) болса да, Google алгоритмдері оны іздеу нәтижелерінде төмендетеді.

PageSpeed Insights талаптарына сай оңтайландыру — бұл жай ғана көрсеткіштерді жасанды түрде көтеру емес, бұл органикалық трафиктің ұзақ мерзімді өсуіне негіз қалау. Мұнда тағы бір маңызды ұғым бар — краулинг бюджеті (crawling budget). Іздеу боттарының сіздің сайтыңызды индекстеуге бөлетін уақыты мен серверлік ресурстары шектеулі. Жылдам сайт боттарға бір кіргенде жүздеген беттерді жылдам аралап шығуға, жаңа контентті тезірек индекстеуге және ескісін жаңартуға мүмкіндік береді. Егер сервер TTFB көрсеткішін 1-2 секундқа созып жіберсе, боттар сайтты толық индекстеп үлгермейді.

Оңтайландыру процесінде біз браузердің рендеринг кезеңдерін (Critical Rendering Path) жеделдетеміз. Бұл дегеніміз — HTML кодын талдау, DOM және CSSOM ағаштарын құру, сондай-ақ JavaScript файлдарын орындау уақытын барынша қысқарту. Осылайша, техникалық оңтайландыру тікелей позициялар мен тегін органикалық трафикке айналады.

3-себеп. Инфрақұрылымды үнемдеу және серверлік тиімділік

Бұл бірден байқалмайтын, бірақ ірі жобалар үшін өте маңызды қаржылық сәт. Оңтайландырылмаған сайт — бұл қысылмаған ауыр суреттер, пайдаланылмайтын JavaScript және CSS мегабайттары, кэштеудің дұрыс бапталмауы және мәліметтер қорына (database) жасалатын мыңдаған қажетсіз сұраулар. Мұның бәрі веб-серверге (мысалы, Nginx немесе Apache) және деректер базасына (MySQL, PostgreSQL) шамадан тыс жүктеме түсіреді.

Сайтты оңтайландырған кезде біз тасымалданатын деректер көлемін және сұраулар санын (HTTP requests) азайтамыз. Мысалы, мәтіндік файлдарды Gzip немесе заманауи Brotli алгоритмімен қысу арқылы трафикті 70%-ға дейін үнемдеуге болады. Nginx конфигурациясында Brotli қысуды қосу үшін келесідей баптауларды қолданамыз:

Бұл сіздің серверіңіздің бірдей процессорлық (CPU) және жедел жады (RAM) ресурстарымен 10 есе көп пайдаланушыға қызмет көрсете алатынын білдіреді. Сіз тұтынатын ресурстар мен шығыс трафигі үшін төлейтін бұлттық орталарда (мысалы, Google Cloud Platform) мұндай оңтайландыру сіздің ай сайынғы шоттарыңызды тікелей екі-үш есеге азайтады.

Біздің оқиғалар: Google Cloud-тағы оңтайландыру тәжірибесі

Теория — бұл жақсы, бірақ нақты тәжірибе мен кейстерге тоқталайық. Сайтты Google Cloud инфрақұрылымына көшіру — бұл өнімділікті арттырудың қуатты қадамы, бірақ бұлттың өзі қисық жазылған кодты немесе оңтайландырылмаған суреттерді автоматты түрде түзете алмайды. Сондықтан миграциядан кейін біз әрқашан терең техникалық аудит пен оңтайландыру жүргіземіз. Міне, біздің тәжірибемізден екі қызықты кейс.

Бірінші оқиға: Медиа-портал қалай «құлауды» тоқтатып, топқа шықты

Бізге еліміздегі ірі жаңалықтар мен медиа ресурстарының бірі жүгінді. Олардың сайтының дизайны өте тартымды болғанымен, техникалық жағынан өте ауыр еді. Басты бетті жүктегенде браузер шамамен 15 мегабайт деректерді тартатын. Мобильді құрылғыларда PageSpeed Insights көрсеткіші мұңды 20-30 баллдың айналасында болды. Трафиктің кез келген шұғыл секіруінде (мысалы, маңызды жаңалық шыққан сәтте) серверлер жүктемеге шыдамай, «құлап» қалатын.

Бірінші қадам ретінде біз оларды Google Cloud ортасына көшіріп, контейнерленген қосымшаларды орналастыру үшін Cloud Run қызметін және автоскейлингті (autoscaling) баптадық. Бұл сервердің құлау мәселесін түбегейлі шешті, бірақ бұлттық инфрақұрылым үшін келген айлық шоттар бізді де, клиентті де қуантқан жоқ. Оның үстіне, SEO позициялары әлі де төмен деңгейде қала берді.

Содан кейін біз кодты және статикалық файлдарды оңтайландыруға кірістік:

• Желі шекарасында (edge) статика мен HTML жауаптарын қатаң кэштеу үшін Google Cloud CDN орнаттық. Ол үшін Cache-Control тақырыптарын дұрыс реттедік: Cache-Control: public, max-age=31536000.
• Суреттерді автоматты түрде заманауи, салмағы жеңіл WebP және AVIF форматтарына түрлендіретін микросервис енгіздік.
• JavaScript бандлдарын бөлдік (code splitting) және рендерді блоктайтын үшінші жақ скрипттерін async және defer атрибуттары арқылы кейінге қалдырдық.

Нәтижесінде басты беттің жалпы салмағы 15 МБ-тан 1.5 МБ-қа дейін төмендеді. PageSpeed Insights бағасы мобильді құрылғыларда 95+ балға дейін көтерілді.

Бұл не берді? Инфрақұрылым шығындары бірден 3 есеге төмендеді, өйткені сұраулардың 90%-дан астамын Cloud CDN серверлері өңдеп, негізгі Cloud Run контейнерлеріне жүктеме түсірмеді. Ал ең бастысы — бір жарым айдан кейін сайттың органикалық трафигі 40%-ға өсті, өйткені Google іздеу боттары сайтты жылдам әрі толық индекстей бастады.

Екінші оқиға: Интернет-дүкеннің қайта тірілуі және мобильді конверсияның өсуі

Келесі қызықты кейс — ірі e-commerce жобасы. Клиент мобильді құрылғылардан келетін пайдаланушылардың сатып алу конверсиясының тым төмендігіне шағымданды. Біз жүргізген терең техникалық аудит кезінде өте нашар INP (әрекетке жауап беру кідірісі) және жоғары CLS (верстканың секіруі) көрсеткіштерін анықтадық. Тауар карточкалары хаотикалық түрде жүктелетін, ал бөгде чат-виджеттер мен аналитика скрипттері әлсіз смартфондардың процессорын 100%-ға жүктеп, браузерді қатырып тастайтын.

Біз бұл жобаны заманауи Server-Side Rendering (SSR) қолдайтын Next.js фреймворкіне көшіріп, оны Google Cloud платформасында орналастырдық. Содан кейін ресурстарды жүктеу кезеңдерін реттедік:

• Барлық ауыр үшінші жақ аналитикалық скрипттерін негізгі ағыннан босату үшін PartyTown кітапханасын қолданып, оларды Web Workers ішіне оқшауладық.
• Барлық тауар суреттері үшін нақты ені мен биіктігін беріп, CLS мәселесін толық жойдық.
• Маңызды CSS стильдерін (critical CSS) тікелей HTML ішіне орналастырып (inline), қалғандарын асинхронды жүктеуге қойдық.

Бұл техникалық қадамдардан кейін мобильді PageSpeed көрсеткіші тұрақты түрде 88-92 балл аралығын көрсете бастады. INP метрикасы 120 миллисекундқа дейін төмендеді. Ең басты бизнес көрсеткіш — мобильді құрылғылардан сатып алу конверсиясы алғашқы айда-ақ 27%-ға өсті. Пайдаланушылар енді «Себетке қосу» батырмасын басқаннан кейін секундтап күтпейді, интерфейс нативті мобильді қосымша сияқты лезде жауап береді.

Түйіндеме

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

Сайтыңыздың жылдамдығын тексеріп, оңтайландыруды кейінге қалдырмаңыз. Қазіргі жоғары бәсекелестік жағдайында ең жылдам адам аман қалады және жеңеді. Жылдам болыңыз, бизнесіңізді бізбен бірге өсіріңіз!