Как лесно да подобрите скоростта на страницата

важни неща, на които да обърнете внимание

Скоростта на страницата е важна както за класирането, така и за потребителското изживяване, но няколко души отбелязват, че много компании пропускат лесна възможност за подобрение в тази област.

През последните няколко години скоростта на страницата стана много важна за трафика и класирането на вашия сайт. Хората искат бързи сайтове – и тъй като потребителите искат бързи сайтове, Google също. Бързите сайтове се класират по-добре в резултатите на Google от бавните сайтове.

Има области, свързани със скоростта на страницата, за които са необходими технически разработчици, които могат да променят начина на зареждане и да оптимизират производителността на сървъра. Но не всички проблеми със зареждането на страници са сложни или изискват много технически познания. В този случай става въпрос за теглото на изображенията. Изображенията обикновено са голям проблем за сайтовете с бавно зареждане на страниците.

За щастие, оптимизирането на изображенията е наистина лесен начин за постигане на резултати.

Изображения и зареждане на страници

Когато проверяваме сайтове за бавно зареждане на страници, изображенията почти винаги са значителна част от проблема. Тези, които създават уебсайтове, изглежда са забравили, че трябва да преоразмеряваме и компресираме изображенията преди качване и да не разчитаме само на CMS или сървърния софтуер за компресия.

В живота си често виждаме страници с изображения, които са мегабайти. Това са мегабайти. Една страница никога не трябва да бъде по-голяма от няколко мегабайта, дори повече от няколко мегабайта, това е често срещано явление. Всъщност много сайтове имат повече от 10 MB на страница. Никоя уеб страница никога не трябва да бъде толкова голяма – и когато е, почти винаги има проблем с оптимизацията на изображенията.

Да знаете как правилно да преоразмерите/компресирате/запазите изображение и да приложите процес, който да гарантира това, може да реши голяма част от проблема с теглото на страницата.

Кога се промени това?

Когато започнах уеб разработка преди почти 20 години, сайтовете не можеха да понасят голямо тегло и все още очакваха да привлекат трафик. Страниците се зареждаха под 100–250 KB – html, изображения, скриптове и всичко останало. Така трябваше да бъде. Браузърите и връзките бяха бавни.

Това нямаше нищо общо с търсачките. Сайтовете просто не можеха да се зареждат правилно с голямо тегло. Сайт с 1 MB на страница, когато се върна назад, отне повече от 15 минути, за да се зареди. Да, 15 минути.

Сега, когато сме в ерата на бързите връзки, има голямо невнимание при наблюдението на теглото на страниците, което води до сайтове с до 25 MB на страница (истинска история). Въпросът е, че в някои отношения този бавен страничен проблем натоварва много повече, отколкото беше преди. Днес не само имаме ограничаващи параметри като мобилни устройства, но и класирането ви в Google се влияе от бавното зареждане на страниците.

Тъй като зареждането на страници беше много важно в ранните дни на интернет, компаниите имаха хора, посветени на оптимизацията на изображения. Но сега повечето разчитат на CMS (система за управление на съдържанието) за преоразмеряване и компресиране на изображения. В повечето случаи това означава, че оптимизацията на изображенията се извършва след процеса на качване. Този процес води до прекалено големи и тежки файлове за изображения, което забавя скоростта на страницата – и ако се прилага интензивно в целия сайт, може да доведе до по-ниско класиране на сайта.

Защо да не разчитате на CMS за преоразмеряване/компресиране на изображенията?

Когато използвате CMS за преоразмеряване на изображение, той обикновено променя размера на изображението и не го компресира, или вашият сървър го преоразмерява "в момента".

Това означава, че дори да върши добра работа, вашите файлове ще бъдат с 15 до 30 процента по-големи, отколкото ако бяха правилно компресирани преди качване. Ако вашият CMS преоразмерява изображенията "в момента", т.е. те се преоразмеряват, когато се показват, тогава се извършва много малко (ако изобщо) компресия.

Това може да бъде много проблематично за сайтове с множество изображения на страница. От извършените проверки, по-често от не, изображенията съставляват 40 до 60 процента от теглото на страницата, като 30 до 50 процента имат потенциал за спестяване на тегло от изображения.

Какво трябва да правите с изображенията преди качване?

Подготовка на изображения за вашия сайт

Преоразмеряване на изображения

Преоразмеряването на изображението е много важно. Ако имате изображение с ширина 2400 пиксела и всичко, от което се нуждаете на сайта, е изображение с ширина 500 пиксела, дори да го преоразмерите в CMS, това ще изисква компресиране на цялата информация от 2400 пиксела. Това прави изображението ви много по-голямо, отколкото трябва да бъде.

В повечето екипи няма отделен човек за преоразмеряване и компресиране на изображения. Това означава, че въпреки че имаме множество оптимизирани размери на изображения за настолни компютри, таблети и мобилни устройства, може да нямате ресурсите да го направите.

В този случай най-важното нещо, което трябва да направите с всяко изображение на сайта, е да го запазите в най-големия необходим физически размер, но НЕ по-голям. Това означава, че ако имате нужда от три изображения и най-големият необходим размер е 800 x 600 пиксела, уверете се, че сте преоразмерили оригиналното изображение на 800 x 600 в подходяща програма като Photoshop. След това, дори ако трябва да преоразмерите в CMS, работите с по-малък размер на файла от самото начало.

