Сіздің сайттарыңызды тезірек жүктеуді қалай жасауға болады

Мазмұны

• 01. Баяулау бағасы
• 02. Мазмұнды жеткізу желілері
• 03. Қосымша әдістер
• 04. Алдын ала қарау және алдын-ала ескеру
• 05. Ajax мазмұнын жүктеу
• Ұнады ма? Оларды оқыңыз!

• Қажетті білім: Аралық CSS және JavaScript, негізгі HTML5
• Қажет: Жылдамдау үшін веб-сайт
• Жоба уақыты: Веб-сайтқа өте тәуелді

Бұл мақала алғаш рет .net журналының 231 санында шыққан

Әрбір веб-сайт үшін жылдамдық маңызды болуы керек. Google сайттың жылдамдығын іздеу нәтижелері үшін рейтингтік көрсеткіш ретінде қолданатыны белгілі факт. Бұл бізге келушілер жылдам веб-сайттарды қалайтындығын айтады - бұл жерде таңқаларлық жайт жоқ!

Якоб Нильсен 1993 жылы жауап берудің үш шегі туралы жазды; Интернеттегі стандарттар бойынша зерттеу ескі болғанымен, 19 жыл ішінде біздің психологиямыз айтарлықтай өзгерген жоқ. Ол егер жүйе 0,1 секунд ішінде жауап берсе, ол лездік ретінде қабылданады, ал бір секундтан жылдам жауаптар пайдаланушының ой тасқынын үзбеуге мүмкіндік береді дейді. 0,1 секундта веб-парақты жүктеу мүмкін емес шығар; шамамен 0,34 секунд Google UK-тің ең жақсы жүктеме уақытын білдіреді, сондықтан бұл неғұрлым шынайы (өршіл болса да) эталон ретінде қызмет етеді. 0,34-тен 1 секундқа дейінгі аймақта парақтың жүктелуі қол жетімді және маңызды.

01. Баяулау бағасы

Мұндай мақсаттар сіздің веб-сайтыңызға және бизнесіңізге нақты әсер етеді. Google компаниясының Марисса Майер 2006 жылы іздеу жүйесімен қайтарылған нәтижелер саны 30-ға дейін көбейген эксперимент туралы айтқан болатын. Бұл парақтың жүктелу уақытын шамамен 500 миллионға азайтты, трафиктің 20% төмендеуі осыған байланысты болды. Амазонка, парақты жүктеуді жасанды түрде 100 мс қадаммен кешіктірді және «тіпті өте аз кідірістер кірістің айтарлықтай және қымбатқа түсуіне әкеледі» деп тапты.

Баяу веб-сайттармен байланысты басқа жағымсыз қауымдастықтарға сенімділіктің төмендеуі, сапаның төмендеуі және сайттың онша қызықты және тартымды болып табылмауы жатады. Пайдаланушының көңіл-күйінің жоғарылауы және қан қысымының жоғарылауы - бұл бізде бір кездері болған тағы екі әсер! Бұл мәселелерден аулақ болу үшін веб-сайттардың жылдам жүктелуіне қалай сенімді бола аламыз?

Алдымен қарау керек нәрселердің бірі - сіздің HTML кодтың мөлшері. Бұл, мүмкін, көпшілік назарынан тыс қалатын салалардың бірі болуы мүмкін, мүмкін қазіргі кездегі кең жолақты қосылыстар онша маңызды емес деп есептейді. Мазмұнды басқарудың кейбір жүйелері олардың мөлшерімен айтарлықтай либералды болып табылады - бұл өз сайттарыңызды қолмен жасаудың жақсы себептерінің бірі.

Нұсқаулық ретінде сіз көптеген парақтарды 50KB HTML кодына сыйғызуыңыз керек, ал егер сіз 20KB-тан төмен болсаңыз, онда сіз өте жақсы жұмыс жасайсыз. Ерекшеліктер бар екені анық, бірақ бұл өте жақсы ереже.

