Как да проектирате интерфейс, който е изграден за скорост
Бавният ви сайт ли е? Бъди честен. Може ли по-бързо? Потребителите изискват уебсайтове, които се зареждат бързо и продължават да доставят съдържание без забавяне. Ако вашият уебсайт изостане най-малко при удовлетворяването на това търсене, потребителите могат да изоставят вашия сайт (и те никога няма да се върнат).
Днес ще разгледаме начините да гарантираме, че интерфейсът на уебсайта Ви е изграден за бързина, така че никога повече да не се притеснявате за натоварването на страниците.
Разгледайте елементи Envato
Тествайте уебсайта си
Преди да се спрете на „няма как моят уебсайт да е бавен“, проверете го. Google има страхотен инструмент, който всеки може да използва за тестване на всеки уебсайт, като въведе URL адреса.
Получавате изящен доклад, който ви казва колко бързо се движи сайтът ви и къде би могъл да бъде подобрен. Добре е периодично да тествате теста, за да сте сигурни, че всичко функционира гладко. (Плюс това намалява производителността на мобилни и настолни устройства и предлага предложения за подобрение.)
Докладът съдържа три препоръки - трябва да се коригира, помисли за поправяне и приет - за следните елементи:
- Кеширане на браузъра
- Оптимизация на изображения
- Отговор на сървъра
- Скриптове и CSS над страницата
- компресия
- пренасочвания
- Минимизиране на CSS, HTML и JavaScript
- Приоритизиране на видимото съдържание
Изхвърлете ненужните приставки
Задържате ли плъгини или добавяте добавки, които просто не използвате? Време е да ги зарежете.
Дори елементи, които не се използват, теглят скорост от вашия сайт. (Това е особено вярно, ако работите със система като WordPress.)
Влезте в режим на почистване и премахнете всички неизползвани приставки. Трябва да помислите и за плъгините, които се използват, и да се уверите, че действително ги използвате или че те допринасят за цялостното потребителско изживяване, ако не намерите по-добра опция.
В допълнение към броя плъгини, качеството също е проблем. Не добавяйте нито един стар плъгин към вашия уебсайт. Опитайте се да намерите елементи, които дават действителна стойност и да получите висока оценка. Старите, остарели елементи също могат да влачат сайта ви надолу.
Споделяйте само според нуждите
Докато мислим за плъгини, колко бутони за споделяне на социални медии имате на уебсайта си? Сега отговорете честно: Колко всъщност се нуждаете?
Твърде много от тези бутони могат да бъдат объркващи за потребителите - колко всъщност ще споделят на множество платформи, така или иначе - и намаляват скоростите и времето за зареждане. (Това важи особено за онези, които се опитват да разберат колко харесвания или споделя публикация, която вече има с заявки, изпълнявани в двете посоки.)
Изберете една или две мрежи, където сте активни и където потребителите се свързват редовно с вашия уебсайт и включва тези бутони. Изкопайте останалите. Те само се затрудняват.
Внимавайте с претоварването на изображението
Видео, илюстрации, снимки и анимации ... о, ми! Всички тези страхотни визуални елементи могат да добавят време за зареждане. Изберете разумно.
Преди да добавите визуално към дизайна на уебсайта, претеглете стойността му спрямо други елементи. Предоставя ли нещо за потребителите? Ако е така, продължете. Ако не, защо използвате този дизайнерски елемент?
Трябва да оптимизирате всички изображения по подходящ начин в мрежата. По правило изображенията трябва да са само толкова големи, колкото е необходимо. Не прекарвайте зад борда и качвайте снимки в пълен размер. Отнема малко работа в предния край, но ще се радвате, че го направите по-късно (особено ако уебсайтът ви продължава да расте).
Възползвайте се и от други трикове. Опитайте шрифтове за икони, а не икони, базирани на изображения. Преобразувайте елементи в SVG (мащабиран вектор формат), ако шрифтът на иконата не работи. Използвайте колкото можете повече HTML и CSS „магия“ и не заблуждавайте сайта с елементи, които се зареждат като снимки, като бутони, стрелки и други инструменти за потребителски интерфейс.
Премахнете натоварването с инструменти за свиване
Малките файлове са ключът към максималната скорост. Балансът е в идеята, че дисплеите с висока разделителна способност ви позволяват да споделяте и показвате съдържание с най-високо качество. Именно там влизат свиващи инструменти.
Ако не се чувствате уверени в способността си да оразмерявате и свивате - или просто не получавате желания резултат - опитайте една от тези опции, за да свалите файловете до най-малките използваеми размери.
- WP Smush свива изображения за потребителите на WordPress
- Kraken компресира изображения за всички потребители
- TinyPNG намалява размера на общия формат още повече
- Gzip пакетира файлове за оптимално компресиране
- Минимизиране на вашия CSS намалява общия размер на кода и включва API
- SpriteMe превръща фоновите изображения в CSS спрайт, за да запазва HTTP заявки
- CSS Compressor намалява общия размер на кода
Просто го кеширайте
Активирайте кеширането на вашия уебсайт.
Ако не правите това, вашите потребители плащат цената. Все още има няколко души, които могат да аргументират друго, но стойността за потребителите надхвърля тези аргументи. Вашият уебсайт трябва да бъде бърз.
Кеш създава временен файл от страници, така че браузърът „запомня“ сайта, когато потребителят се върне. Намалява използването на честотна лента, натоварването на сървъра и времето на забавяне (действително или възприемано). Потребителите ще ви благодарят, особено когато става въпрос за достъп до по-масивни уебсайтове.
Почиствайте го редовно
Точно както трябва да почиствате дома си редовно, вие трябва да почиствате и поддържате базата данни, връзките и файловете на уебсайта си.
Това са елементите от контролния списък за почистване на уебсайта Ви:
- Оптимизирайте вашата база данни. С течение на времето вашата база данни може да се задръсти с ревизии, излезли от употреба снимки и запазени данни. Не е нужно да запазвате всичко. Почиствайте елементи, които вече не са част от плана на вашия уебсайт.
- Не използвайте горещи връзки. Издърпването на изображения от нечий друг уебсайт (и сървър) към вашия е само лоша идея. И става бавно. Същото важи и за почти всяка друга заявка за външен файл. Използвайте ги само когато е необходимо.
- Поправете връзки. Прекъснатите връзки може да не забавят вашия сайт, но забавят връзката, която потребителите правят от вашия сайт към други места, което може да бъде също толкова лошо. Влезте в навика да проверявате и коригирате развалени връзки.
- Поддържайте всичко актуализирано. Ако работите на платформа като WordPress, направете актуализациите. Ако използвате тема или поле с елементи от всякакъв тип, същото е вярно. Актуализациите могат да съдържат кръпки, които допринасят за бързината, както и предпазват вашия уеб сайт от потенциални заплахи. (И нищо не е по-бавно от сайт, който е хакнат или заразен със злонамерен софтуер.)
заключение
Сега прегледайте списъка по-горе и се върнете към инструмента на Pagespeed Insights на Google. Пусни го отново. Забелязвате ли разлика?
Нищо няма да направи потребителя по-щастлив и по-вероятно да се върне към уебсайта ви от страхотно и бързо преживяване. По време на всички фази на визуалния дизайн, не забравяйте да помислите и за дизайна на интерфейса, така че вашият уебсайт да бъде изграден за бързина.
