7 съвета за ускоряване на вашия уебсайт днес
Всеки обича страхотна малка анимация за зареждане, нали? Но ако това прекъсване продължи повече от секунда или две, то само обръща внимание на факта, че уебсайтът се зарежда бавно. И това е убиец на уебсайт.
Потребителите очакват уебсайтовете да се зареждат бързо и ефективно. Ваша работа е да гарантирате, че дизайнът е не само визуално приятен, но и 100 процента функционален. Ако сайтът ви се влачи донякъде, можете да спрете да се притеснявате още сега, защото имаме седем съвета, които ще ви помогнат да ускорите уебсайта си с малки промени в дизайна. (Не забравяйте да посетите всеки от уебсайтовете, представени в публикацията; те изглеждат страхотно и зареждат светкавично.)
Разгледайте елементи Envato
1. Внимавайте с анимации
Анимацията в дизайна на уебсайтове е една от тенденциите „it“ на 2015 г. Не оставяйте изоставени, като създавате масивни файлове, които просто няма да се заредят. Започнете с по-малки анимирани докосвания, когато започнете да работите с този тип ефект и преминете към по-големи анимации, след като имате добро усещане как работят и работят с цялостната ви рамка на уебсайта.
Ключът към анимациите не е зареждането на куп видео файлове към вашия уебсайт. Колкото по-малка е анимацията, толкова по-лесно е да създадете нещо с мъничък отпечатък. И така, откъде да започнете?
Направете нещо просто и забавно, като например създайте анимирано състояние на курсора. Наличието на бутон за промяна на цвета или разширяване е изящен ефект, който ще ви помогне да овладеете CSS и да получите добро усещане за основна анимация, преди да преминете към по-големи елементи. Можете също да помислите за анимации за зареждане на AJAX или паралакс. Хубавото на всяка от тези опции е, че ви дава време да заредите елементи, без потребителят дори да забележи. Тъй като елементите се зареждат, докато потребителите превъртат, получавате няколко ценни секунди, за да приготвите всичко.
2. Оптимизирайте изображенията
С броя на HD и ретиновите дисплеи, достъпни за потребителите, може да се изкушите да заредите всичките си изображения като пълен размер с висока разделителна способност, когато изграждате уебсайта си. Не попадайте в този капан. Повечето от тези изображения вероятно са твърде големи, за да може вашият сайт да се справи ефективно.
Знайте типовете си файлове. Най-често срещаните файлови формати за изображения в мрежата са JPG, PNG, GIF и SVG.
- JPG: Най-подходящ за снимки, JPG файловете могат да варират по размер от малки до огромни. Когато запазвате JPG файлове за уебсайт, не забравяйте да запазите оптимизиран файл. (В Adobe Photoshop можете да оптимизирате изображения за мрежата, като използвате настройките за експортиране във Файл> Експорт> Експортиране като.)
- PNG: Използвайте този файлов формат за изображения, които включват текст, така че буквите да се представят добре. Това обикновено е доста малък файл.
- GIF: Предпочитаният файлов формат за по-малки анимирани елементи, като все по-популярното анимирано изображение в стил мем. Но внимавайте, този формат на файловете може да бъде важен, ако не сте внимателни.
- SVG: Ако имате нужда от векторно изображение за мрежата, това е най-добрият вариант. Може да се използва за всичко - от икони до лога.
3. Използвайте кода, където е възможно
Може да се изкушите да създадете куп изящни икони и изображения за вашия уебсайт и да заредите всеки като отделен елемент. Това може да причини някои проблеми. Вместо това използвайте код, за да извикате тези елементи, когато е възможно.
Използвайте и CSS, за да заредите фонови изображения. Това ще „принуди“ вашия сайт да зареди всичко останало преди фона, така че потребителите да могат да започнат да виждат други елементи и текст веднага на сайта. W3Schools има страхотен и прост урок за това как да направите това.
Има много инструменти като Font Awesome икони до много други CSS и JavaScript библиотеки, които можете да използвате за създаване на страхотни елементи със забавни ефекти, които са леки. (CSS Design Awards има особено приятна колекция от 30 бутона и формулярни елементи, които да опитате.)
4. Поддържайте видеоклиповете кратки
Друг модерен елемент в уеб дизайна е използването на цял екран видео на началната ви страница. Това може да бъде друг капан за време на зареждане. Ще се окажете попаднали между качеството на видеото, видеосъдържанието и скоростта и ще трябва да направите жертва някъде.
Най-добрите видеоклипове са супер къси - само няколко секунди - и цикъл, така че действието да не спре. Не е необходимо да включвате нито звукови, нито други ефекти.
Можете да опитате няколко други трика, за да намалите максимално размера на файла си.
- Помислете за цветно наслагване или размазване върху видео с по-ниска разделителна способност. Все още може да изглежда спретнато, но няма да изисква толкова честотна лента.
- Помислете за видео, което е по-малко от пълен екран.
- Изключете автоматичната игра, която може да „подмами“ потребителите да мислят, че вашият сайт се зарежда по-бързо, отколкото е.
- Не се заяждайте с дълги видеоклипове. Ако искате да покажете множество видеоклипове, помислете за елемента „плъзгач“ на видеоклипа или ръчно променяйте видеоклипове по график, така че потребителите да виждат нещо ново всеки път, когато посещават сайта. (Без значение колко добър е клипът ви, малко потребители ще гледат повече от няколко секунди, така че не жертвайте времето за зареждане за по-дълги клипове.)
5. Помислете за темата
Ако използвате WordPress или друга система за управление на съдържанието с тема, не забравяйте, че не всички теми са изградени еднакво. Въпреки че вероятно ще имате повече късмет с премиум вариант - някои от които ви позволяват да „изключите“ неизползваните елементи - внимателно разгледайте кода и изградете, за да сте сигурни, че това не е нещото, което затъва вашия сайт.
6. Гледайте вашите приставки
Имате ли тон приставки или приложения на трети страни, свързани с вашия сайт? Използвате ли активно всички тях? Не забравяйте да изключите неизползваните приставки, за да оптимизирате ефективността.
Потребителите на WordPress могат да се възползват от Plugin Performance Profiler, за да видят кои плъгини са активни и как работят. Това може да ви помогне да отстраните и идентифицирате проблеми и да премахнете или пренастроите тези приставки. (Често срещана проблемна област често са плъгини за социално споделяне.)
7. Компресиране, компресиране, компресиране
Не само, че отделните компоненти на вашия уебсайт трябва да бъдат компресирани, но и можете да компресирате сайта като цяло, за да го поддържате и работи бързо. Сред елементите, които могат да бъдат компресирани, са CSS и JavaScript файловете, изображенията и видеото (чрез оразмеряване) и сайтът като време използва инструмент като GZIP.
Минимизираните файлове са най-добрият път, когато става въпрос за плъгини и създаване на по-малки файлове. Освен това искате да проверите как е проектиран кодът в сайта. За максимална скорост всички JavaScript трябва да се съдържат в един файл, а всички CSS трябва да се съдържат в един друг файл. (Още една забележка: Където поставите този код също се отчита. Свържете CSS към горната част на страницата и JavaScript към дъното, за да увеличите и скоростта на вашия сайт.)
заключение
Вашият сайт се зарежда достатъчно бързо? Ако не, време е да го ощипате, за да отговаряте на оптималните времена на натоварване. (Ако въобще трябва да мислите за този въпрос, тогава вашият сайт вероятно не е достатъчно бърз.)
Уебсайтовете трябва да бъдат бързи, за да могат потребителите да взаимодействат незабавно. Колкото по-дълго отнема да се зареди страницата, независимо от устройството, толкова по-вероятно е потребителите да изоставят сайта напълно. Затова отделете няколко минути днес или тази седмица и преминете през този списък, за да се уверите, че вашият сайт се представя на оптимално ниво.
Източник на изображението: Мохамед Ал Султан .
