Скорость загрузки страницы является важным фактором на сегодняшний день. Если сайт грузится долго, то пользователю будет проще закрыть вкладку и перейти на другую страницу.

Что влияет на скорость загрузки? Ответ прост и ясен – картинки, всякие js-скрипты, css, ну и конечно же сам контент, в том числе и скорость обработки самих php-файлов и выполнения запросов к БД(если речь идет о динамическом сайте).

Речь пойдет о двух вещах, о визуальных плагинах и о изображениях, так как они обычно весят больше всего остального на странице. Я вставляю как минимум одну картинку в каждый пост, поэтому приходится думать о их оптимизаций. Так вот, хочу поделиться несколькими советами, не то чтобы, что то новое, а просто самое важное на мой взгляд. Тем более, за все время существования блога, я еще не разу не писал о оптимизаций…

Изображения

1. Выносим картинки на поддомен

Для того чтобы браузер параллельно смог грузить и скрипты и контент и картинки, нужно вынести все это на отдельные поддомены. Например, картинки на img.site.ru, css и js на static.site.ru.

Загрузка картинок на поддомен

О том как релизовать это для WordPress без использования каких-либо дополнительных плагинов, можно прочитать на TechTipsGeek. Или можно воспользоваться одним из этих плагинов: CDN Tools, WP ImageHost или W3 Total Cache

Я решил обойтись без плагинов и вынес картинки на img.artslab.info =)

2. Сжатие картинок при загрузке на сайт

Можно в ручную сжимать каждую картинку с помощью Adobe Photoshop и функций Save for Web. А можно упростить процесс сжатия и воспользоваться плагином WP Smush.it. При загрузке картинок плагин сразу же сжимает их и показывает насколько хорошо ему это удалось. На глаз, изменения в качестве заметны не будут, зато это позитивно повлияет на скорость загрузки. Не забудьте так же сжать изображения самой темы оформления сайта.

Сжатие картинок при загрузке

Кстати, Smush It доступен и в виде отдельного онлайн сервиса.

Кроме этого, можно так же сжимать миниатюры. Реализуется это без плагина, просто необходимо добавить пару строк в файл темы functions.php.

Плагины

1. Не нужно ставить 10 кнопок с разных социальных сетей

Кнопки соц.сервисов

Я понимаю, что без кнопок социальных сетей сегодня никуда, но все таки с ними стоит быть поосторожней. Поверьте мне кнопки влияют на скорость загрузки, особенно если стоит штук 5-6, то их общий вес может оказаться вполне приличным (6 кнопок – ~100 кб). Например, кнопки Twitter, Vkonakte, Facebook подключаются в виде iframe и несут в себе много кода. Один из выходов из этого положения, вариант размещения статических кнопок, т.е. просто графики с ссылкой, без счетчика. Или поставить один виджет, например Share от Яндекса.

2. Аккуратно выбирайте плагины визуальных украшений

При выборе всяких слайдеров, красивых форм и прочих прелестей, смотрите на их размер и то, на какой js-библиотеке они работают. В WordPress уже используется jQuery. Поэтому я бы порекомендовал использовать плагины, который работают именно с ней, а не с другими, которые придется подгружать дополнительно (например, mootools или prototype…). Вообще в целом стоит быть осторожными с визуальными наворотами, во первых из за скорости, а во-вторых не стоит забывать о кроссбраузерности.

3. Используйте плагин для кэширования

Можно в ручную добавить нужные строки в htaccess, а можно воспользоваться готовым плагином, их существует огромное количество. Из всех я бы порекомендовал Cachify, простой и без лишних настроек.

Вот пока вроде все, что хотел рассказать. Вообще тема оптимизаций бесконечна, на мой взгляд, в ней есть много всяких особенностей, тонкостей и нет границ.

Взлетаем 😉

Опубликовано
Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo