Как ускорить загрузку вашего сайта

04.02.2014 | 21:55 Экономика

Несколько простых способов сберечь нервы посетителя и увеличить быстродействие вашего сайта.

Ещё полтора-два десятка лет назад среднестатистический сайт представлял собой практически «голый» текст, скупо украшенный крохотными картинками, а многие пользователи имели привычку и вовсе отключать отображение графики. Траффик был дорог, а соединения – медленными. И казалось бы, эти времена прошли: безлимитный интернет 10-50 Мбит/с сегодня — обычное дело.

Сегодня почти любой сайт увешан тяжеловесным медиа-контентом, к тому же расположенном на десятке различных серверов по всему миру. Но вопрос ускорения загрузки сайтов не стал менее актуальным: посетитель по- прежнему не любит ждать, а грузиться намного быстрее странички не стали. И кроме того, скорость мобильного интернета, который становится всё более популярен благодаря смартфонам и планшетам, всё ещё недостаточно хороша. Здесь мы рассмотрим несколько надёжных и простых способов оптимизировать ваш сайт, чтобы ни один пользователь не ушёл от вас раздражённым.

• Задумайтесь, не пора ли создать отдельные css для смартфонов и планшетов. Небольшой дисплей всё равно не позволит оценить все достоинства тяжеловесной фоновой графики и других подобных атрибутов «настольного» отображения сайта. Кроме того, как говорит статистика, сайты, адаптированные под мобильные устройства, продают намного больше, чем сайты, не рассчитанных для просмотра на смартфонах или планшетах. А значит — пользователи оценят вашу заботу об их времени, зрении и деньгах, и это скажется на конверсии сайта в лучшую сторону.
• Избавьтесь от использования явно устаревшей уже технологии flash — во времена HTML5 в нём нет больше никакой необходимости. Однако если вы всё ещё используете такого рода анимацию, проанализируйте используемые swf-файлы. Флэш использует векторный формат графики и скрипты, «весящие» на самом деле совсем мало. Флэшеры же чаще всего объединяют в единый файл растровые фоны и анимированные элементы, что приводит к неоправданному увеличению размера файла. Разумнее растровые фоны использовать в качестве фоновой графики средствами css, помещая анимированные флэш-элементы с прозрачным фоном в этот блок поверх графики. Например, единый swf-файл, весящий около 200-250 кб, будет разделён на растровую картинку-фон в 35-50 кб, и swf размером в 5-15 кб (в типических случаях) без потери качества. Оптимизация – в среднем в 4-5 раз.
• Разделите структуру и представление. Вы всё ещё используете табличную вёрстку и встроенное оформление? Мало того, что такие странички «весят» в 1,5-3 раза тяжелее, чем должны, они значительно хуже индексируются поисковиками: роботу приходится продираться сквозь дебри тяжеловесного кода, вместо того, чтобы индексировать контент.
• Оптимизируйте оформление своих страниц: с помощью CSS3 вы можете избавиться от давно устаревших способов использования графики в шаблоне своего сайта. CSS3 может практически всё!
• Откажитесь от практики загрузки контента с помощью копирования текстов из Word: многие системы управления контентом вместе с вашим текстом копируют и его тэги, совершенно ненужные на вашем сайте и увеличивающие «вес» контента практически в 2 раза. При этом — совершенно без смысла, это пустая нагрузка. Копируйте текст в обычный «Блокнот», и уже из него копируйте текст для вставки в текстовый редактор своей CMS.
• Проанализируйте быстродействие своего сайта с помощью одного из онлайн-инструментов. С их помощью вы сможете наглядно оценить, что именно тормозит загрузку вашего сайта. Возможно, это плохо оптимизированная для размещения в веб-графика, или веб-шрифты, или чрезмерное количество http-запросов и обращений к сторонним ресурсам.
• Не забывайте о кэшировании контента. Если определённые элементы вашего ресурса на известный вам срок будут оставаться гарантированно неизменными, браузеру лучше брать их из собственного кэша, чем с вашего сервера. Разумеется, этот способ будет актуален лишь для тех посетителей вашего сайта, которые заходят на него не в первый раз. Но даже в таком случае кэширование может оказаться полезным: вы наверняка используете библиотеки jQuery или motools, подумайте о загрузке скриптов не со своего сервера, а с серверов «Гугль» или «Яндекс». Скрипты также кэшируются браузерами, и велика вероятность того, что в кэше пользователя уже находятся эти библиотеки после посещения других сайтов.
• Сократите количество http-запросов. Как показывает практика, считывание документа занимает порядка 5% времени, всё остальное время отдано считыванию графики и скриптов. Сотня картинок на страничке – сотня запросов к серверу. И в этом случае у вас есть два способа уменьшить их количество: пожертвовать оформлением страницы (или количеством контента на ней), либо использовать технологию спрайтов. Спрайт – это все ваши картинки, объединённые в одну, в результате чего все требуемые изображения скачиваются разом, единовременно, и разумеется – по единственному запросу. Ваша задача – с помощью свойств css указать браузеру, какую часть подгружать в соответствующий контейнер. Для упрощения задачи можно использовать один из бесплатных веб-сервисов, которые выполнят за вас практически всю работу, от собирания спрайта до определения css-свойств.
• Ещё один способ сократить количество http-запросов – объединение файлов. Это касается и скриптов, и css. Кроме того, лучше отказаться по возможности от встроенного и внедрённого оформления в пользу связанных css: один файл будет содержать таблицы стилей для всего сайта. Таблицы стилей кэшируются, стало быть, вы получаете единственный запрос за всё время пребывания посетителя на вашем сайте. Разделение таблиц стилей на отдельные файлы удобно на стадии разработки, но в дальнейшем имеет смысл такие файлы объединять.
• Используйте shorthand-свойства при написании css (компактный метод). Объединение в одну строку нескольких не только уменьшает размер файла css, но и ускоряет его прочтение браузером. Кроме того, в дальнейшем такой файл значительно проще править, и риск допустить ошибку заметно снижается.

Более подробно отдельные вопросы увеличения быстродействия сайтов мы рассмотрим в дальнейших статьях.