Шляхі паскарэння сайта і скрыптоў з дапамогай CDN

1. Чаму хуткасць так важная?
2. Карысць CDN для павелічэння хуткасці
3. Як ажыццяўляецца паскарэнне CDN
4. множныя скрыпты
5. геаграфія
6. Найбуйнейшыя CDN ў свеце
7. завяршэнне

Вэб-дызайнеры добра ведаюць, што выдатны дызайн мае асаблівае значэнне для сайта. І калі яны давяраюць якой-небудзь канцэпцыі, якая, на іх думку, з'яўляецца лепшай і эфектыўнай, то для некаторых карыстальнікаў або новых наведвальнікаў гэта можа стаць вялікай праблемай. Вялікі дызайн сайта, прыгожы, функцыянальны, анімацыйны і іншае, і іншае можа апынуцца вельмі і вельмі вялікай праблемай. нават для вэб-вярстальніка, для распрацоўніка . Папросту дадамо візуальнай складнікам, багацце убудоў, вялікіх кавалачкаў кода, множныя зменныя, умовы і ...

Над аптымізацыяй працы ўсяго гэтага сумеснага тварэння працуюць у роўнай меры і вярстальшчыкі, і дызайнеры, але адным толькі зменай кода або сціскам jpg-малюнкаў справа не сканчаецца. Гаворка ідзе пра хуткасць працы сайта, аб аптымізацыі і наладзе абмену і перадачы дадзеных.

Здавалася б, што гэта можа толькі ўскосна дакранацца вярстальшчыкі і дызайнераў, але кліенты ... такія ўжо кліенты, і часцяком заказваюць не проста стварэнне сайта, вёрстку, але і разгортванне на сэрвэры, нават падтрымку маломальскую хочуць атрымаць. Вось сёння разгледзім адзін з варыянтаў працы і аптымізацыі гатовага дызайнерскага праекта па паскарэнню, але ... і не толькі.

У прыватнасці, гаворка пойдзе пра падключэнне CDN, нягледзячы на тое, што хтосьці з чытачоў падумае: «з гэтым усё ясна, шмат чаго я чытаў ужо». Ніхто і не спрачаецца, але часам карысна ўсё сабраць у адным месцы і паглядзець на пытанне аптымізацыі трохі з іншага боку.

Чаму хуткасць так важная?

Пра тое наколькі важная хуткасць загрузкі сайта ў вокнах браўзэраў карыстальнікаў даследаванні праводзіліся і праводзяцца пастаянна. Напэўна, ужо такім заключэннем нікога ў нашы дні і не здзівіш, а самі мы часцяком сутыкаемся з момантамі, калі раптам старонкі сайтаў пачынаюць ну ... ооочнеь доўга падгружаецца. Сайты, якія не з'яўляюцца дастаткова хуткімі, ствараюць негатыўнае ўспрыманне і ўплыў.

Фактычна час загрузкі сайта істотна адбіваецца на каэфіцыенце канверсіі, а гэта, у сваю чаргу, уплывае на развіццё брэнда ў цэлым. Адначасова з тым, як час загрузкі становіцца ўсё вышэй і вышэй, каэфіцыент канверсіі зніжаецца ў прагрэсіі. Таму аптымальнай хуткасцю загрузкі старонак сайта прынята лічыць каля 2,4 секунд.

Карысць CDN для павелічэння хуткасці

У CDN шмат плюсаў для выкарыстання, але мы спынімся на тых момантах, якія могуць дапамагчы ў паскарэнні загрузкі сайта. Прасцей кажучы, CDN значна лепш абсталяваныя, чым большасць паслуг хостынгу, нават нягледзячы на ​​VPS або выдзелены сервер, прадстаўляючы сабой сетку для апрацоўкі трафіку вэб-сайта. Каб крыху было больш зразумела, CDN ўяўляе сабой сукупнасць сервераў у ЦОД, якія дастаўляюць сайты канчатковым карыстачам (усе, што на сайтах ёсць: карцінкі, відэа, тэкст, убудовы і гэтак далей).

Віртуальны хостынг, як правіла, аптымізаваны для прадастаўлення стабільнай асяроддзя, у якой ваш сайт можа працаваць на PHP або на іншых папулярных асяроддзях хостынгу, CMS і інш. Такая сістэма, у большасці выпадкаў, не накіраваная на аптымізацыю для хуткасці працы сайта ў цэлым. У процівагу віртуальнай хостынгу асноўная мэта CDN накіравана на аказанне дапамогі ў маланкавай дастаўцы вэб-сайта.

Але як жа на самай справе CDN можа паскорыць сайт, што ў ім такога незвычайнага і павабнага?

Як ажыццяўляецца паскарэнне CDN

Каб зразумець, у чым перавагі CDN, ўспомнім, чаму наогул сайт можа быць павольным: перагружанасць сервера або яго павольная праца, вялікія па памеры малюнка на сайце, багацце скрыптоў, сцэнарыяў, што не былі аптымізаваныя або проста, іх вельмі многа; геаграфічна выдаленае размяшчэнне сервераў ў адносінах да знаходжання мэтавай аўдыторыі.

