Cloud CDN: Сайтыңызды Ақтауда да, Өскеменде де бір секундта қалай жүктеуге болады

Сәлем, хастлерлер, фаундерлер және қатал B2B-директорлар! Бүгін біз Алматы мен Астанадан тыс жерлерде өз қызметтерін немесе тауарларын сатуға тырысқан әрбір адамға таныс ауырсыну туралы сөйлесеміз. Мына жағдайды елестетіп көріңізші: сіз қуатты жарнамалық науқанды бастадыңыз, жаңа өніміңіздің керемет 4K-рендерлерін жүктеп салдыңыз, бүкіл Қазақстан бойынша таргет баптадыңыз. Метрикалар тамаша CTR көрсетеді, кликтер жүріп жатыр, бірақ... bounce rate (бас тарту көрсеткіші) ғарышқа ұшып, ал конверсия түбіне жетеді.

Сіз Google Analytics-ті ашып, өмірдің қатал шындығын көресіз: Ақтау, Өскемен, Қызылорда немесе Атыраудан келген пайдаланушылар жаппай қойындыны 4-секундта жауып тастайды. Неге? Өйткені сіздің "заманауи, әдемі және технологиялық" сайтыңыз оларда мәңгілік жүктеледі. Мобильді интернет кейде терезенің жанында бір аяқпен ғана ұстайтын аймақтарда сіздің 15 мегабайттық оңтайландырылмаған бандлыңыз бен 5 мегабайттық hero-суретіңіз — бұл үкім. Клиент сіздің әдемі қаріптеріңіз бен ауыр скрипттеріңіз жүктелгенше күтпейді. Ол ұсқынсыз, бірақ жылдам сайты бар бәсекелеске кетіп қалады.

Бұл мақалада біз Google Cloud ұсынатын Content Delivery Network (CDN) көмегімен статиканы жүктеу жылдамдығы мәселесін біржола қалай шешуге болатынын талдаймыз. Біз latency, edge-серверлер, кэштеу және фронтендтің дұрыс архитектурасы конверсияңызды (және, әрине, табысыңызды) қалай арттыратыны туралы сөйлесеміз.

CDN дегеніміз не және ол қазақстандық бизнеске не үшін қажет?

Алдымен түндерде код жазбайтындар үшін кішкене база. Классикалық хостинг қалай жұмыс істейді? Сізде мысалы, Алматыда жалға алынған сервер бар. Барлық суреттер, CSS-стильдер, JavaScript-файлдар осы серверде жатыр. Егер сайтқа Алматыдан пайдаланушы кірсе, сигнал жылдам ұшады, пинг (latency) минималды, сайт бір секундта жүктеледі.

Ал енді Ақтаудан келген пайдаланушыны елестетейік. Оның сұранысы Алматыға жету үшін мыңдаған километр оптикалық талшық, көптеген маршрутизаторлар мен магистральдық провайдерлер арқылы өтіп, содан кейін 5 мегабайттық суретпен бірге сол жолмен кері қайтуы керек. Бұл уақытты алады. Егер сіздің серверіңіз тіпті Франкфуртта орналасқан болса (ал көпшілігі әлі күнге дейін солай жасайды), онда ping өте ұятты мәндерге дейін өседі.

CDN (Content Delivery Network) — бұл бүкіл әлем бойынша бөлінген серверлер (edge nodes) желісі. Сіз Cloud CDN қосқан кезде сіздің статикалық файлдарыңыз (суреттер, бейнелер, қаріптер, JS/CSS) осы серверлерде автоматты түрде көшіріледі және кэштеледі. Ақтаудан келген пайдаланушы сіздің сайтыңызды ашқан кезде, суреттер оған алыстағы Алматыдан (немесе Германиядан) емес, ең жақын CDN түйінінен ұшады. Кэштеу сиқыры іс жүзінде!

Баяу сайттың анатомиясы: типтік фейлдер

