Дорогие друзья, предлагаю вашему вниманию свой новый видеоурок о том, как ускорить сайт за три минуты. Нашел еще один свой пост по этой теме: Лучшие сервисы и плагины для анализа скорости загрузки сайта.
Скорость работы сайта очень важна не только для удобства посетителей, но и для поискового продвижения - при прочих равных условиях выше будут позиции у того сайта, который быстрее загружается. Описанная схема оптимизации применима к любым сайтам на любых движках, а также на статическом HTML.
Примечание - видеоурок лучше смотреть в полноэкранном режиме в качестве 720 (HD).
Видеоурок состоит из двух частей. Первая посвящена оптимизации изображений, вторая - оптимизации файлов стилей CSS.
🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь seoshaolin.com. Для читателей блога я делаю хорошую скидку. По прокомоду "блог" тариф Про стоит не 50, а 40 тыс. рублей. Тариф Лайт не 25, а 20 тыс. рублей. Тариф Команда не 75, а 60 тыс. рублей. Пишите мне в Telegram @mikeshakin.Обязательно сохраняйте копии всех файлов, которые оптимизируете, это позволит легко вернуться к оригинальным файлам в случае, если результаты оптимизации вас не устроят. После оптимизации советую проверить отображение вашего сайта в разных браузерах.
Приведу ссылки на необходимые сервисы.
Smushit.com/ysmush.it - удобный сервис от Yahoo, который позволяет оптимизировать изображения, что в итоге ускоряет загрузку вашего сайта. Оптимизировать можно как изображения в папке с темой вашего сайта, так и картинки, загруженные непосредственно в ваши статьи.
Как оптимизировать изображения для сайтов и блогов - мой видеоурок, который я упомянул в сегодняшнем материале. В нем описывается схема оптимизации изображений с помощью программы Adobe Photoshop.
CSSoptimiser - отличный сервис, который позволяет сжимать файлы каскадных стилей CSS за счет удаления лишних пробелов, строк, сокращения цветов и т.д. В результате размер файлов CSS уменьшается, что положительно сказывается на скорости загрузки сайта.
Вы можете посмотреть другие видеоуроки на shakin.ru, например, Мои секреты по работе с Gogetlinks и Как проверить индексацию страницы - 4 удобных способа. Также можете присоединиться ко мне в Твиттере: @shakin.ru, где я публикую ссылки на разные полезные и интересные материалы по продвижению сайтов и другим тематикам.
Желаю вам успешной оптимизации и ускорения скорости работы ваших сайтов!
Десерт на сегодня - девушка классно изображает звуки разных животных:
Подпишитесь на рассылку блога с полезными материалами по SEO
Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня
Интересно, Михаил. Надеюсь, что это только начало цикла статей и дальше будет какое-то продолжение)
Стоит заметить, что smushit иногда изменяет тип файлов, например, с gif на png, как это получилось в видео. В этом случае нужно заменить в таблице стилей пути к изображению.
Отличный пост, прекрасная инструкция!
Подпишусь пожалуй!
Спасибо.
спасибо за полезную информацию!)
Всё хорошо, но вот почему только в теории. На практике у тебя не подключены сжатые CSS файлы (побился CSS при сжатие? xD). Вот я недавно составлял список сервисов по сжатию CSS https://webfalse.ru/record.php?page=all&id=6.
Очень полезно! спаасибо
Привет, Михаил. Спасибо за полезное видео. С картинками все получилось, некоторые оптимизировал, а вот файл style.css сервис не хочет перерабатывать.
Пробовал и путь файла указывать и содержимое в окно копировать - сервис виснет (крутится загрузка браузера) и ничего не выдает. Даже не пойму в чем проблема может быть.
File size before optimization: 12.54 KB
File size after optimization : 8.18 KB
вот что у меня в итоге вышло, после оптимизации сss. на скорость не особо повлияло)
с оптимизацией изображения спасибо, можно еще упомянуть об оптимизации js файлах))
Вот только интересно, если все оптимизировать и сжать CSS ит.д не навредит это сайту? А как же быть если будет нужно что-то подредактировать, без пробелов там сам черт ногу сломит.
Всем пожалуйста!
Iceman, в последнее время я так полюбил видеоуроки, что обязательно планирую делать их еще.
Дмитрий, спасибо за информацию!
Genka, отличный список, спасибо!
Дмитрий Жилин, может, в другом браузере попробовать? Или воспользоваться списком по ссылке в комментарии от Genka.
sidash, думаю, все равно это положительно скажется на скорости, хоть и немного.
utb, да, можно было, но я решил сделать урок коротким.
Илюха, это не навредит - по сути, файл будет таким же. А редактировать можно будет сохраненный файл style-old.css, а потом его оптимизировать.
Спасибо за статью. Действительно, сжатие CSS и изображений наиболее простой способ ускорить загрузку сайта. Хотя я использовал другие сервисы: для сжатия PNG - punypng.com (но до этого создавал индексированное PNG через TheGimp, правда, если в изображении присутствует тени или полупрозрачность - они теряются, так что нужно аккуратно). А для CSS использовал codebeautifier.com.
Также для своего сайта я объединил 5 иконок соц.сетей через технологию CSS Sprites (чем меньше запросов к серверу, тем лучше).
Еще советую установить время кэширования файлов + включить GZip, если есть возможность.
Проверить скорость загрузки сайта можно либо на webo.in(только 10 бесплатных проверок, зато дают советы на русском), либо webpagetest.org (без ограничений, показывает больше, но на англ)
Клиентская оптимизация дает ощутимый результат, сам давно изучаю способы клиентской оптимизации сайтов.
полезная статья. по поводу комментария sidash могу заметить, что и 4 кБ это достаточно для небольшого ускорения. тем более, что описанным способом можно сжать стили и на плагинах, установленных на движке. а если еще сжать скрипты, то в целом получится значительное ускорения. однако не все стили модно сильно сжимать, так как сайт потом криво смотрится (как в моем случае), если Михаил не против публикации ссылки вот ещё один ресурс для сжатия стилей http://www.cleancss.com - достаточно хорошо сжимает стили (не так сильно, как на рекомендованном сервисе, но всё же). в итоге я сжал с учетом плагинов порядка 150-200 кБ, точно не помню. это на вордпрессе. на джумле вышло итого больше. рекомендую также сайт webo.in - делает отличный анализ сайта и показывает, какие стили, скрипты и картинки можно сжать для наибольшей оптимизации. довольно большой комментарий получился, не буду больше утомлять 😉
Dim565, спасибо за очень интересный комментарий.
Негодующий налогоплательщик, я только за! Отличный сервис, спасибо!
С css полная фигня. поменялись шрифты, размеры. все стало криво. наверное зависит от того как и кем прописан шаблон korrch.com Ну все равно спасибо за урок
ценная информация, беру на вооружение, а то кажется перегрузила сайт:)