10 советов по улучшению работы сайта
Важным показателем качества веб сайта для пользователей является его производительность и скорость загрузки. Вы будете терять потенциальных клиентов и посетителей, если ваш интернет сайт будет загружаться слишком медленно. Нужно думать об оптимизации скорости своего сайта, так как многие поисковые системы учитывают этот параметр до миллисекунды в рейтинге поиска. Вот несколько практических советов по улучшению производительности разрабатываемого вами сайта.
1. Используйте отсрочку загрузки содержания
Для этого существует технология Ajax, позволяющая осуществлять фоновый обмен данными между браузером и веб-сервером. Суть технологии заключается в том, что при перезагрузке веб страницы, она обновляется не полностью, а частично.
Приведем в качестве примера использование галереи изображений. Как правило, изображения довольно тяжелые, объемные и при загрузке замедляют скорость загрузки веб-страницы. При первом же заходе на сайт, посетитель не должен ждать, когда загрузятся все изображения. Для просмотра ему достаточно видеть миниатюрные картинки. Если пользователь захочет рассмотреть что-то более подробно, ему достаточно нажать на превью и сделать асинхронный запрос на показ изображения в натуральном размере.
Пользователь должен иметь выбор просмотра того содержания сайта, которое ему нужено, а не ждать загрузки всех изображений. Эту методику называют Lazy loading - ленивой загрузкой. Такие разработки, как как jQuery, Prototype и MooTools, принадлежащие к библиотеке Ajax, осуществляют отсроченную загрузку изображений еще быстрее и легче.
2. Используйте раздельное размещение JS и CSS файлов
При первой загрузке страниц сайта, браузеры пользователей кэшируют (сохраняют) JavaScript и CSS файлы, то есть, внешние ресурсы. А так как они довольно тяжелые, то целесообразнее будет размещать такие файлы вне страниц сайта.
Встроенный CSS увеличивает время отображения страницы. Если вы определите все параметры в главном файле CSS, то он автоматически уже знает все стили, которые ему надо применять для отображения всех остальных страниц сайта. Вследствие этого браузер выполняет меньше работы при отображении страницы веб сайта и позволяет загрузить её намного быстрее.
Если вы выносите JavaScript и CSS в отдельную директорию, то изменения вносите только в основные, глобальные файлы. Вам не придется вести поиск по кодам, разбросанным на многих страницах, а созданный сайт в результате станет более легким и удобным для загрузки в браузеры пользователей.
3. Не стоит забывать о системах кэширования
В случае если при каждой генерации контента для одной и той же страницы сайт посылает один и тот же запрос в базу данных, стоит подумать о кэшировании. Если у вас такая система реализована, вашему сайту нужно будет сгенерить контент один раз, а не создавать его еще раз при каждом следующем открытии страницы. В каждой такой системе кэширования предусмотрено обновление содержимого, это зависит от выбранных настроек, это позволяет кэшировать даже те страницы, где содержимое все время дополняется, например там, где пользователи размещают свои комментарии, добавляют новости.
Наиболее часто используемые CMS-системы, такие как Drupal, Joomla, WordPress, которыми пользуются многие веб-мастеры, имеют опцию статического кэширования, его задача - преобразовать динамически созданные страницы в статический HTML-код, в результате это значительно уменьшает нагрузку на сервер, облегчает работу системы. Если вы работаете на WordPress, стоит установить плагин WP Super Cache. А в системе управления сайтом Drupal предусмотрена функция кэширования непосредственно внутри ядра. Кроме того были созданы и активно используются системы для оптимизации работы баз данных и различных скриптов. Их устанавливают непосредственно на веб-сервере (вы можете сделать это сами или попросить об этом своего администратора).
Кроме этого в языке программирования PHP существуют так называемые ускорители или PHP accelerators, их цель - оптимизировать производительность системы путем сохранения данных, есть и другие методы работы. Примером такого ускорителя является APC. Если используется кэширование, значительно улучшается работа веб приложений, они лучше масштабируются, уменьшается нагрузка при чтении или записи данных. В качестве примера можно привести memcached, который сохраняет самые частые запросы к базе данных.
4. Не нужно злоупотреблять изменением размеров изображений
Скажем, если в начале мы имеем рисунок 1280x900 px, а нужно получить картинку 400x280 px, лучше всего уменьшить изображение в графическом редакторе, например, в Photoshop, вместо того, чтобы задавать новые значения при помощи HTML атрибутов размеров (то есть <img width="400" height="280" src ="big-image.jpg" />). У картинки большего размера файл всегда будет занимать больше места. Куда как разумнее уменьшить его в графической программе и сохранить заново, чем создавать лишнюю нагрузку для страницы.
В CMS Drupal есть очень полезный плагин, который позволяет менять размер изображений основываясь на HTML атрибутах картинки. Это очень удобно, для клиента, который будет работать с сайтом. Наша практика показывает, что заказчики очень часто вставляют в текст 2-3 мегапиксельные фото и уменьшают их в HTML до разрешения 200х200 и удивляются почему страничка грузиться долго.
5. Текст при помощи изображений не стоит выводить
Такой текст не индексируется поисковыми роботами, а, значит, для раскрутки сайта и размещения нужных ключевиков он будет бесполезен. Кроме того страница будет грузиться медленнее, за счет количества и размера картинок увеличивается ее вес.
В случае когда вам нужно несколько шрифтов для сайта, стоит применить CSS @font-face, такой текст будет смотреться намного эффектнее. Обрабатывать файлы шрифтов намного полезнее, чем картинки.
6. Применив верный формат файла, оптимизируйте размеры картинки
Осуществив данное действие, удастся оптимизировать файловые размеры, не утратив приемлемого качества. К примеру, формат PNG24 обычно предлагает альфа-слой изображения, который в большинстве случаев не нужен. Формат JPG почти всегда предоставляет изображение с небольшим объемом файла. Сделать правильный выбор между форматами JPG, GIF и PNG вам помогут эти гайды:
На помощь также придут многочисленные инструменты, с помощью которых удастся уменьшить веса изображений. Посмотрите на данный набор инструментов, они помогут преобразить ваши изображения.
7. Оптимизируйте способ написания html кода
Сначала пробегите взглядом по исходному коду. Точно ли есть необходимость во всех применяемых тэгах? Может быть существует вероятность использования CSS, чтобы осуществить вывод на дисплей. Возьмем, например, Ваш заголовок. В этом случае можно применять CSS, чтобы сделать его курсивом. Это достигается благодаря свойству font-style. С помощью эффективного кода получится не только сократить ваши HTML и CSS в размере, но и удастся поддерживать их с невероятной легкостью.
8. Старайтесь загружать JavaScript в нижней части документа
Гораздо полезнее устанавливать скрипты в нижней части страницы, чем в самом верху. Тогда браузер будет грузить JavaScript после обработки основной части. Благодаря такой установке страницы любого сайта станут более отзывчивыми. Если же JavaScript будет стоять вверху, то придется ждать до тех пор, пока скрипты не закончат загружаться. По возможности ссылайтесь на JavaScript сразу же после закрывающего тега BODY. Чтобы получить более подробную информацию, прочитайте про отсроченную загрузку скриптов.
9. Пользуйтесь Content Delivery Network
В переводе на русский это означает сеть доставки контента. Скорость вашего сайта напрямую зависит от положения посетителей относительно положения сервера. Чем ближе они располагаются, тем меньшее расстояние должны преодолеть передаваемые данные. Проблема скорости легко решается за счет кэширования контента на различных географических положениях, размещенных стратегически. Прибавку в скорости вы явно ощутите, однако сеть доставки контента сделает ваши эксплуатационные затраты несколько выше. Ознакомьтесь с Amazon Simple Storage Service или MaxCDN.
10. Попробуйте оптимизировать ваше кэширование
Вместе с применением систем кэширования, сделайте ресурсы, использующие веб-кэширование насколько это осуществимо. Данное действие сводится к тому, что файлы кэшируются браузером для дальнейшего вызова. В кэш браузер загоняет картинки, файлы CSS и JavaScript.
Кроме прописных истин, таких как расположение JavaScript и CSS во внешние файлы, существует большое количество способов узнать, что вы кэшируете собственные файлы наиболее полезно. Один из таких способов заключается в установке заголовков ответа HTTP (Last-Modified и Expires). Когда посетитель вернется на сайт, отдельные файлы будут загружены из кэша. Подробную информацию можно узнать, прочитав про усиление кеширования в браузере и кеширование в HTTP.