Қазіргі уақытта адамдар мобильді құрылғыларда толық веб-сайттарды жиі қарайтынын ескеру қажет. Ұялы телефоннан қаралған сайттар арасындағы жылдамдық айырмашылықтары көбінесе байқалады, себебі олардың сымды қосылымдарға қарағанда жылдамдығы төмен. Бір параққа өлшемі 100 КБ айырмашылықтары бар екі бәсекелес веб-сайттар кейбір баяу мобильді желілерде жүктеу уақытының бір секундтан артық айырмашылығын білдіруі мүмкін - бұл Якоб Нильсен көрсеткен «үзілген ой ағыны» аймағында. Триммерді, жылдам веб-сайтты қарау өте аз ренішті болады, майлы веб-сайттар үшін бәсекелестік артықшылық беріп, қайталанған кірулерді ынталандыруға ұзақ жол.

Көптеген веб-серверлердің маңызды ерекшелігі - HTML-ге қысылған форматта қызмет ету мүмкіндігі. HTML табиғаты бойынша көптеген қайталанатын деректерді қамтитындықтан, оны қысу үшін тамаша үміткер етеді. Мысалы, бір үй парағының 18.1KB HTML сығылған форматта қызмет еткенде 6.3KB дейін азаяды. Бұл 65 пайыз үнемдеу! Сығымдау алгоритмдері тиімділікті жоғарылатады, сондықтан олар мәтіннің негізгі мәтінін өңдеуге мәжбүр болады, сондықтан сіз HTML парақтарымен үлкен үнемдеуді көресіз. 138.1K парағы танымал форумда қысылған кезде 25.7K дейін қысқарады, үнемдеу 80% -дан жоғары - бұл ресурстардың жалпы берілу уақытын едәуір жақсарта алады.

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

02. Мазмұнды жеткізу желілері

Мазмұнды жеткізу желілері (CDN ретінде белгілі) сіздің веб-сайтыңыздың жүктеу уақытын айтарлықтай жақсарта алады. CDN - бұл бүкіл әлем бойынша таратылған серверлердің жиынтығы, олар сіздің мазмұныңыздың көшірмелерін сақтайды. Пайдаланушы сіздің веб-сайтыңыздан CDN-де орналастырылған суретті сұрағанда, пайдаланушыға географиялық жағынан жақын CDN-дегі сервер кескінге қызмет ету үшін пайдаланылады.

CDN қызметтері өте көп. Олардың кейбіреулері өте қымбат, бірақ арзан CDN-ге қарағанда жақсы өнімділікті ұсынады деп жарнамалайды. Тегін CDN қызметтері де егін жинауды бастады, сондықтан олар сіздің веб-сайтыңыздың өнімділігін жақсарта алатынын білу үшін эксперимент жүргізуге тұрарлық.

CDN-ді пайдаланған кезде, SEO мәнін жоғалтпау үшін оны дұрыс орнатқаныңыз маңызды. Сіз өзіңіздің веб-сайтыңыздың сипатына байланысты доменде орналастырылған суреттерден көп трафик алуы мүмкін және оларды сыртқы доменге жылжыту сіздің трафигіңізге кері әсерін тигізуі мүмкін. Amazon S3 қызметі қосалқы доменді CDN-ге бағыттауға мүмкіндік береді, бұл CDN-де өте қолайлы функция.

Cookie файлдарын орнатпайтын басқа домендегі (мысалы, CDN) немесе домендік атыңыздағы қосалқы домендегі мазмұнның қызмет етуінің тағы бір маңызды артықшылығы бар. Куки доменге орнатылған кезде, шолушы куки деректерін әр сұраныспен сол домендегі барлық ресурстарға жібереді. Көбінесе кескіндер, CSS немесе JavaScript файлдары сияқты статикалық мазмұн үшін куки деректері қажет емес. Веб-қолданушылардың жүктеу жылдамдығы қол жетімді жүктеу жылдамдығынан әлдеқайда баяу болады, бұл кейбір жағдайларда парақты жүктеу уақытының айтарлықтай баяулауын тудыруы мүмкін. Статикалық мазмұнға қызмет ету үшін басқа домендік атауды пайдалану арқылы браузерлер cookie файлдары туралы қажет емес мәліметтерді жібермейді, өйткені олардың қатаң домендік саясаты бар. Бұл әр ресурсқа сұраныс уақытын едәуір жеделдете алады.