ОЗАТ зертханасында жұмыс істеген жылдары біз жүздеген жобаларға аудит жүргіздік. Фронтендте қандай ең жиі кездесетін багтарды көретінімізді білесіз бе?

• Оңтайландырылмаған медиа: Компрессиясыз тікелей iPhone-нан (әрқайсысы 8 мегабайттан) түпнұсқа фотосуреттерді басты бетке жүктеу.
• Үлкен бандлдар: Әзірлеушілер code splitting туралы ұмытып, барлық JavaScript-кодты (соның ішінде тек бір бетте қажет ауыр кітапханаларды) салмағы 4 МБ болатын бір үлкен main.js файлына тығып қойған.
• Кэштеудің болмауы: Браузерге: "Ей, бұл сурет өзгерген жоқ, оны өз кэшіңнен ал!" деп айтудың орнына, сервер әр жолы статиканы қайта береді.
• Сұраныстардың тым көптігі: Спрайттар немесе SVG-символдарды пайдаланудың орнына бетке жеке файлдар ретінде 50 ұсақ белгіше қосылған (бұл HTTP/2 арқылы онша маңызды болмаса да, бәрібір әсер етеді).

Осы факторлардың әрқайсысы жүктеуге жүздеген бағалы миллисекундтар қосады. Amazon статистикасы бойынша әрбір қосымша 100 мс кешігу сатылымды 1%-ға төмендетеді. Егер сіздің сайтыңыз екі секундтың орнына 8 секунд жүктелсе, қанша жоғалтатыныңызды есептеп көріңіз.

Google Cloud CDN: Жылдамдықты ғарыштық мәндерге дейін көтереміз

Неліктен біз ОЗАТ-та өз жобаларымыз үшін дәл Google Cloud CDN таңдаймыз? Өйткені Google — бұл жай ғана бұлт емес, бұл әлемдегі ең үлкен магистральдық желілердің біріне ие компания (сәлем, YouTube). Олардың ондаған елдерде қатысу нүктелері (PoP - Points of Presence) бар және олардың желісі үнемі кеңейіп келеді.

Бұл іс жүзінде қалай көрінеді:

1. Сіз барлық статикаңызды Cloud Storage (объектілік қойма) ішіне саласыз.
2. Қойманың алдына біз HTTP(S) Load Balancer қоямыз.
3. Баланстаушыда бір рет басу арқылы "Enable Cloud CDN" құсбелгісін қосамыз.
4. Дайын! Сіз тамашасыз. Енді Google-дың өзі файлдарыңызды пайдаланушыларға жақын орналасқан edge-серверлерінде кэштейтін болады.

Сонымен қатар, Cloud CDN артық код жазбай-ақ, "қораптан шыққан күйінде" керемет нәрселер жасай алады. Мысалы, ол трафикті одан әрі үнемдей отырып, клиентке жібермес бұрын мәтіндік файлдарды (HTML, CSS, JS) Brotli немесе Gzip көмегімен автоматты түрде қыса алады.

ОЗАТ-тың нақты кейсі: Қосалқы бөлшектерді сату порталын қалай 4 есе тездеттік

Теориядан қатал практикаға көшейік. Бізге арнайы техника мен қосалқы бөлшектерді сататын ірі компания жүгінді. Негізгі мақсатты аудитория — өнеркәсіптік аймақтардағы (Атырау, Ақтау, Жезқазған, Өскемен) жабдықтаушылар мен инженерлер. Жігіттерде бөлшектердің ауыр сызбалары мен фотосуреттері бар 500+ тауардан тұратын каталог болды.

Мәселе: Клиенттерден сайттың "баяулайтыны" туралы шағымдар. Метрикалар бойынша аймақтарда каталог бетін толық жүктеудің орташа уақыты (Time to Interactive) 12 секундты құрады. Пайдаланушылар фотосуреттердің жүктелуін күтпей, колл-орталыққа телефон шалып, оны шамадан тыс жүктеп жіберді.