Так, існуюць і іншыя прычыны, але яны не так часта сустракаюцца. І калі з малюначкамі і выбарам добрага хостынгу яшчэ можна вызначыцца і папрацаваць, то апошнія моманты патрабуюць нашага асобнага разгляду.

множныя скрыпты

Калі мы пачынаем сваю творчасць у якасці вэб-дызайнера або вярстальніка, здаецца, што ... «як цудоўна ўсё вакол». Можна ўсталяваць асобныя скрыпты, фішкі, падабраць і тое і сёе, і практычна самому нават пісаць код не патрэбны, паколькі ёсць гатовыя шаблоны. Мы атрымліваем асалоду ад уяўнай свабодай, тэстуем і ўсталёўваны і ... сайт запавольваецца ў працы, сайт перагружаецца. Хай запаволенне адбываецца на долі секунд, але яно ёсць і назапашваецца.

І нават «прапаленыя» прафесіяналы вярстальшчыкі таксама сітавінай трапляюцца ў гэтую пастку з той прычыны, што імкнуцца выкарыстаць дзесяткі розных убудоў і пратэставаць іх функцыянальнасць на адпаведнасць самым вытанчаным патрабаванням заказчыка. І ў выніку з'яўляюцца пабочныя эфекты ў працы, якія не так проста і хутка вырашыць адным выдаленнем скрыпту.

У рэчаіснасці, кожны убудова, што усталёўваецца на сайце, дадае файлы Javascript, CSS файлы і патрабуе больш высокай прадукцыйнасці вашага сайта. Падчас тэставання прадукцыйнасці гэта можна заўважыць па вялікай колькасці запытаў да гэтых файлаў.

Напрыклад, можна ўбачыць колькасць ужо існуючых запытаў да сайта праз «код элемента» у Opera. Тры тыпу сайтаў і розная колькасць запытаў, насычэнне скрыптамі і пр.

Чым менш - тым лепш. Сціскайце, аб'ядноўвайце, памяншайце код скрыптоў, уключыце HTTP / 2 і, у ідэале, трымаеце сайт далей ад цяжкіх убудоў.

У дадзеным выпадку CDN не дапаможа вырашыць, якія убудовы захаваць, а якія выдаліць, CDN можа фактычна выконваць "на ляту" сціск і мінімізацыю скрыптоў, каб зрабіць агульны памер змесціва вашага сайта менш, і, такім чынам, хутчэй у працы.

Трэцяй вельмі важнай рэкамендацыяй з'яўляецца ўключэнне HTTP / 2. Падрабязна пра перавагі HTTP / 2 мы пагаворым асобна ў будучыні, але зараз звернем увагу на той факт, што пратакол быў напісаны (2015, падтрымліваецца ўсімі браўзэрамі) адмыслова для аптымізацыі часу загрузкі вэб-сайтаў, у прыватнасці, тых сайтаў, якія маюць шмат розных рэсурсаў для абслугоўвання. Адпаведна, ўскосна пераход на дадзеных пратакол ўплывае на пазіцыі сайта.

Большасць паслуг CDN дазваляе хутка і лёгка падключыць HTTP / 2 да вэб-сайту (хоць і без яго можна), што і робіць імгненны прырост хуткасці.

геаграфія

Выдатна, калі вы ствараеце праект для мясцовай аўдыторыі. Але калі сайт прызначаны для міжнародных карыстальнікаў? Падабраць добры хостынг і сервер становіцца цяжкім. У CDN ёсць сетка з сотняў сервераў у дзясятках месцаў па ўсім свеце. Гэтыя серверы капіююць вашыя выявы і статычныя рэсурсы, такія як Javascript і CSS файлы да сябе. Калі ж карыстальнік затым трапляе на ваш сайт, цяжкавагавыя рэсурсы будуць загружацца з таго сервера, які фізічна размешчаны як мага бліжэй да дадзенага карыстальніку. Зразумела, гэта значна памяншае праблему адлегласці і дае сайту вялікія перавагі пры загрузцы.

Найбуйнейшыя CDN ў свеце

На сённяшні дзень аптымізацыяй CDN карыстаюцца практычна ўсе буйныя кампаніі. Паскарэнне працы буйных інфармацыйных парталаў папросту без яго немагчыма. Калі ж справа даходзіць да самага звычайнага інтэрнэт-крамы або асабістага сайта, кафэ, блога, то CDN таксама зручны і не бывае лішнім, тым больш, што існуюць магчымасці падлучэння яго і без неабходнасці марнаваць фінансы. А гэта азначае, што стварыць той жа сайт-партфоліо можна неверагодна «крутых» з візуальнай пункту гледжання.

Большасць пастаўшчыкоў паслуг CDN прапануюць свабодны план, які забяспечыць неабходную функцыянальнасць кэшавання, якую мы абмяркоўвалі вышэй. Як правіла, акрамя аптымізацыі кантэнту, вы таксама атрымліваеце падтрымку па забеспячэнню бяспекі сайта. З часам, калі сайт разрасцецца, то паўстане і лагічная сітуацыя ў неабходнасці забеспячэння і іншых магчымасцяў і функцыяналу. Тады можна пераходзіць і на платныя тарыфы.