Веб-сайттардағы cookies файлдары HTTP сұрауының көп бөлігін қабылдай алады; 1500 байт үлкен желілер үшін ең көп қолданылатын бір пакеттік шектердің айналасында болады, сондықтан сіз HTTP сұрауларыңызды осы шекте сақтай алсаңыз, бүкіл HTTP сұранысы бір пакетте жіберілуі керек. Бұл бетті жүктеу уақытында жақсартулар ұсына алады. Google сіздің cookies файлдарыңыздың мөлшері 400 байттан аз болуы керек деп кеңес береді - бұл сіздің веб-сайтыңыздың HTTP сұрауларын бір пакеттік / 1500 байт шегінде ұстауға ұзақ уақыт кетеді.

03. Қосымша әдістер

Сіздің сайтыңыздың жылдамдығына үлкен пайда әкелетін басқа, оңайырақ енгізілетін әдістер бар. Біреуі - JavaScript файлдарын HTML құжатының соңына, негізгі мәтіннің жабылуының алдында қою, өйткені браузерлерде бір хосттан параллель жүктеп алуға болатын ресурстардың саны бар.

1999 жылы жазылған түпнұсқа HTTP 1.1 спецификациясы браузерлерге әр хост атауынан параллель екі ресурстарға дейін ғана жүктеуді ұсынады. Бірақ қазіргі заманғы браузерлердің шегі алтыға жуық. Егер сіздің веб-парағыңызда алтыдан астам сыртқы ресурстар болса (мысалы, суреттер / JavaScript / CSS файлдары), сізге бірнеше домендерден қызмет ету үшін жақсартылған өнімділікті ұсына алады (мысалы, негізгі домендік атыңыздағы ішкі домен немесе CDN) шолғышты қамтамасыз ету үшін параллель жүктеу кезінде максималды шегіне жетпейді.

Бірнеше сұранысты әр түрлі домендерге бөлудің орнына, оларды біріктіру туралы ойлануыңыз мүмкін. Әрбір HTTP сұранысында онымен байланысты үстеме ақы бар. Веб-сайтыңыздағы белгішелер сияқты ондаған кескіндер бөлек ресурстар ретінде қызмет етеді, бұл көптеген ысырапшылдықты тудырады және веб-сайтыңыздың баяулауына әкеледі, көбінесе маңызды. Суреттерді «спрайт парағы» деп аталатын бір суретке біріктіру арқылы сіз сұраныстардың санын азайта аласыз. Кескінді көрсету үшін сіз CSS-те элементтің ені мен биіктігін бейнеленетін сурет өлшеміне қойып, фонды спрайт парағына орнатып анықтайсыз. Көмегімен фондық позиция қасиеті, біз фондық спрайт парағын орынға жылжыта аламыз, сонда ол сіздің сайтыңызға қажет сурет ретінде шығады.

Sprite парақтары басқа артықшылықтарды ұсынады. Егер сіз тышқан суреттерін қолдансаңыз, оларды бір спрайт парағында сақтау тышқан басталған кезде кешіктірілмейтіндікті білдіреді, өйткені тышқан суреті спрайт парағына жүктелген! Бұл пайдаланушының жүктеу уақытын едәуір жақсартып, сезімтал веб-сайтты әлдеқайда құра алады.

Басқа суреттердің өлшемдерін көрсету img /> тегтер - бұл сіздің веб-парағыңыздың жүктеу уақытын арттырудың маңызды факторы. Беттерде суреттер үшін ені мен биіктігін анық орнатпау девс үшін әдеттегідей. Бұл әр кескіннің (жартылай) жүктелуіне қарай парақтың өлшемін секірулер кезінде үлкейтуге әкелуі мүмкін, бұл заттардың салғырттығына әкеледі. Егер нақты өлшемдер орнатылса, браузер жүктеу кезінде кескінге орын сақтай алады, бет өлшемінің өзгеруін тоқтатады және кейде пайдаланушының жүктеу уақытын айтарлықтай жақсартады.

Сонымен, мұны жақсарту үшін тағы не істей аламыз? Алдын ала алу - HTML5-те қол жетімді осындай мүмкіндіктердің бірі. Алдын ала жүктеу пайдаланушы шынымен сұрамай тұрып беттер мен ресурстарды жүктеуге мүмкіндік береді. Қазіргі уақытта оны қолдау Firefox және Chrome-да (балама синтаксиспен) шектелген. Алайда, оны жүзеге асырудың қарапайымдылығы және сіздің веб-парағыңыздың жүктелетін уақытты жақсартудағы пайдасы соншалық, оны іске асыруды ойластырған жөн.

