Найважливіші рекомендації тим хто робить перший сайт
Привіт шановні початківці веб-майстри. Ось Вам ще один термін - Продуктивність сайту.
Що таке продуктивність і для чого її потрібно покращувати, а так само як це робити, вже дуже багато розказано в рубриці SEO
У цьому пості я хочу все це систематизувати і розставити акценти, щоб у Вас був чітко позначений шлях або план дій.
Крім того я приведу унікальні поради провідних експертів по веб-продуктивності, по тих позиціях, яких на цьому сайті немає і знаючи які Ви зможете їх застосувати.
Отже, продуктивність сайту - це можливість сайта дати ту віддачу, на яку ви розраховували створюючи його.
І ось все найважливіші чинники і дії які необхідні для того, щоб цю віддачу отримати.
зображення
Перше що необхідно освоїти - це оптимізація зображень. так як саме вони складають основну вагу сторінки.
Не варто навіть починати будувати сайт Не освоївши будь-якої простої фотошёп типу GIMP, і застосовувати тільки полегшені зображення оптимальних розмірів.
Використовувати потрібний формат зображення. Наприклад малюнок краще форматувати в PNG а фотографії в JPEG.
Якщо вже вам життєво необхідно показати картинку в повній красі і вазі, то розмістіть її на сторонньому сервері типу trueimages.ru/. і поставте під полегшеним варіантом посилання з анкором «Подивитися повний розмір», або як то так.
На сайті не повинно бути жодного не оптимізованого зображення.
Вид або сприйнятливість сторінки
Сприйнятливість - характеристика того, як сторінка сприймається користувачем.
Цей показник дуже важливий і над ним стоїть добре попрацювати. Потрібно розуміти, що відвідувач приходить на сайт за конкретною інформацією, а не за тим щоб милуватися на різні веб-ефекти і інші краси.
Вигляд сторінки повинен бути простий. Можливо оригінальний, можливо солідний, але при цьому простий.
Необхідна навігація повинна бути простою і нечисленної, щоб не розсіювати увагу. Солідна простота - основна мета.
Відсутність надмірностей - хороший плюс для прискорення завантаження сторінки.
Свої шрифти, потрібно використовувати з великою обережністю, так як кожен додатковий шрифт здорово садить швидкість завантаження.
Тому не варто відразу ставити захист типу BulletProof Security. Це ж ще на полдвіжка коду.
Спочатку Вам потрібна тільки захист від спам ботів, і спроб початківців хакерів зламати ваш пароль.
Спам можна ізолювати капчёй, або легким плагінчіком типу Kama SpamBlock, а пароль зробити складніше і частіше міняти.
В останній версії WordPress це робиться в один клік.
З питання про небажаних ботах можна звернутися і до хостера, і якщо хостинг дійсно хороший, то Захист від такої напасті Вам буде забезпечена з боку сервера.
На моєму Бегета наприклад, ця послуга безкоштовна, і я вже давно не знаю турбот з ботами тип Хруммер і т.п.
Рекомендації дані в ній доступні для самих початківців.
Додатки, плагіни, 3rd Party
По можливості скоротити використання додатків плагінів і даних третіх сторін (Third party data).
Джерела Third party data - сервіси розсилок, платіжні системи, сторонні сайти, сервіси обробки і зберігання даних
Бази даних Third party data створюються на зовнішніх платформах, і агрегуються з інших сайтів. Є багато ресурсів продають ці дані.
Природно виникає питання про правомірність використання, якість та безпеку таких даних.
Тому в налаштуваннях браузера краще блокувати cookies сторонніх ресурсів.
Блокується більшістю антивірусів. Тому при виборі антивіруса цікавтеся, чи є в ньому захист від pixel tags, в іншому випадку можна отримати стільки таких пікселів, що сторінка стане непідйомною.
Про плагінах сказано вже багато, і все ж додам: навантаження на сайт створювана плагінами дуже суттєва, так як крім заявлених необхідних функцій, вони несуть абсолютно непотрібний додатковий функціонал.
Найчастіше він перевищує основний, і так же часто впроваджується в початок сторінки, що сильно гальмує завантаження.
кешування
Плагін кешування єдиний з доданків не гальмує, а прискорює роботу сайту і його обов'язково потрібно встановити.
Плагін створює статичні копії файлів, отримати які браузеру набагато легше, ніж вантажити з БД динамічний контент.
Графік поновлення файлів задається користувачем. Наприклад на цьому сайті статичні файли оновлюються кожні 24 години.
Крім того плагін використовує GZIP стиснення (стиснення без втрат) при передачі даних, що додатково прискорює процес.
CSS
Отрісовка сторінки починається тільки після завантаження CSS файлів.
При створенні першого сайту багато початківці веб-майстри починають активно змінювати оформлення HTML елементів.
Необхідна особлива ретельність в таких діях, щоб не допустити повторення стильових властивостей для одного і того ж елемента.
Непрацюючі стилі з'являються в процесі розробки, необхідно відразу видаляти, щоб не забути про них, після чого вони зазвичай надовго залишаються у файлі.
Називайте селектори зрозумілими іменами, щоб легко розібратися які стилі який елемент оформляють.
Мінімізуйте «важкі» властивості такі як box-shadow і прозорість rgba.
Якщо в шаблоні підключені декілька CSS файлів, то краще об'єднати їх в один.
В цілому використовуйте якомога менше CSS і скриптів. Як я вже говорив вище основна мета - оригінальна простота.
При необхідності впровадження скрипта забезпечте йому асинхронну завантаження (атрибут async).
вибір хостингу
Крім загальновідомих характеристик хостингу, зазвичай представлених на їх головних сторінках, поцікавтеся по скільки ресурсів знаходиться на одному IP.
Якщо дешевий хостинг тримає на одному IP більше десятка ресурсів, відмовтеся від такого обслуговування, так як всі Ваші зусилля щодо поліпшення продуктивності сайту повгрузають як в болоті в такій кількості сусідів.
адаптивність
Використовуйте тільки шаблони адаптовані під мобільні пристрої. Альтернативно можна адаптувати стаціонарний шаблон.
Вже зараз половина трафіку приходить з мобіл, і що буде завтра - легко уявити.
Бажаю творчих успіхів.
А ну-ка, що там ще цікавого
Ну ладно, спробуємо розібратися. Швидше за все Ви створили папку site в Документах. Потім створили каркас сторінки. Тобто скопіювали у мене в статті і вставили в Notepad ++ в Новий документ (відкривається першою іконкою). Далі не потрібно «Зберегти як», потрібно натиснути третю іконку (синя) «Зберегти». Відкриється вікно пошукача. У ньому дійсно спочатку вискочить папка Notepad ++, так як Ви перебуваєте в цій програмі, але ж це ж пошуковик. Збоку зліва там весь Ваш комп'ютер, тобто Робочий стіл, Бібліотеки, Комп'ютер.
Якщо Ви створили site в Документах, то ця папка знаходиться в бібліотеці, якщо в якийсь інший директорії, то її можна знайти або в Робочому столі або в Комп'ютері. У Недавніх місцях знаходяться всі Ваші завантаження і т.д.
Після того як Ви знайдете свій site і збережіть там Каркас сторінки, пошуковик буде відкривати відразу цю папку. Але з неї так само можна буде перейти в будь-яку іншу на Вашому комп'ютері.
Начебто я правильно зрозумів вашу проблему? Якщо немає то ще раз кажу пишіть докладніше то що робили, що хочете отримати і що не виходить. Покліковой. А то ви говорите про сам моменті, тобто про те що не виходить, а як Ви до нього прийшли - незрозуміло. Доводиться гадати.
Не виходить «зберегти як» каркас сторінки в документах і створеному в них site. Спливає папка з численними файлами notepad ++. що
робити?
Дякую за уроки, Сергій Юрійович. Лист важко Вам послати. Це вже 4-е.
Освоєння html, css і pnp - це круто. Я знаю ці мови лише скраєчку, що і показано на моєму блозі. Однак цього досить для створення сайту. Для крутого сайту звичайно замало, але зате є можливість для зростання.
Зробити сайт зараз дуже просто - встановив CMS, WordPress наприклад, ось тобі і сайт готовий, тільки заповнюй, але от щоб заповнювати без труднощів, і спокійно реалізовувати свої фантазії, звичайно треба знати основи веб-програмування, тобто основи html, css і pnp.
Ну а в подальшому, щоб зробити сайт красивим, зручним, грамотним, захищеним, швидким, а значить і популярним і заробляють, необхідно буде освоїти мови програмування, або взяти на роботу програміста.