Георгиев Здравейте, днешната тема ще е малко по-различна от тази в тематиката на блога и сайта за уреди с дефекти, но в крайна сметка никъде няма на Български или друг език в лесен за възприемане вид достатъчно информация поради, което реших да пиша за това…
Защо трябва сайта ни да бъде бърз?
Ако трябва да изброявам всички причини ще ми се изтрият пръстите от писане по клавиатурата затова ще изброя само най-важните причини:
- Заради потребителите (те не обичат да чакат особено когато са на мобилният)
- Заради Google и останалите търсачки (те дават предимство на по-бързите сайтове)
- Заради продажбите, проучвания показват, че по-бърз сайт води до повече продажби и заинтересованост
- Заради природата – проста логика по-бърз сайт по малко загуба на време и от там на енергия
Има и редица други причини заради, които си заслужава да отделим време на ускоряването на сайта, но тези са основните и движещи които ни дават основни насоки.
Откъде да започнем?
Ако имате съществуващ сайт и искате да подобрите класирането му ще ви спестя много време, като направо ви кажа, много по-лесно за вас е ако започнете с нов сайт без значение дали ще го правите сами или ако ви го прави друг, но това ако искате да извлечете максимума от него разбира се.
Не се отчайвайте всички стъпки и методи които ще спомена по-нататък в статията ще са ви полезни! Единственият проблем който ще имате е това, от което ще започнем, а именно архитектурата на сайта!
Архитектурата на уебсайта и съдържанието му.
Без значение дали използвате готов CMS, като WordPress, Magento, Zencart, други подобни системи за управление на съдържанието или пък вие сами сте измислили своя система архитектурата им трябва да е:
- Съобразена с нуждите ви сега и бъдещите ви нужди!
- Да няма нищо излишно;
- Да има всичко нужно;
- Да позволява разглеждане и ориентиране във всички страници с минимум кликове;
- Да организирате правилно съдържанието според нуждите.
Как да постигнем всичко това?
Ключовата дума е минимализъм.
Идеята, че сайтът трябва да е пълен с екстри,снимки, бутони, ненужни и неизползваеми в повечето случаи елементи е основа, която трябва да бъде разбрана, като неправилна!
Всички хора търсим информация, Google е номер 1 търсачка защото ни дава информацията веднага, след като напишем ключовата дума и натиснем бутона, без ненужни модули, без хиляди снимки, без шарени цени (понякога с дразнещи реклами). Или иначе казано, като потребители ние имаме достъп до списък с кандидати имащи това което търсим за по-малко от секунда.
Всичко това е постигнато с много усилия от екипът на Google, но с ясната идея, че потребителя трябва да получи точно това което търси и нищо повече в елементарен вид с минимум усилия и лесна навигация.
Минимализмът в архитектурата е минимум код и само нужното съдържание.
Къде обикновено се крият много от проблемите на бавните сайтове?
- Неправилно подбрани снимки
- Прекалено голям брой и обем .css файлове поради лоша архитектура на сайта
- Използването на ненужни библиотеки jscript, като JQUERY
- Прекалено много елементи, снимки и блокове
Да започнем?
Винаги започвам от бял лист хартия А4 формат, избирам си сайт който ми харесва как изглежда или ако дизайнът на собственият ми сайт ми харесва достатъчно скицирам визуално всички елементи на избраният сайт върху листа хартия…
Това отразява графично в общи линии всички елементи и блокове с информация на една стандартна начална страница. И сега започва първият етап:
Ревизия на страницата
Преглеждам всички елементи връзки на страницата: картинки, съдържание и решавам кои ми трябват и кои не!
- Лично аз винаги премахвам или модифицирам първо всички ненужни елементи съдържащи информация и връзка с външни източници, като: Бутони за харесване на Facebook, Tweeter и подобни. Вместо тях слагам икона съответно на Facebook, Tweeter с препратка към моята страница в съответната медия.
- Премахване на ненужни блокове, ако погледнем горната скица и по-точно блока с МАРКИ може би искаме да го премахнем, тъй като той няма смисъл освен ако не предлагате Автомобили или Парфюми при, които повечето потребители биха търсили точно определена марка, както е случая с MAGPROM едва ли някой ще си търси Kenwood или AEG, нашите клиенти търсят мискер или кафе машина и чак след това избират съответната марка от съответната категория. Затова решавам, че този блок с информация ми е ненужен за практическата работа на клиентите и го премахвам, вместо това мога да направя отделна страница на която да поместя всички марки и да сложа връзка към тази страница във Footer-a?
- Ревизията приключва когато са прегледани всички елементи от страницата и са останали само наистина нужните! Тези, които са от изключително значение поставяме по-горе в сайта останалите преди и във Footer-a.
Планиране на страницата
Сега сайтовете, страниците и всичко се планира първо за мобилни устройства тъй, като те са бъдещето и всеки ги има за разлика от компютрите.
Най важната част от всеки един сайт е първата видима зона (Шапката на сайта, която понякога ще наричам HEADER) и всичко около нея или иначе казано това, което ви се изобразява след, като попаднете на страницата без да извършвате действие.
Препоръчително е в тази зона да сложите всичко най-важно за клиентите и ако остане нещо което не е толкова важно за навигацията в сайта може да го поставите по-долу, но само ако има смисъл от него. Ако няма смисъл отива в кошчето!
Оградените в синьо блокове съдържат 90% от цялата навигация в сайта, всичко останало е с рекламна или информативна цел.
Дизайн и неговата архитектура.
-
За да е бърз един сайт той трябва да съдържа възможно най-малък брой елементи, с възможно най-малка дълбочина!
Идеята да не се използват елементи с по-голяма от нужната дълбочина, в почти всички случаи това е лесно приложимо, но ако използвате теми, които го правят или още по-лошо Bootstrap архитектура ще се наложи доста преработка на целият код.
2. Препоръчително е използването на HTML5 и/или мигрирането от DIV ID към DIV CLASS, както и съкращаването на имената им:
Тази на пръв поглед малка миграция може да ви спести секунди време за зареждане особено ако имате сайт изграден от много елементи.
3. Използването на множество скриптове намалява времето за зареждане на страницата както и за нейното изобразяване.
Повечето от скриптовете са ненужни и функциите им могат да бъдат създадени чрез PHP и дори CSS, най-добрият вариант е да нямате външни script-ове, ето и снимка на тест на този сайт с LightHouse на Google Chrome.
Резултатите от теста показват, че ако този сайт оптимизира своите script-ови ресурси ще спести 1,5 секунди време за зареждане (включително и CSS ресурсите).
4. Оптимизация на CSS
Ще ви върна на първата скица на страницата ще изтрия имената на някои от блоковете и ще ги заместя с техните CSS class-ове. Това според мен трябва да е началото на всяко едно проектиране на флуиден (Responsive) уебдизайн. С тази базова архитектура ще създадем основното положение на блоковете и тяхната ширина спрямо устройството от което се посещава страницата ни.
<CSS>
.col1{width:100%}
.col2{width:44%;margin: 0 1% 0 1%}
.col3{width:31%;margin: 0 1% 0 1%}
.col4{width:23%;margin: 0 1% 0 1%}
.col5{width:18%;margin: 0 1% 0 1%}
</CSS>
С тези 5 реда създадохме базова CSS архитектура на целият сайт когато го гледаме от компютър, но какво става с мобилните устройства?
За да отговорим на последните изисквания зададени от търсачките (които са за добро) първо ще зададем стойностите за мобилни устройства и допълнително след това ще зададем @media за желаните настолни устройства:
<CSS>
.col1,.col2,.col3,.col4,.col5{width:96%;margin: 20px 2% 20px 2%}
</CSS>
@media (min-width: 1024px){
<CSS>
.col1{width:100%}
.col2{width:44%;margin: 0 1% 0 1%}
.col3{width:31%;margin: 0 1% 0 1%}
.col4{width:23%;margin: 0 1% 0 1%}
.col5{width:18%;margin: 0 1% 0 1%}
</CSS>
}
Ако се придържаме към простотата в дизайна и използването на архитектурни елементи вместо на индивидуално стилизиране на елементите можем да постигнем малки по обем CSS файлове, всъщност оптималният вариант е css да е вграден в <head></head> на сайта но ако успеем да създадем дизайн който да не отнема повече от 10kb, ако css файлът се получи по-голям от 10kb е удачно да извлечем всички class-ове отговарящи за видимото първо изобразяване на страницата и да ги поставим в <head>, а всички останали да бъдат кобинирани в един външен CSS файл.
Няма да коментираме минификацията на css тъй, като тя е нещо задължително, можете да използвате някои от тези онлайн минификатори на CSS за да намалите допълнително размерът им:
- https://cssminifier.com/
- https://www.minifier.org
- https://csscompressor.com
5. Изображенията и компромисите
Животът е пълен с компромиси… „Да си купя висок клас кола която ми гори много“ или „Икономична кола която не ми харесва толкова„, а компромисите с изображенията са дори още по-видими (все пак това е всичко което са!).
Да имаме красиви и детайлно изглеждащи снимки с безброй цветове в RAW формат или GIF снимка с 16 цвята? Това трябва да решаваме всеки ден, като дизайнери.
Всъщност не мисля, че някой използва RAW формат в сайт, но дори и JPG формат който не е оптимизиран се зарежда изключително бавно когато на една страница се покажат голям брой снимки.
Най-лесният вариант е да използваме снимков препроцесор който да оразмери всички снимки и да намали качеството им, до състояние в което това намаляне няма да дразни, лявата снимка е намалена оптимално дясната под оптималното качество. Но пък дясната е с много по-малък размер от този на лявата.
Ако това намаляне не може да стане на автоматичен принцип, което силно препоръчвам остава ръчното променяне качеството на всяка една снимка. Освен намалянето на качеството е добре снимките да не са по високи от 800px както и да се използват стандатните препоръчани формати като JPG за снимките и PNG или GIF за бутони и други малки елементи.
Ако разполагате с Photoshop има и лесен начин да промените всички снимки на веднъж, за който можете да научите тук.
6. FONT и ИКОНИ (FONTAWESOME)
Във всеки сайт има икони и понякога различен шрифт, честно казано не мисля, че има достатъчно добри FONT-ове, които да си заслужават разхищението, но дори и да откриете такъв моят съвет е НЕ ГО ИЗПОЛЗВАЙТЕ! Ако се поровите ще намерите някои съвети за оптимизирането на FONT, но аз лично не виждам голяма полза.
Иконите и в частност Fontawesome са друго нещо, на практика това също е FONT, но има много място за оптимизиране особено ако не използвате цялата галерия с икони, в MAGPROM използвам точно 16 икони и точно толкова съм оставил във файлът.
Оригиналният fontawesome_4.7.WOFF файл заема близо 90 kb място, което след редакцията ми беше намалено на 6 kb, или 13 пъти по-малък размер! Fontawesome идва с .CSS файл който също трябва да бъде редактиран като спестяването там е аналогично.
WOFF редактирах с FontForge редакторът.
7. SLIDER’s и как да ги направим само с HTML и CSS
Възможно е да не знаете, но за да се смени банер с друг baner или да се превъртят продукти в Carosel не е нужно да се използва jscript или още по-лошо Bootstrap заедно с Jquery, което е най-честата практика, която забелязвам. Всичко това може да се постигне само с HTML и CSS.
За пример вижте началната страница на MAGPROM също така страшно много примери можете да видите тук и да реализирате по най-удобният за вас начин.
Това е краят на тази статия засега, ако имате какво да допълните не се стеснявайте да използвате полето за коментар по-долу!
