Быстрее бл…!
Работа над моим последним проектом показала, что пора бы уже взяться за изучение вопроса оптимизации сайтов, для ускорения их загрузки.
Как обычно, я вплотную взялся за этот вопрос и перелопатил кучу ресурсов, в поисках ответов. В результате вывел для себя ряд правил по оптимизации:
I. До начала верстки
- Используйте CSS. По возможности, применяйте CSS вместо обычной анимации. Вот несколько полезных ресурсов для этого:
- Генератор анимированных CSS градиентов — https://www.gradient-animator.com/
- Анимация текста (css и javascript), демонстрация: http://www.stilllife.studio/txtwav исходники: http://github.com/still-life-studios/txt.wav
- Онлайн инструмент для создания модульной системы типографики — http://www.gridlover.net
На всякий случай упомяну, что текст на этом ресурсе выравнивается не по нижней линии сетки, а ровно по середине между двумя линиями; задумка в том, чтобы везде сохранить равнозначные отступы.
2. Делайте анимацию в SVG. Вот доступный пример простейшей анимации иконки, созданной в adobe illustrator:
3. Используйте веб-шрифты, чтобы браузеру не пришлось закачивать ваши установленные — https://fonts.google.com/
На случай, если там нет нужного (хотя сейчас там больше 70 кириллических шрифтов), при скачивании шрифтов, минимизировать их вес. Например, на этом ресурсе можно даже удалять отдельные буквы — https://webfont.ru/
4. Оптимизируйте изображения. При выборе формата изображения отдавайте приоритет векторным (логотипы, иконки, значки, иллюстрации). Для фотографий оставляем растр. Теперь ресурсы по оптимизации изображений:
- Очистка svg от мусора- https://github.com/svg/svgo/blob/master/README.ru.md
- Создание и оптимизация гиф — http://www.lcdf.org/gifsicle
- Сжатие png без потерь — http://optipng.sourceforge.net
- Сжатие png с потерями — https://pngquant.org
II. После верстки
- Проверьте скорость загрузки вашего сайта с помощью сервиса от Google — https://developers.google.com/speed/pagespeed/insights/
2. Используйте скрипт для сжатия CSS. Просто вставляете код в ваш сайт, остальное сделает он — http://www.phpied.com/cssmin-js/
3. Свяжитесь с хостинг-провайдером и попросите его включить опцию сжатия данных протокола HTTP.
4. Онлайн компрессор JavaScript/CSS/HTML — http://refresh-sf.com
5. Разрешите браузерам кэшировать данные.
Надеюсь, этого будет достаточно и следующий мой проект будет загружаться как главная Google!)))
Если вы знаете еще какие-то полезные инструменты и настройки, буду рад, если поделитесь со мной!
Станем друзьями!
Учу создавать сайты без единой строчки кода на YouTube
Я в VK
Я в Instagram
Я в Pinterest
