Ультимативное руководство по веб-оптимизации (советы и лучшие практики)

Веб-оптимизация является важной частью веб-разработки и обслуживания, но также часто упускается из виду веб-мастерами. Просто подумайте о деньгах, которые вы можете сэкономить, и о том, как они могут помочь увеличить вашу читательскую аудиторию и трафик, когда они сделаны правильно..

Если вы еще не провели никакой оптимизации своего веб-сайта (или блога) или просто хотите узнать, как это может помочь ускорить ваш сайт, ознакомьтесь с этим списком советов по оптимизации, которые мы собрали вместе..

Мы разделили вещи на 3 отдельных раздела для лучшей читаемости - соответственно оптимизация на стороне сервера, оптимизация активов (который включает в себя веб-компоненты, такие как CSS, Javascript, изображения и т. д.) и Платформа, где мы сосредоточимся на Оптимизация WordPress. В последнем разделе мы добавим пару полезных ссылок. Полный список после прыжка.

Оптимизация: на стороне сервера

1. Выберите достойный веб-хостинг

   Ваша учетная запись веб-хостинга не имеет прямого отношения к оптимизации, которую вы собираетесь выполнить, но мы решили выбрать правильную учетную запись веб-хостинга, поэтому очень важно, что мы решили сначала обратить на нее ваше внимание. Учетная запись хостинга является основой вашего веб-сайта / блога, где важную роль играют безопасность, доступность (cPanel, FTP, SSH), стабильность сервера, цены и поддержка клиентов. Вы должны убедиться, что вы в хороших руках.

   Рекомендуемое чтение: Как выбрать веб-хостинг от Wikihow это отличная статья, которая дает вам шаги и советы, которые вы должны знать перед покупкой любой учетной записи веб-хостинга.

2. Размещать активы отдельно

   Когда мы упоминаем активы, мы имели в виду веб-компоненты, такие как изображений а также статические скрипты которые не требуют обработки на стороне сервера. К ним относятся любая веб-графика, изображения, Javascripts, каскадные таблицы стилей (CSS) и т. Д. Отдельные ресурсы хостинга не обязательны, но мы увидели потрясающий результат с точки зрения стабильности сервера в этой реализации, когда у блога был всплеск трафика.

   Рекомендуемое чтение: Максимизация параллельных загрузок в Carpool Lane.

3. Сжатие с GZip

   Короче говоря, содержимое передается со стороны сервера на сторону клиента (наоборот) при выполнении HTTP-запроса. Сжатие контента для отправки значительно сокращает время, необходимое для обработки каждого запроса.

   GZip Это один из лучших способов сделать это, и он зависит от типа используемых вами серверов. Например, Apache 1.3 использует mod_zip, Apache 2.x использует mod_deflate и вот как вы это делаете в Nginx. Вот несколько действительно хороших статей, чтобы познакомить вас со сжатием на стороне сервера:

   • Ускорить веб-сайт, включив сжатие файлов Apache
   • Сжатие веб-вывода с использованием mod_gzip и Apache
   • Как оптимизировать ваш сайт с помощью сжатия GZIP
   • Сжатие на стороне сервера для ASP

4. Свернуть перенаправления

   Веб-мастера все время перенаправляют URL (будь то Javascript или META). Иногда его целью является указать пользователям со старой страницы на новую или просто направить пользователей на нужную страницу. Каждое перенаправление создает дополнительный HTTP-запрос и RTT (в оба конца). Чем больше у вас перенаправления, тем медленнее пользователь попадет на страницу назначения.

   Рекомендуемое чтение: Избегайте перенаправлений Код Google дает вам хороший обзор по этому вопросу. В статье также рекомендуются некоторые практические способы минимизации перенаправления для увеличения скорости обслуживания..

5. Уменьшить количество DNS-запросов

   В соответствии с Yahoo! Блог сети разработчиков, DNS (система доменных имен) занимает около 20-120 миллисекунд для разрешения IP-адреса для данного имени хоста или доменного имени, и браузер не может ничего сделать, пока процесс не будет завершен должным образом.

   автор Стив Соудерс Предполагается, что разделение этих компонентов по крайней мере на два, но не более четырех имен хостов сокращает поиск DNS и допускает параллельные загрузки в высокой степени.. Прочитайте больше на статью.

Оптимизация: активы (CSS, Javascripts, изображения)

1. Объединить несколько Javascripts в один

   Люди в rakaz.nl рассказывает, как вы можете объединить несколько Javascripts, как:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   В один файл, изменив URL на:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   манипулируя .htaccess и используя PHP. кликните сюда читать больше.