! —Firefox алдын ала алу ->
сілтеме rel = «prefetch» ​​href = «http://www.example.com/page2.html»>
! —Chrome Prerender ->
сілтеме rel = «prerender» href = «http://www.example.com/page2.html»>
! —Бір қатарда ->
сілтеме rel = «prefetch prerender» href = «http://www.example.com/page2.html»>

Алдын ала алу мен алдын-ала қараудың мінез-құлқындағы айырмашылық бар. Mozilla's алдын ала алу берілген URL үшін жоғарғы деңгейлі ресурстарды жүктейді, әдетте HTML парақтың өзі, және жүктеу тоқтайтын жерде. Google's алдын ала балалар ресурстарын да жүктейді, және Google сөздері бойынша «пайдаланушыға парақты көрсету үшін барлық жұмысты жасайды, оны пайдаланушы нұққанша оны көрсетпей».

04. Алдын ала қарау және алдын-ала ескеру

Бірақ бұл мүмкіндікті пайдалану маңызды жайттармен бірге келеді. Егер сіз тым көп активтерді немесе беттерді алдын-ала алсаңыз / алдын ала алсаңыз, онда пайдаланушының бүкіл шолу тәжірибесі нашарлауы мүмкін; егер сізде серверлік статистика болса, олар қатты бұрмалануы мүмкін. Егер пайдаланушы алдын-ала жүктелген ресурстарды шертпесе және сіздің веб-сайтыңыздан шықпаса, сіздің статистиканы бақылаушы келуді нақты емес, екі парақтың көрінісі ретінде санауы мүмкін. Бұл секіру жылдамдығы сияқты маңызды көрсеткіштер үшін адастыруы мүмкін.

Chrome's алдын ала тағы бір ескерту жасаушыларға алдын ала берілген бетте JavaScript орындалатындығын білуі керек. Алдын ала парақ сілтемені пайдаланушы басқан сияқты дәл сол сияқты парақты жүктейді. Chrome алдын-ала тапсырыс беру арқылы арнайы HTTP тақырыптарын жібермейді; дегенмен, беттің көрнекілігі API парақтың алдын-ала берілгендігін ажыратуға мүмкіндік береді. Бұл жарнамалық сценарийлер мен статистика трекерлері сияқты сіз қолданып жүрген кез келген үшінші тарап сценарийлері үшін өте маңызды (Google Analytics бұл бет көріну API-сін қолданады, сондықтан сіз бұл туралы алаңдамайсыз). Осы активтерді Page Visibility API көмегімен дұрыс қолданбау маңызды көрсеткіштерді бұрмалау қаупін тудырады.

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

Google Analytics қай парақтарды алдын-ала қарау / алдын ала жүктеу қажет болатындығы туралы құнды кеңестер бере алады. Оның In-Page Analytics көмегімен сіз өзіңіздің үй парағыңыздағы қай сілтемені басу ықтималдығын анықтай аласыз. Кейбір жағдайларда іс-қимылға жоғары анықталған қоңыраулармен бұл пайыздық мөлшерлеме өте жоғары болуы мүмкін, бұл оны алдын-ала жүктеуге керемет үміткер етеді.

Домендерді алдын-ала алу және алдын-ала қарау - бұл домендер арасына қол жеткізуде өте қатал болатын браузерлер үшін әдеттен тыс либералды ұстаным.Алайда, бұл Google мен Mozilla-дің пайдасына жұмыс істейтін шығар, өйткені олар өз пайдаланушылары үшін бірнеше жолмен жылдам қарау тәжірибесін құра алады және мұндай мүмкіндіктерді әлі қолдамайтын басқа браузерлерде айтарлықтай бәсекелестік шегін ұсынады.

Алдын ала жүктеу және әсіресе алдын-ала ұсыну - бұл веб-беттердің жүктелу уақытында айтарлықтай жақсаруы мүмкін күшті құралдар. Бірақ олардың қалай жұмыс істейтінін түсіну маңызды, сондықтан сіздің пайдаланушының шолу тәжірибесі тікелей және теріс әсер етпейді.

05. Ajax мазмұнын жүктеу

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

