Места за диети
Денес го оптимизираме времето на вчитување на вашата страница со малку диета. Секоја година се објавуваат одредени статистички податоци за статусот на страниците низ целиот свет. Во последниве години, лесно можете да забележите тренд на зголемување на големината на една веб-страница. Па, разбирам дека брзините што сме ги напреднале доста (брзината од 100 MB/s е веќе вообичаена во многу големи градови и не само), тие исто така ги напредуваа плановите за сообраќај од компаниите за мобилни телефони (донекаде, срамота е што има планови со 250mb на пазарот - јас би направил барем 1gb). Но, дали напреднаа толку далеку што ја занемарија големината на веб-страницата?
Без разлика дали сте развивач, администратор или едноставно имате блог што го пишувате со гордост, продолжете да читате.
Навистина е толку лошо?
Да видиме според извештајот за архива на HTTP, колку се зголеми просечната големина на една веб-страница на крајот на секоја година од 2012 до 2015 година. Големината на една веб-страница во споредба со претходната година се зголеми за: 30% во 2012 година, 32% во 2013 година, 15% во 2014 година и 16% во 2015 година. Така, на крајот на 2015 година, една веб-страница имаше просек од 2,262 KB. Се разбира, оваа бројка може да варира енормно (нашата главна страница е нешто повеќе од 700 кг).
Секако, пребарувајќи тивко со претплата од x стотици mb/s, веројатно се смеете на 2,2 MB на веб-страница. Но, додека здивнувате, бидејќи во Романија сè уште имаме прилично брза мрежа, разгледајте ги следниве идеи:
-ние не живееме во идеално сценарио и има одложувања (би било нешто за секој посетител да има пинг од 1 милион со домаќинот на вашата страница нели?);
-луѓето стануваат сè понестрпливи и во случај на трговија преку Интернет можат да изгубат пари заради долго време на вчитување;
-сè повеќе корисници на паметни телефони. Ако се обидат од кафуле со уморен и преоптоварен рутер за пристап до мрежата, тие ќе имаат мала брзина или ќе користат Интернет понуден од телефонски мрежи (што честопати не е одлично и има ограничувања во сообраќајот);
-Телеком сè уште има мрежа во живо АДСЛ, со 12mb/s. И доволно претплатници за жал.
-времињата на вчитување (на кои влијае големината на страницата, дали беше логично нели?) исто така влијаат на стапката со која Google ја индексира и прикажува вашата страница. Google фаворизира брзи страници. - Зголемување на оптимизација. Згора на тоа, Гугл директно ги казнува страниците што напорно се вчитуваат на мобилни уреди.
И… како што се очекуваше, повеќето страници се огромни во големина поради слабо прикажани или неоптимизирани слики и слики. Има доволно страници што имаат страници со големина од 6mb или поголема. Дури и еден куп! Внимание, велам дека страниците не се онлајн продавници, каде што донекаде би се очекувало некоја страница со 12 производи + други елементи да зазема одреден простор.
Значи, од секоја страница зависи колку е сериозен овој проблем. Главно, ќе разговарам за методите за оптимизирање на сликите, бидејќи од тука потекнува најголемото слабеење на страниците.
И што правиме сега?
Прво на сите, дознајте како се чувствувате. Користете страница како http://tools.pingdom.com/fpt/, која ја анализира вашата посакувана страница и ви кажува колку барања еден посетител упатува на серверот, времето на вчитување и големината на страницата. Мој совет е да се обидете да останете ниски 1-2mb за страница на страница/блог и под 4mb за сложена страница на веб-страница за трговија преку Интернет - очигледно колку е помала страницата, толку подобро за секого . Во зависност од тоа колку сте лоши, разликите можат да бидат драматични во однос на времето на полнење.
Накратко, неколку практични совети за попаметно користење на сликите на вашата страница:
Оптимизирање на .jpg и .png слики
Ако треба сами да се справите со првите 3 идеи, во однос на оптимизацијата на сликата можеме да ви помогнеме со неколку совети. Постојат бесплатни страници кои оптимизираат слики и често прават одлична работа. Два примери за супер ок се: https://tinypng.com/ и https://tinyjpg.com/, за pngs и jpegs.
Едно нешто што треба да се забележи е да не се обесхрабрувате за заштеда од неколку kb. Особено во случај на онлајн продавници, каде што ако заштедиме 15kb/слика, и собираме колку што имам
Но, понекогаш тоа не е доволно. Потоа, ние користиме програми како Adobe Photoshop, Gimp, IrfanView (има исклучително способна и лесна за конфигурирање на функцијата за масовно процесирање) или .NET Paint што ни овозможува да избереме колку сакаме да ја компресираме датотеката .jpg. Идеално е да се оди на границата помеѓу добриот квалитет/прифатливата големина. Многу пати, дури и ако заштедиме на 85% од оригиналниот квалитет, не забележуваме загуби во квалитетот, но забележуваме дека сликата добива многу помали димензии. Ако ја смениме големината на сликата за да биде добра за мрежата, веќе забележуваме драматични намалувања.
Но, како да ја знаеме вистинската големина на сликата, кога сакаме да ја користиме на некоја страница?
Ако зборуваме за позадинската слика на страницата, се повикуваме на резолуциите што ги користат нашите посетители. Прилично добра претпоставка е да имате ширина од 1920px или 2550px за тапети. Овие бројки доаѓаат од резолуциите на заедничките набудувачи. Широка слика од 1920px ќе изгледа беспрекорно како позадина на уште помал FullHD монитор. Едно од 2550px ќе изгледа беспрекорно на мониторите од повисоки 1440p. Така, ние не ја користиме сликата на 4000-6000px, а сепак изгледа совршено - па оттука и значителното намалување на тежината.
Ако зборуваме за други елементи или слики во лајтбокс, тоа е дискутабилно. Јас обично го следам истото правило ако се обидам да прикажам слика од екранот или општа слика. Очигледно, иконата на Фејсбук во подножјето не е со 1920px, туку со ширина од 32px.
Како тест, за да докажам колку можете да заштедите, зедов прекрасна зимска позадина, прилично сложена (толку потешко е да се оптимизира) и ја намалив од 6,7mb на 464kb. На помалку од половина мб, сликата изгледа многу добро и има ширина од 1920px, така што може лесно да се користи како позадина на веб-страница.
Се разбира, можевме да заштедиме со компресија од 60-70 jpeg, и постои голема можност да не забележиме видливи падови на квалитетот на прв поглед. Така, добиваме помали димензии.
Ако сакате да заминете во крајност со заштеда на простор, размислете за следново:
-чиста бела боја (#fff), зафаќа помалку простор од градиент или сенка;
-користејќи филтри како што е „Замагли повеќе“ во Adobe Photoshop, можеме значително да ја намалиме големината на сликата (пример: дадена е слика во која има главен елемент. забележи намалување на големината на крајната слика)
Да, но…
Неколку прашања што можете да ги имате и брз одговор на нив, за да докажете дека вреди да се оптимизира секоја слика на вашата страница.
Многумина не се замараат со династијата за микро-оптимизации
Јас не би ги нарекол микро ако ја донесете првата страница на вашата страница од 6mb до 2mb без видливи загуби во квалитетот. И, ако повеќето ги игнорираат или не ги знаат овие работи, не значи дека е во ред да го сторите истото.
Нема врска. Првиот пат кога е потешко да се вчита, тогаш сликата е земена од кешот
И што, не можам да го затворам јазичето со вашата страница пред да заврши со вчитување на вашата страница? Кешот се формира за одреден временски период, на прелистувачот и на соодветниот уред. Ако користам CCleaner, втората посета ќе биде исто толку ужасна. Ако се обидам да пристапам до вашата страница од мојот мобилен телефон, кој штотуку ги постави фотографиите на мојата работна површина, батеријата ми е веќе испразнета.
И сега те прашувам:
Дали имате посветен сервер, со CDN и загарантирана врска од 1gbps за вашата страница? Шансите се дека сте на среден VPS или дури и на споделена сметка за хостинг. Така, вие исто така би го зачувале непотребните проблеми на серверот со оптимизирање на содржината на страницата. Замислете дека објавувате нов линк (па така, кешот не е целосно изграден, доколку сте го имплементирале) до вашата страница на Фејсбук, а вашиот домаќин мора веднаш да им ја достави страницата 8mb на 20-те пријатели кој кликна. За некои од нив очекувајте времиња на вчитување на хорор.
Дали сите ваши посетители имаат влакна од 500 mb Мислев дека не.
Заклучок
Иако сме во 2016 година и можеби многумина уживаат во wi-fi мрежа и кабелска врска со високи перформанси 80% од времето, не смееме да се занесуваме. Последно што сакате да направите е да изгубите клиент или читател затоа што му здодеа да бара нешто на вашата страница, но неговите страници се вчитуваа премногу на неговиот просечен телефон, на безжичната мрежа во кафулето во агол. При оптимизирање на времето на полнење, секогаш мора да се повикуваме на слаби врски и послаби уреди. Ми се чини фер што 3G интернет корисник може да ја прочита својата омилена статија без да седи 30-ти додека не се вчита неговата страница.
Ние сме одговорни за она што го ставаме на мрежата. Без разлика дали сме дизајнери, програмери, администратори или блогери. Ако сите обрневме внимание на големината на страниците на нашите страници, ќе добиевме подобро искуство за сите корисници.
Мојот предизвик за вас: оптимизира сè. Оптимизирајте и гледајте по времето на вчитување од 32 x 32px .png до најновиот .jpg. Вашите корисници ќе го ценат тоа, Google ќе го цени тоа и сè што треба да направите е да победите. Само ве чини време. Ако сакате да отидете на следното ниво, оптимизирајте ги датотеките .js и .css исто така. Ако заштедите повеќе од 200 килограми без да се откажете од слика, ја прогласувам вашата оптимизација за успешна. Ние сме убопитни за вашите резултати.
Ако ви се допадна статијата, не заборавајте да ја споделите, за да можеме да ги направиме сите страници побрзи. Време е за диета!
[социјални_ копчиња facebook = ”true” twitter = ”true” google_plus = ”true” linkedin = ”true”]