2. Сжатие JavaScript и CSS

   преуменьшать является приложением PHP5, которое может объединять несколько файлов CSS и Javascript, сжимать их содержимое (т.е. удалять ненужные пробелы и комментарии) и предоставлять результаты с помощью кодировки HTTP (gzip / deflate) и заголовков, которые обеспечивают оптимальное кэширование на стороне клиента.

   

   Сжать их онлайн!Есть также некоторые веб-сервисы, которые позволяют вам вручную сжимать ваши Javascripts и CSS файлы онлайн. Вот несколько, которые мы узнаем:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • Оптимизатор CSS (CSS)

3. Настройка срока действия заголовка / кэширования

   Кредит: httpwatch

   Используя настраиваемый заголовок Expiry, ваши веб-компоненты, такие как изображения, статические файлы, CSS, Javascript, пропустили ненужный HTTP-запрос, когда один и тот же пользователь перезагрузил страницу во второй раз. Это уменьшает необходимую пропускную способность и определенно помогает быстрее обслуживать страницу.

   Рекомендуемые показания:

   • Yahoo! Блог сети разработчиков - добавьте заголовок Expires
   • Как добавить заголовки Good Expires к изображениям в Apache 1.3
   • HTTP-кеширование
   • Руководство по кэшированию для веб-авторов и веб-мастеров

4. Разгрузить Активы

   Под разгрузкой мы подразумеваем отделение Javascripts, изображений, CSS и статических файлов от основного сервера, на котором размещен веб-сайт, и размещение их на другом сервере или использование других веб-служб. Мы видели значительное улучшение здесь, в Hongkiat путем выгрузки ресурсов в другие доступные веб-сервисы, в результате чего сервер в основном выполняет обработку PHP. Вот некоторые предложения онлайн-сервисов для разгрузки:

   • Изображений: Flickr, Smugmug, Платные хостинги *
   • Javascripts: Google Ajax Library, Google App Engine, Платные хостинги *
   • Веб-формаs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Опрос и Опросы: SurveyMonkey, PollDaddy

   * Платные хостинги - Платные услуги всегда имеют лучшую надежность и стабильность. Если ваш сайт постоянно запрашивает активы, вам нужно убедиться, что они в надежных руках. Мы рекомендуем Amazon S3 и Cloud Front.

5. Обработка веб-изображений

   Изображения являются важной частью вашего сайта. Однако, если они не будут должным образом оптимизированы, они могут стать бременем и в конечном итоге использовать непредсказуемо большое количество пропускной способности на ежедневной основе. Вот некоторые лучшие практики для оптимизации ваших изображений:

   • Оптимизировать изображения PNGFolks at Smashing Magazine описывает некоторые умные приемы, которые могут помочь вам оптимизировать ваши PNG-изображения.
   • Оптимизация для веба - Что нужно знать (форматы) Узнайте больше о Jpeg, GIF, PNG и о том, как сохранять изображения в Интернете..
   • Не масштабировать изображенияВсегда практикуйте вставку ширина а также рост для каждого изображения. Также не уменьшайте изображение только потому, что вам нужна уменьшенная версия в Интернете.. Например: Не заставляйте масштабировать изображение размером 200 × 200 пикселей до 50 × 50 пикселей для своего веб-сайта, изменив ширина а также рост. Получите вместо 50 × 50 пикселей.

   Оптимизация с помощью веб-сервисов и инструментов. Хорошая новость в том, что вам не нужно быть экспертом по Photoshop для оптимизации ваших изображений. Есть много веб-сервисов и инструментов, которые помогут вам сделать работу.

   • Smush.itВероятно, один из самых эффективных онлайн-инструментов для оптимизации изображений. Есть даже плагин для WordPress!
   • JPEG & PNG StripperСредство Windows для удаления / очистки / удаления ненужных метаданных (мусора) из файлов JPG / JPEG / JFIF & PNG.
   • Оптимизатор изображений в ИнтернетеПозволяет легко оптимизировать ваши GIF-файлы, анимированные GIF-файлы, JPEG-файлы и PNG-файлы, чтобы они максимально быстро загружались на вашем сайте с помощью Dynamic Drive.
   • SuperGIFБез усилий уменьшите размер всех ваших GIF-изображений и анимации..
   • Вот больше.