Біз не істедік:

1. Фронтендке толық рефакторинг жүргіздік. Жинақтаушыны (Vite) кодты ұсақ бөліктерге бөлетіндей (code splitting) етіп баптадық.
2. Суреттерді автоматты түрде оңтайландыруды баптадық. Админкаға жүктеген кезде түпнұсқалар заманауи форматтарға (WebP, AVIF) түрлендіріледі және қажетті өлшемдерге сәйкес ресайз жасалады.
3. Барлық статиканы (суреттер, JS, CSS, қаріптер) жеке Google Cloud Storage бакетіне шығардық.
4. Google Cloud CDN қостық.
5. Клиенттердің браузерлері статиканы барынша ұзақ сақтауы үшін кэштеудің агрессивті тақырыптарын (Cache-Control) баптадық.

Нәтиже:

Аймақтарда бетті жүктеу уақыты 12 секундтан 2.5 секундқа дейін төмендеді! Қосалқы бөлшектердің фотосуреттері лезде ашыла бастады, өйткені олар ең жақын edge-сервердің кэшінен тартылды. Негізгі backend-серверге жүктеме 60%-ға төмендеді, өйткені енді ол тек деректері бар JSON (API) береді, ал барлық ауыр статиканы Google таратты.

Релизден кейінгі келесі айда себетке қосу конверсиясы 28%-ға өсті. Колл-орталық жеңіл дем алды, ал фаундер ақыры маркетингке салынған инвестициялардың қайтарымын көрді.

Тек жылдамдық қана емес, сонымен қатар қауіпсіздік

Айтпақшы, Cloud CDN пайдаланудың жағымды бонусы ретінде кірістірілген қорғаныс табылады. Сіздің статикаңыз Google-дың жаһандық желісі арқылы таратылған кезде, түпнұсқа серверіңіз (origin) интернеттен тікелей қол жеткізуден жасырылады. Бұл сізді DDoS шабуылдарының көптеген түрлерінен қорғайды. Егер біреу сіздің сайтыңызды сурет сұраныстарымен толтырып, оны құлатуға тырысса, ол Google серверлерін "ұрады" (ал оларға сіздің DDoS-шабуылдарыңыз шыбын шаққандай ғана), ал сіздің бэкендіңіз жүктемені тіпті сезбейді.

Сонымен қатар, баланстаушымен бірге Google Cloud Armor — қолданбаңызға жақындағанда SQL инъекцияларын, XSS және басқа зиянды трафикті сүзетін қуатты Web Application Firewall (WAF) қосуға болады.

Чек-лист: сіздің фронтендіңіз аймақтық трафикке дайын ба?

Егер сіз баяу фронтендтің кесірінен клиенттерді жоғалтып жатпағаныңызды тексергіңіз келсе, осы чек-лист бойынша өтіңіз:

1. Сайтыңызды Chrome DevTools (Network қойындысы) арқылы ашыңыз.
2. Желілік троттлингті (баяу интернетті эмуляциялау) қосыңыз — "Fast 3G" немесе "Slow 4G" таңдаңыз.
3. Кэшті өшіріңіз (Disable cache) және бетті жаңартыңыз.
4. "Load" параметріне (толық жүктеу уақыты) және тасымалданған деректердің жалпы салмағына (Transferred) назар аударыңыз. Егер салмағы 2-3 МБ-тан асса, ал жүктеу уақыты 5 секундтан асса — сізде проблемалар бар.
5. Сурет форматтарын тексеріңіз. Егер сіз 100 килобайт WebP орнына 2 мегабайттық PNG жүктеп жатсаңыз — тәсілді шұғыл өзгертіңіз.
6. Статиканың қайдан жүктелетінін қараңыз. x-cache: HIT тақырыптары бар ма?

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

Сіздерге жоғары конверсиялар мен жылдам пингтер тілейміз!