Диетични сайтове
Днес оптимизираме времето за зареждане на вашия сайт с малко диета. Всяка година се публикуват определени статистически данни за състоянието на сайтовете по целия свят. През последните години можете лесно да забележите тенденция за увеличаване на размера на уеб страница. Е, разбирам, че скоростите, които имаме, са напреднали доста (скоростта от 100Mb/s вече е доста често срещана в много големи градове и не само), те също са усъвършенствали плановете за трафик от компаниите за мобилни телефони (донякъде, смущаващо е, че има планове с 250mb на пазара - бих направил поне 1gb). Но дали са напреднали толкова далеч, че да пренебрегнат размера на уеб страница?
Независимо дали сте разработчик, администратор или просто имате блог, който пишете с гордост, продължете да четете.
Наистина е толкова лошо?
Нека видим, според HTTP Archive Report, колко е нараснал средният размер на уеб страница в края на всяка година от 2012 до 2015 г. Размерът на уеб страница в сравнение с предходната година се е увеличил с: 30% през 2012 г., 32% през 2013 г., 15% през 2014 г. и 16% през 2015 г. Така в края на 2015 г. уеб страница имаше средно 2 262Kb. Разбира се, тази цифра може да варира значително (основната ни страница е малко над 700kb).
Разбира се, сърфирайки тихо с абонамент от х стотици mb/s, вероятно се смеете на 2.2Mb на уеб страница. Но докато си въздъхнете с облекчение, тъй като в Румъния все още имаме доста бърза мрежа, имайте предвид следните идеи:
-ние не живеем в идеален сценарий и има закъснения (би било нещо за всеки посетител да има пинг от 1ms с хоста на вашия сайт, нали?);
-хората стават все по-нетърпеливи и в случай на онлайн търговия те могат да загубят пари поради дълги времена за зареждане;
-все повече и повече потребители на смартфони. Ако се опитат от кафене с уморен и претоварен рутер да влязат в мрежата, ще имат ниски скорости или ще използват интернет, предлаган от телефонните мрежи (което често не е страхотно и има ограничения в трафика);
-Telekom все още има активна ADSL мрежа с 12mb/s. И достатъчно абонати за съжаление.
-времето за зареждане (което се влияе от размера на страницата, логично ли е?) също влияе върху скоростта, с която Google индексира и показва вашия сайт. Google предпочита бързите сайтове. - SEO тласък. На всичкото отгоре Google директно наказва сайтове, които се зареждат усилено на мобилни устройства.
И ... както се очакваше, повечето страници имат огромни размери поради зле показани или неоптимизирани снимки и изображения. Има достатъчно сайтове, които имат страници с размери 6mb или по-големи. Дори куп! Внимание, казвам сайтове, които не са онлайн магазини, където донякъде би могло да се очаква страница с 12 продукта + други елементи да заема известно място.
Така че, зависи от всеки сайт колко сериозен е този проблем. Основно ще обсъдя методи за оптимизиране на снимки, защото оттам идва най-голямата загуба на тегло на страниците.
И какво правим сега?
На първо място, разберете как се справяте. Използвате сайт като http://tools.pingdom.com/fpt/, който анализира желаната от вас страница и ви казва колко заявки посетителят отправя към сървъра, време за зареждане и размер на страницата. Моят съвет е да се опитате да останете по-ниски от 1-2mb за страница в сайт/блог и под 4mb за сложна страница в сайт за онлайн търговия - очевидно колкото по-малка е страницата, толкова по-добре за всички . В зависимост от това колко сте зле, разликите могат да бъдат драматични по отношение на времето за зареждане.
Няколко практически съвета, накратко, за по-интелигентно използване на изображения на вашия сайт:
Оптимизиране на .jpg и .png изображения
Ако трябва да се справите сами с първите 3 идеи, по отношение на оптимизирането на картината можем да ви помогнем с някои съвети. Има безплатни сайтове, които оптимизират снимките и често вършат чудесна работа. Два супер примера са: https://tinypng.com/ и https://tinyjpg.com/, за png и jpegs.
Едно нещо, което трябва да се отбележи, е да не се обезсърчавате от спестявания от няколко kb. Особено в случая с онлайн магазини, където ако спестим 15kb/снимка и съберем колкото имам
Но понякога това не е достатъчно. След това използваме програми като Adobe Photoshop, Gimp, IrfanView (има изключително способна и лесна за конфигуриране функция за групово обработване) или .NET Paint, които ни позволяват да изберем колко искаме да компресираме .jpg файл. Идеално е да стигнете до границата между добро качество/приемлив размер. Много пъти, дори ако спестяваме при 85% от първоначалното качество, не забелязваме загуби в качеството, но забелязваме, че картината придобива много по-малки размери. Ако променим размера на картината така, че да е добре за мрежата, вече забелязваме драстични намаления.
Но как да разберем правилния размер за снимка, когато искаме да я използваме на сайт?
Ако говорим за фоновата картина на сайта, ние се позоваваме на резолюциите, използвани от нашите посетители. Доста добро предположение би било да имате ширина 1920px или 2550px за тапети. Тези цифри идват от резолюциите на общите монитори. Широката картина с 1920px ще изглежда безупречно като фон на още по-малък FullHD монитор. Един от 2550px ще изглежда безупречно на 1440p монитори от по-висок клас. По този начин не използваме картината при 4000-6000px и въпреки това изглежда перфектно - оттук и значителното намаляване на теглото.
Ако говорим за други елементи или картини в лайтбокси, това е спорно. Обикновено следвам същото правило, ако се опитвам да покажа екранна снимка или обща картина. Очевидно е, че иконата на Facebook в долния колонтитул не е с 1920px, а с ширина 32px.
Като тест, за да покажа колко можете да спестите, взех красив зимен тапет, доста сложен (толкова по-труден за оптимизиране) и го намалих от 6.7mb на 464kb. При по-малко от половин mb картината изглежда много добре и има ширина 1920px, така че може лесно да се използва като фон на уебсайт.
Разбира се, бихме могли да спестим с компресия от 60-70 jpeg и има голям шанс да не забележим видими качествени спадове с един поглед. По този начин получаваме по-малки размери.
Ако искате да стигнете до крайност с икономия на място, помислете за следното:
-чисто бял цвят (#fff), заема по-малко място от градиент или сянка;
-с помощта на филтри като „Blur More“ в Adobe Photoshop можем значително да намалим размера на изображението (пример: дава се снимка, в която има основен елемент. Ако приложим Blur More няколко пъти на заден план, за да запазим яснотата само на нашия обект, ще забележете намаляване на размера на крайната снимка)
Да, но…
Някои въпроси, които можете да имате, и бърз отговор на тях, за да докажете, че си струва да оптимизирате всяко изображение на вашия сайт.
Мнозина не се занимават с микро-оптимизационната династия
Не бих ги нарекъл микро, ако донесете първата страница на вашия сайт от 6mb до 2mb без видими загуби в качеството. И ако повечето игнорират или не знаят тези неща, това не означава, че е добре да направите същото.
Няма значение. Първият път е по-трудно да се зареди, след това снимката се прави от кеша
И какво, не мога да затворя раздела с вашия сайт, преди той да завърши зареждането на вашата страница? Кешът се формира за определен период от време в браузъра и съответното устройство. Ако използвам CCleaner, второто посещение ще бъде също толкова ужас. Ако се опитам да вляза в сайта ви от мобилния си телефон, който току-що е качил снимките на работния ми плот, батерията ми вече е изтощена.
И сега ви питам:
Имате ли специален сървър с CDN и гарантирана 1gbps връзка за вашия сайт? Шансовете са да сте на среден VPS или дори споделен хостинг акаунт. Така че бихте спестили и на сървъра ненужни главоболия, като оптимизирате съдържанието на сайта. Представете си, че публикувате нова връзка (така че кешът все още не е напълно изграден, ако сте внедрили такава) към вашия сайт във Facebook и вашият домакин трябва незабавно да достави 8-мегапикселната страница на 20-те приятели който щракна. Очаквайте време за зареждане на ужасите за някои от тях.
Всичките ви посетители на 500mb фибри ли са? Мислех, че не.
Заключение
Въпреки че сме през 2016 г. и може би много от нас се радват на Wi-Fi мрежа и високопроизводителна кабелна връзка 80% от времето, не трябва да се увличаме. Последното нещо, което искате да направите, е да загубите клиент или читател, защото му е скучно да търси нещо на вашия сайт, но страниците му се зареждат твърде силно на средния му телефон, в безжичната мрежа в кафенето в ъгъл. Когато оптимизираме времето за зареждане, винаги трябва да се позоваваме на слаби връзки и по-слаби устройства. Струва ми се честно, че потребител на 3G интернет може да прочете любимата си статия, без да седи 30 секунди, докато страницата му се зареди.
Ние носим отговорност за това, което пускаме в мрежата. Независимо дали сме дизайнери, разработчици, администратори или блогъри. Ако всички обърнахме внимание на размера на страниците на нашите сайтове, щяхме да получим по-добро изживяване за всички потребители.
Моето предизвикателство за вас: оптимизира всичко. От 32 x 32px .png до най-новия .jpg, оптимизирайте и вижте времето за зареждане. Потребителите ви ще го оценят, Google ще го оцени и всичко, което трябва да направите, е да спечелите. Това ви коства само време. Ако искате да преминете към следващото ниво, оптимизирайте и .js и .css файловете. Ако спестите повече от 200kb, без да се отказвате от снимка, обявявам вашата оптимизация за успешна. Любопитни сме от вашите резултати.
Ако статията ви е харесала, не забравяйте да я споделите, за да можем да направим всички сайтове по-бързи. Време е за диета!
[social_buttons facebook = ”true” twitter = ”true” google_plus = ”true” linkedin = ”true”]