Але калі звяртаючыся да тых CDN, якія прадстаўленыя ў свеце, то звернем увагу на:

Incapsula - адзін з вядучых пастаўшчыкоў хмарных сістэм бяспекі, які таксама прапануе магчымасці па паскарэнню сайтаў. У яго ёсць бясплатны тарыфны план з асноўным наборам функцый, які падыходзіць для блога або невялікага сайта. Напрыклад, кэшаванне, сціск, аптымізацыя скрыптоў і малюнкаў, абарона ад спам-ботаў, капчу, спамавых каментароў, падтрымка IPV6, маніторынг, статыстыка ў рэальным часе, справаздачы штотыднёвыя.

Аднак для бізнесу або электроннай камерцыі спатрэбіцца больш складаныя і функцыянальныя планы з абаронай ад DDoS, падтрымкай Web Application Firewall і інш.

Серверы Incapsula знаходзяцца ў 30 ЦОД па ўсім свеце, і адпаведна, забяспечваюць хуткую загрузку дадзеных практычна ўсім карыстальнікам. На бягучы момант паслугамі пастаўшчыка карыстаюцца больш за 500 000 сайтаў, сярод якіх Siemens, Wix, T-Mobile, Moc, Hitachi і іншыя.

CloudFlare - яшчэ адзін найбуйнейшы гулец на рынку бяспекі сайтаў і паскарэння іх загрузкі. Яго паслугамі карыстаецца больш за 4 мільёны сайтаў, а серверы знаходзяцца ў 118 ЦОД.

Яны таксама прапануюць бясплатны план з магчымасцямі кэшавання дадзеных, асінхронныя загрузкі Javascript, HTTP / 2 і SPDY, WebSockets, абарону ад DDoS, абарону ад спаму і многае іншае. Настройка простая і падключаецца досыць хутка. Але калі патрабуецца мабільная аптымізацыя, бяспека больш высокага ўзроўню, то давядзецца пераходзіць на платныя тарыфы.

Паколькі CloudFlare з'яўляецца найбольш папулярным рашэннем аптымізацыі сайта, то і выкарыстоўваюць яго такія кампаніі як Reddit, Mozilla, Feedly, Yelp, StackOverflow, таксама і Google, Microsoft, Qualcomm.

jsDelivr - як ужо зразумела па назве, разгружае бібліятэкі JavaScript, JQuery, шрыфты, CSS і многае іншае, што здольна прытармажваць загрузку сайта. Таксама ён абслугоўвае файлы з Cloudflare, Keycdn, Quantil і MaxCDN. Асаблівасць jsDelivr у тым, што можна загрузіць некалькі файлаў з дапамогай аднаго запыту HTTP і няма ніякага абмежавання трафіку.

Яго паслугамі карыстаюцца навінавыя агенцтвы New-York Times, NBC News, а таксама і Mozilla.

Зразумела, што акрамя гэтых трох, найбольш вядомых, існуюць і такія платформы як Datapath (З падтрымкай аптымізацыі працы ў воблачным Office 365, Azure, Google Cloud), Photon ад Jetpack і Netlify . І так, яны могуць выглядаць, як нешта складанае і «наварочанае», але па факце вырашаюць самыя выдатныя задачы, нават калі ў вас самы звычайны невялікі сайт з багаццем эфектаў, анімацыі, малюнкаў і іншага.

Падключэнне CDN ажыццяўляецца звычайна ў выглядзе ўбудовы, які перапісвае URL статычных рэсурсаў, падстаўляючы да адрасу cdn. example.com, дзе cdn гэта той адрас, што даецца вам пасля падлучэння да сістэмы.

завяршэнне

Як мы заўважылі вышэй, падлучэнне CDN не так цяжка і дорага, як можна было б падумаць. Але пры гэтым, і дызайнер, і вярстальнік могуць быць упэўненыя ў тым, што нават, калі яны зрабілі ўсю якая залежыць ад іх работу па аптымізацыі сайта (скрыптоў, малюнкаў, відэа і інш.), То CDN дадаткова здольны ў разы павялічыць хуткасць загрузкі сайта . А гэта, у сваю чаргу, прывядзе да паляпшэння UX, да канверсіі, папулярнасці, развіццю брэнда і вашага прафесіяналізму таксама. І тым больш, дазволіць выкарыстоўваць і самыя апошнія версіі бібліятэк, рухавічкоў , Насычаць сайт анімацыяй, эфектамі, дадаваць рэсурсаёмістыя VR і панарамы высокай якасці і гэтак далей.

Акрамя налады і разгортвання сайта на серверы існуюць і пытанні бяспекі, а таму CDN здольны ў разы выбавіць і з гэтым пытаннем.

Не мае значэнне які добры вы вярстальнік і як добра пішаце скрыпты і наладжваеце бібліятэкі. Усё роўна сайт можа падтармажваць, ён можа апынуцца перагружаным (нават калі вы пішаце код самі, а не карыстаецеся CMS). А значыць, выкарыстанне CDN не будзе лішнім пры працы над любым тыпам сайта.