Скоростта на сайта е един от най-важните показатели при създаване на сайт и интернет приложения.
Според проучване на различни анализатори на Google, хората обикновено гледат по-малко от първите 25 секунди на видео, а някои дори по-малко от 10 секунди.
Въз основа на това би било препоръчително да направите визуализирането на съдържанието на сайта възможно най-бързо, така че потребителите да могат да решат дали да я използват или не.
- Оптимизация на изображенията
2. Оптимизация на CSS и скриптове
3. Общи препоръки за ускоряване на сайта
Може би това е повърхностна преценка, но хората оценяват обектите със скоростта на натоварването им, това често се случва и ние трябва да приемаме това състояние на нещата за даденост.
За да оптимизирате работата, трябва да обърнете специално внимание на скоростта на натоварването. За щастие има много добри плъгини в WordPress и в други двигатели, които помагат за това. Ако вашият сайт е на различна платформа от WordPress, има няколко ефективни начина за оптимизиране. Преди да започнете да ускорявате сайта, използвайте услугите в статията за онлайн проверка на скоростта на качване на блога ви за измерване на резултатите преди и след оптимизацията.
Ускоряване на сайта чрез оптимизация на изображението
Оптимизирането на размера на изображението може да бъде трудна задача и нейното решение има много възможности за избор. Това могат да бъдат файлови формати, различни инструменти за оптимизиране на изображенията и най-добрите примери за използване на код и CSS, за да ви помогнат да запазите изображения и да взаимодействате с тях по най-добрия възможен начин.
Обмислете един пример, показващ защо това е толкова важно. Наскоро разработчиците на iOS и създателите на приложения установиха, че премахването на завършено изображение на дисплеите на Retina отнема 2-4 пъти повече време и пространство на дисковото пространство на мобилния телефон, отколкото в предишните версии с просто изтегляне и стартиране на приложението.
Това не е толкова важно за уеб разработчиците и дизайнерите, но показва колко е важно да се показват изображения на различни платформи. По-долу са дадени някои от най-важните, според мен, препоръки, които трябва да бъдат взети предвид при оптимизиране на изображенията за интернет.
Формати на изображения
Форматирането на изображения е най-важната тема и е такава, защото всеки знае, че различните формати влияят на скоростта на зареждане на изображението. Има обаче установено мнение по този въпрос, което можем да използваме стандарт. JPEG за снимки, GIF за плоски изображения, съдържащи малък брой цветове, и PNG за всички останали. Повечето уеб дизайнери и разработчици, използват PNG за почти всичко, с изключение на едноцветни и двуцветни бутони, където използват GIF.
Код на изображението
Най-лошото нещо, което можем да направим е да повлияем негативно на скоростта на зареждане на изображението, и да позволим на кода автоматично да задава размерите на изображението. Използвайки показатели като ширина = 60 пиксела височина = 50 пиксела, наистина можете да намалите времето за зареждане на изображението на сървъра, докато сървърът чете информацията на страницата и вижда задачите, които са му зададени. Затова се уверете, че сте на правилния път и го правите с всичките си изображения.
Инструменти за оптимизиране на изображения
Инструментите винаги са полезни. Е, в повечето случаи … Понякога те се налагат и отвличат вниманието, но в този случай те наистина ще бъдат много полезни. Ако успеете да намерите чудесен инструмент за оптимизиране на изображения, преди всичко, моля пишете за него в коментарите, тъй като ние винаги търсим най-доброто. Следващите няколко инструмента са ImageOptim за Mac и Riot за Windows. Те са много различни един от друг, но изпълняват една задача.
Можете да поставите изображение в тях и да намерят метод за неговото оптимизиране, след което ще ви дадат крайния резултат за запис в същия формат, в който е бил зареден. Инструментите са наистина много добри и вършат добре работата си. Освен това те имат функция за анализ на изображението, която ще посочи кой формат ще бъде най-подходящ за него. Лесно може да се каже, че това е един от най-необходимите инструменти, освен текстов и графичен редактор, разбира се.
Ускоряване на зареждането на сайта чрез оптимизация на CSS и JavaScript
CSS и JavaScript са важни езици, когато става въпрос за уеб дизайн и особено при създаването на динамично съдържание. Вярвам, че хората често забравят, че могат да оптимизират своето динамично съдържание, а също и да не подобрят своя JavaScript и CSS. Разбира се, това не са най-необходимите неща за малки обекти, но за големите това е наистина важно, особено за тези, които разчитат на голям брой дизайнерски решения. Нека разгледаме няколко „Правила за JavaScript и CSS“, които са доста добре стандартизирани при създаването на уеб приложения.
Първото правило за CSS и JavaScript
Ако можете да го направите в CSS, направете го в CSS
Често забравяме, че имаме такъв чудесен инструмент и, бих казал, CSS системата е най-прекрасното нещо, което има един уеб дизайнер. Дизайнерите прекалено бързо превеждат работата във Photoshop. Когато проектирате, трябва да вземете предвид факта, че освен графичен редактор, браузърът ви може да ви помогне и ако използвате CSS. Използвайте всичките му предимства! Ако имате инструмент, в който оформленията могат да се правят много бързо, вече няма нужда да използвате HTML, за да ги изградите.
Второто правило за CSS и JavaScript
Намалете, намалете, намалете!
Намаляването на кода е може би един от най-лесните и най-добрите начини за увеличаване на скоростта на изтегляне на сайта. Имайте предвид, че говорим за милисекунди, но те също имат положителен ефект, особено когато използвате, например, библиотеката jQuery. Не забравяйте, че инсталирането на приставката за JavaScript / CSS и задаването на предпочитания за изтегляне на по-малка версия на кода на сайта (не е нужно да го редактирате) ще подобри скоростта на зареждане на сайта, така че го направете! Инструменти са: Code Minifier за Mac, Minify за Windows и JSCompress / CSSCompressor за тези, които искат да работят в смесена крос-браузър платформа. Добро намаление!
Третото правило за CSS и JavaScript
Лошата практика използва in-line в CSS или JavaScript, особено когато става въпрос за CSS. Проблемът тук е не само, че това е остарял метод, но също така, че ако оставите CSS в HTML код (особено на линия), той ще се чете по следния начин: HTML / CSS / HTML / CSS / HTML / CSS / HTML / Css, не само html => css. Знаете, че това е много лошо за времето на зареждане на сървъра и може да влоши повечето уеб приложения, които са използвали този подход за отделни файлове.
Четвъртото правило за CSS и JavaScript
Премести надолу
Ако искате да вмъкнете JavaScript на страница, направена в HTML, и няма начин да се избегне това, поставете го в долната част на HTML документа. Това ще помогне да се намали времето, необходимо за зареждане на сайта, тъй като всички функции и процеси, присъщи на JavaScript, ще се изпълняват след зареждането на страницата. Това също така ще намали вероятността грешката да повлияе на работата на цялата система. Ето защо е по-добре да се уверите, че сайтът ви ще функционира нормално и ще предотврати нежелани събития, които могат дори да повредят браузърите.
Петото правило за CSS и JavaScript
DOM оптимизация
Ако е възможно, намалете DOM. Например, често използвате jQuery, който създава много DOM елементи или чете всичко чрез DOM – всичко това забавя значително сайта Ви. Търсете и намирайте това, което търсите. Ако работите с div-елементите в HTML само защото са необходими за някои малки задачи и знаете само този единствен начин на работа, тогава може да не е най-добрият начин. Използването на div тагове е необходимо за CSS, но можете да намерите и други начини да ги приложите.