6. Обработка CSS

   Современные веб-сайты используют CSS как основу стиля, а также внешний вид. Не только CSS дает большую гибкость изменениям, но и меньше с точки зрения необходимых кодов. Однако, если они плохо закодированы, это может иметь неприятные последствия. Вот несколько контрольных списков, или, вернее, руководство для вас, чтобы убедиться, что ваш CSS должным образом оптимизирован:

   • Поддержание детей ваших элементов в соответствии с потомствомКак сохранить разметку в чистоте с помощью CSS-селекторов.
   • Держите CSS короткимКогда они дают одинаковый стиль, коды тем короче, чем они. Вот Краткое руководство по CSS вам, вероятно, понадобится.
   • Используйте CSS SpriteТехника CSS Sprite уменьшает HTTP-запрос каждый раз при загрузке страницы, комбинируя несколько (или все) изображений вместе в одном файле изображения и управляя его выводом с помощью CSS фон положение приписывать. Вот несколько полезных руководств и техник для создания CSS-спрайтов:
     • Интернет CSS Sprite Generator
     • Лучший онлайн и автономный генератор CSS спрайтов
   • Использование каждого объявления только один разПри поиске оптимизации ваших CSS-файлов одна из самых эффективных мер, которую вы можете использовать, - это использовать каждую декларацию только один раз..
   • Уменьшить количество файлов CSSПричина проста: чем больше у вас CSS-файлов, тем больше HTTP-запроса он будет делать при запросе веб-страницы. Например, вместо нескольких файлов CSS, как показано ниже:

     Вы можете объединить их в один CSS:

   Рекомендуемые показания:

   • Полезные инструменты для проверки, очистки и оптимизации вашего файла CSSНекоторые из полезных инструментов, которые вы можете использовать для оптимизации вашего CSS-кода, даже если вы совсем не разбираетесь в CSS-кодировании.
   • 7 принципов чистого и оптимизированного кода CSSОптимизация - это не только минимизация размера файла, но и организация, бесперебойность и эффективность..
   • Лучшие практики для оптимизации CSSСчитайте эту статью скорее академическим упражнением, чем реальными советами по оптимизации.

Оптимизация для WordPress

Время от времени мы отслеживаем, измеряем и анализируем эффективность нашего блога на WordPress. Если сайт работает медленно, мы должны знать, почему. Вот некоторые основные изменения, которые мы сделали, и мы решили, что это значительно увеличит скорость вашего блога на WordPress..

1. Кэшируйте свой блог Worpress

   WP-Cache это чрезвычайно эффективная система кэширования страниц WordPress, которая делает ваш сайт намного быстрее и отзывчивее. Мы также рекомендуем WP Super Cache который усиливает от предыдущего упомянутого плагина и тоже делает большую работу.

2. Деактивировать и удалить неиспользуемые плагины

   Когда вы заметите, что ваш блог загружается очень медленно, посмотрите, установлено ли у вас много плагинов. Они могут быть виновником.

3. Удалите ненужные теги PHP

   Если вы посмотрите на исходные коды вашей темы, вы найдете много таких тегов:

   Они могут быть в значительной степени заменены текстовым контентом, который не вызывает нагрузки на сервер. Проверять, выписываться Майкл Мартин«s 13 тегов для удаления из вашего WordPress Bloг

Рекомендуемые чтения:

• 3 простых способа ускорить работу WordPressДжон Pozadzides рассказывает, как его блог плавно плавает через всплеск трафика Digg.
• 13 отличных советов и подсказок по скорости WordPress для максимальной производительности Вот несколько вещей, которые можно попробовать, если вы обнаружите, что ваш сайт WordPress работает не так хорошо, как это может быть из-за большого трафика или скрытых проблем, о которых вы не знаете.
• 40 советов по оптимизации WordPressСоветы по оптимизации в слайдах. 40 советов за 40 минут.

Последний, но тем не менее важный…

Вот некоторые полезные веб-сервисы и инструменты, которые дают вам более широкую перспективу и лучший анализ, чтобы помочь вам в веб-оптимизации.

• Yahoo! YSlow

  YSlow анализирует веб-страницы и предлагает способы повышения их производительности на основе набора правил для высокопроизводительных веб-страниц. Это дает вам хорошее представление о том, что нужно сделать, чтобы сайт загружался быстрее..

  (Требуется Firebug)

  

• PageSpeed

  Похожий на Yahoo! YSlow, Google Скорость страницы является надстройкой Firebug с открытым исходным кодом для оценки производительности веб-сайта и способов ее улучшения. (Требуется Firebug)

  

• Инструменты Pingdom

  Инструменты Pingdom полностью загрузить ваш веб-сайт, включая все объекты (изображения, CSS, JavaScripts, RSS, Flash и фреймы / фреймы), и показывает общую статистику о загруженной странице, такую ​​как общее количество объектов, общее время загрузки и размер, включая все объекты.

  

Рекомендуемые показания:Вот больше советов и инструментов, которые стоит проверить.

• Google Web Optimizer
• 15 инструментов, которые помогут вам разработать более быстрые веб-страницы
• 15+ советов для ускорения вашего сайта и оптимизации кода!