Типове файлове

Така че, първо трябва да преоразмерите, компресирате и след това да качите изображението. Въпреки това, не само преоразмеряването и компресирането преди качване е проблем, но и изборът на правилния тип файл стана проблематичен. Повечето хора, които обработват изображения на сайт днес, обикновено нямат опит с изображения, така че ще използват JPG, когато трябва да използват PNG, и обратното.

Защо това е важно? Когато използвате грешен тип файл, можете значително да увеличите теглото на файла, понякога доста драстично. И така, кои типове файлове използвате?

Има няколко типа файлове, като най-често срещаните са JPG, GIF, PNG и WebP. Най-често ще използвате JPG и PNG.

Ами GIF или WebP?

Никой не трябва да използва GIF, освен ако не анимира изображение. WebP, въпреки че обещава много с висококачествени, беззагубни алгоритми за компресия, в момента не се поддържа широко и изисква специално програмиране, за да работи в браузъри, различни от поддържаните като Opera и Chrome.

Това не означава, че не можете да го използвате, но означава, че не можете да го използвате, без да създадете решения за браузъри, които не го поддържат. За повечето хора е по-лесно да се придържат към стандартните формати JPG и PNG. WebP вероятно ще стане стандарт, когато поддръжката му бъде усъвършенствана. Той може да записва изображения с много по-високо качество и по-ниско тегло на файла.

Избор на правилния тип файл

Много често хората избират типове файлове според това, което е показано по подразбиране в програмата за изображения. Въпреки това, изборът на грешен тип файл може действително да доведе до това, че изображенията ви ще бъдат по-големи, отколкото трябва.

Както се вижда от таблицата по-горе, има много съображения дали искате JPG или PNG, но най-лесният начин да запомните е да се запитате: Гледате ли снимка или нещо друго, като произведение на изкуството или лого? Когато записвате снимка, искате да използвате JPG; за всичко останало (лого, илюстрации, произведения на изкуството и т.н.), искате да използвате PNG.

Когато използваме грешен формат, можем значително да увеличим теглото и размерите. Освен това, чертежът може да не изглежда ясен или отчетлив, когато се използва модел на компресия със загуба (където данните се губят), както при JPG.

JPG и PNG

JPG използва така наречената "компресия със загуба". Това означава, че когато файлът се компресира, някои данни се губят завинаги. Окото обикновено не възприема лесно загубените данни, така че получавате по-малък файл с минимално влошаване на качеството.

Разбира се, това зависи от качеството на записания JPG. Колкото по-ниско е качеството, толкова повече данни се губят. Ако е записан с твърде ниско качество, изображението може да започне да "замъглява", което означава, че ще изглежда на петна. Ако искате да избегнете този проблем, не падайте под 50 процента качество при записване на изображението. С днешните графични карти, съотношение от 50 процента трябва да остави качеството достатъчно високо, за да изглежда правилно, но достатъчно ниско, за да спести значително количество файлово пространство.

СЪВЕТ: Когато записвате JPG, използвайте настройката за прогресивно, така че браузърът да зарежда документа, сякаш "се проявява". Потребителите не срещат проблеми като скачане на страници и е по-вероятно да възприемат страницата като по-бързо зареждаща се.

PNG използва така наречената "компресия без загуба". Без загуба означава, че когато файлът се записва, данните не се губят. Изображението се предискретизира и може да използва "най-близкия съсед" (подобен цвят) при събиране на данните, но данните не се премахват от файла.

Има два вида PNG: 24-битов и 8-битов. Когато се опитвате да намалите размера на файла, искате 8-битова PNG настройка. Освен това може да искате да премахнете цветовете от PNG файла си.

СЪВЕТ: Когато записвате PNG във Photoshop, използвайте Export > Save for Web (legacy). Можете да изберете по-малко цветове или да изберете черно-бяло, което може да намали PNG файловете с 50 до 90 процента.

Защо не споменавате SVG?

SVG е технология, при която изображенията се кодират в страницата. Проблемите със SVG са, че изисква някой с познания да ги създава и прилага, създава големи кодови блокове, не обработва добре сложни елементи на изображението и може да бъде трудно за поддръжка в по-стари браузъри.

Въпреки това, ако нито един от тези параметри не е проблем за вас, това може да бъде много добро решение за изображения като лого на сайта на всички страници и всички типове устройства, или при създаване на прости инфографики. Но не забравяйте, че създаването на хиляди редове код за показване на изображения не означава непременно спестяване на тегло на страницата.

Ако използвате SVG, ето няколко съвета:

• Намерете персонал или външен изпълнител, който може правилно да създава/прилага SVG.

• Уверете се, че SVG изображенията са по-леки от записаните изображения (могат да бъдат по-големи).

• Уверете се, че етикетите са приложени правилно, така че да се възползвате от това, което би било "alt" етикет в нормално изображение, когато е необходимо.

• Пример за това може да бъде търсене в SVG файла и използване на alt етикет в кода.
  <img src="logo.svg" alt="Лого на уебсайта" />

• Ако социалното споделяне е важно за вашите изображения, трябва да предоставите традиционен файл с изображение, който може да се качва за социално споделяне.

• Ако имате голяма или значителна част от потребители, използващи по-стари браузъри, не използвайте SVG. Те няма да работят добре със SVG, ако изобщо работят.