Көптеген Ajax-ті жүктеудің проблемасы - бұл шолу әдеттен тыс болып көрінуі мүмкін. Егер дұрыс орындалмаса, артқа және алға батырмалар пайдаланушы күткендей жұмыс істемейді және беттерді бетбелгіге қосу немесе бетті жаңарту сияқты әрекеттерді орындау күтпеген жерден шығады. Веб-сайттарды жобалау кезінде төмен деңгейдегі мінез-құлыққа кедергі келтірмеу ұсынылады - бұл пайдаланушыларға өте жағымсыз және жағымсыз. Бұған жарқын мысал ретінде кейбір веб-сайттардың өз веб-беттерінде тінтуірдің оң жақ батырмасын басуды өшіруге тырысып, авторлық құқықты бұзуды болдырмауға тырысуы мүмкін. Ajax-ті енгізу тінтуірдің оң жақ түймешігін басуды өшіру ниетімен шолғыштың жұмысына әсер етпесе де, эффектілері ұқсас.

HTML5 бұл сұрақтарды History API көмегімен шешуге көмектеседі. Ол браузерлерде жақсы қолдауға ие (Internet Explorer-ден басқа, IE10-да қолдау жоспарланғанымен). HTML5 тарихы API-мен жұмыс істей отырып, біз Ajax-пен мазмұнды жүктей аламыз, сонымен бірге пайдаланушылар үшін «қалыпты» шолу тәжірибесін имитациялаймыз. Артқа, алға және жаңарту түймелері дұрыс пайдаланылған кезде барлығы күткендей жұмыс істейді. URL мекенжайын жаңартуға болады, яғни бетбелгі қайтадан дұрыс жұмыс істейді. Егер дұрыс орындалса, сіз ресурстарды бірнеше рет жүктеуді болдырмауға, сондай-ақ JavaScript өшірілген браузерлердің артқы жағына сүйене аласыз.

Алайда үлкен минус бар: сіз құрастырғыңыз келетін сайттың күрделілігі мен функциясына байланысты, тарих API-мен Ajax мазмұнын жүктеуді пайдаланушыға көрінбейтін етіп орындау қиын. Егер сайт серверлік сценарийді де қолданатын болса, онда сіз екі рет: JavaScript-те бір рет, ал тағы бір рет серверде жазулар жасай аласыз - бұл техникалық қызмет көрсету проблемалары мен сәйкессіздіктерге әкелуі мүмкін. Мұны жетілдіру қиын және көп уақытты қажет етеді, бірақ егер ол мақсатқа сай жұмыс істесе, сіз пайдаланушының нақты және жүктеме уақытын едәуір қысқарта аласыз.

Сіздің сайтыңыздың жылдамдығын жақсартуға тырысқанда, сіз шешілмейтін мәселелерге тап болуыңыз мүмкін. Осы мақаланың басында айтылғандай, Google бет жылдамдығын рейтингтік көрсеткіш ретінде қолданатыны жасырын емес. Бұл сіздің сайтыңыздың жылдамдығын жақсартудың маңызды мотивациясы болуы керек. Алайда Google Webmaster Tools парақтары туралы есептер сияқты ресурстарды пайдаланған кезде олар жүктеу уақыты күткендей баяу болатынын байқай аласыз.

Себеп Facebook Like түймелері немесе Tweet батырмалары сияқты үшінші тарап сценарийлері болуы мүмкін. Жиі жүздеген миллисекундтық аймақта күту уақыты болуы мүмкін, бұл сіздің бүкіл веб-сайтыңыздың жүктеу уақытын едәуір төмендетуі мүмкін. Бірақ бұл сценарийлерді жою үшін дәлел емес - сіздің веб-сайтыңыздағы әлеуметтік медиа батырмалары болуы маңызды шығар. Бұл түймелер әдетте сіздің парағыңызда салыстырмалы түрде аз орын алады, сондықтан келушінің жүктелген уақытына айтарлықтай әсер етпейді - бұл жылдамдықты оңтайландыру кезінде біз бірінші кезекте тұруымыз керек.

Том Гуллен - Scirra Ltd компаниясының негізін қалаушы, ойын құру құралдарын жасаушы стартап: www.scirra.com/

Ұнады ма? Оларды оқыңыз!

• Қосымшаны қалай құруға болады
• Дәл қазір графикалық дизайн бойынша ақысыз бағдарламалық жасақтама!
• Үздік ақысыз қаріптерді жүктеп алыңыз
• 101 CSS және Javascript оқулықтары