Исходный код приложения android. Как создать программу для смартфона за полчаса

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

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

Итак, поехали:

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

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

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

Кроме того, внешние.js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

Минимизация файла - это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

6. Используйте кэш браузера

Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.

Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

8. Оптимизируйте ваши изображения

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

• GIF – идеально подходят для изображений с несколькими цветами, например логотип.
• JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
• PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.

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

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.

Content-Encoding: gzip

Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

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

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

Если что-то упустил или у Вас есть, что добавить – пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!

Здравствуйте, уважаемые читатели блога сайт. Наверное, вам уже надоела тема увеличения скорости загрузки сайта (), которой я посвятил львиную долю статей вышедших в январе. Но что поделать, хочется изложить все то, что было понято и сделано для ускорения этого блога, пока коварная память не затерла нюансы и важные моменты.

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

Как можно быстро увеличить скорость загрузки сайта

При первом запуске Page Speed для главной страницы моего блога я увидел вот такую печальную картину:

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

Но кроме Page Speed очень наглядно оценить скорость загрузки сайта и посмотреть все загружаемые объекты можно в — Pingdom и ему подобных.

По началу происходила подгрузка почти 90 объектов (ccs, js, изображения) и на каждый из них нужен был отдельный http запрос. Но, проанализировав с помощью указанных выше онлайн сервисов все загружаемые объекты, а также следуя советам Page Speed, мне удалось сократить их количество до трех десятков, что не могло не сказаться на общей скорости:

Ну, а теперь вспомним обо всех методах по порядку. И начинать оптимизацию следует, наверное, в порядке отображения проблемных мест в окне Page Speed, ибо это будут самые эффективные и самые не сложные в реализации шаги — что называется «дешево и сердито».

Поэтому я и занялся первым делом (ccs, js, изображения) в браузерах посетителей (т.е. вас, мои уважаемые читатели).

Да, да, с помощью настроек web сервера можно управлять поведением браузера посетителей. В этом случае первый сообщает второму время, в течении которого следует хранить в кэше статические объекты для того, чтобы не запрашивать их повторно с сервера.

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

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

Следующим эффективным шагом по увеличению скорости загрузки может быть объединение внешних файлов стилей CSS или скриптов JS. Читайте про то, и , с которыми я разобрался.

Но вот объединить внешние скрипты мне не удалось, наверное, в силу непонимания даже основ JavaScript. Правда у меня было всего два внешних файла со скриптами, поэтому потеря в скорости загрузки сайта будет не велика.

Но кроме объединения внешних стилей CSS и скриптов (это делается для уменьшения общего числа загружаемых объектов, что позволит уменьшить число http запросов к серверу), эти самые файлы стилей и скриптов можно будет очень эффективно сжать с помощью Gzip (фактически это тот же самый Zip, который вы активно используете на компьютере).

Сжать CSS и Js файлы с помощью Gzip можно в несколько раз, но еще больше уменьшить размер этих файлов можно за счет предварительной оптимизации их кода.

Итак, вам нужно будет скачать на свой компьютер все внешние Css и Js файлы, участвующие в загрузке страниц (после того, как вы осуществили их объединение это будет не сложно) и создать из каждого из них его архивную копию с расширением.gz. Сделать это можно с помощью бесплатной программы 7zip . Дальше давайте покажу на примере, ибо теоретизировать здесь бесполезно.

Возьмем для примера основной файл стилей моего блога style.css. После того, как я его упакую в Gzip с помощью программы 7zip, у меня появится архив style.css.gz.

Но т.к. некоторые браузеры не захотят подключать стилевой файл с расширением.gz, то мы удаляем у него окончание.gz и получаем опять в итоге style.css, но который уже фактически представляет из себя архив (пока еще не запутались?).

Но просто заменить оригинальный файл style.css на сервере (еще не сжатый в Gzip) только что нами созданным архивом, но имеющим по-прежнему название style.css, будет не достаточно.

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

Но назвать мы его должны будем уже иначе, чем style.css. Для этого можно его переименовать, например, таким образом: style.nogzip.css. Теперь на сервере в папке с темой оформления WordPress у меня будет лежать два файла стилевого оформления:

style.css — архив с отрезанным расширением.gz

style.nogzip.css — обычный не сжатый файл стилей, который нужно будет отдавать браузерам, которые не поддерживают сжатие

Данную операцию вам нужно будет проделать для всех внешних стилей и скриптов (Css и Js), которые загружаются вместе со страницами вашего ресурса. У меня их было всего лишь четыре: основной стилевой, в котором у меня также добавлены свойства некоторых плагинов WordPress, а еще файл скрипта из папки с темой оформления и два внешних скрипта от .

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

RewriteEngine On RewriteCond %{HTTP:Accept-encoding} !gzip RewriteCond %{HTTP_USER_AGENT} Konqueror RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 Header append Vary User-Agent Header set Content-Encoding: gzip Header set Cache-control: private Header unset Content-Encoding

Если вы при переименовании оригинальных файлов стилей и скриптов использовали их названия, отличные от style.nogzip.css, то и в соответствующей строке кода вам нужно будет заменить маску $1.nogzip.$2 на свою. В общем-то, вот и все.

Теперь сервер не будет каждый раз на лету сжимать Css и Js, а будет сразу же отправлять браузерам заранее сжатую вами копию, а в случае браузера, который не понимает Gzip — оригинальную версию файла вида подобного style.nogzip.css.

На лицо будет небольшое увеличение скорости загрузки сайта и снижение нагрузки вашего ресурса на хостинг. Вот только у меня через пару дней произошел конфуз. Видимо и вид админки WordPress резко изменился — отвалилось стилевое оформление.

Но проблема довольно быстро решилась проведением описанных выше манипуляций с используемым в админке файлом стилей. В моем случае это был colors-classic.css из папки:

/wp-admin/css

Дальше мне захотелось применить статическое Gzip сжатие для файлов Html, которые тоже сжимаются сервером налету, создавая дополнительную нагрузку. Тут я нашел решение довольно простое, применительно к WordPress. Дело в том, что у меня уже очень давно используется .

В его настройках имеется область «Compression», которая, как я поначалу думал, отвечает за компактное размещение кэшированных страниц на жестком диске хостинга. Мне показалось, что архивирование кэшированных страниц будет отъедать ненужное время у процессора и благополучно его отключил.

Но вот немного поискав информацию на тему Gzip сжатия Html страниц, я изменил свое мнение об этих настройках компрессии в плагине Hyper Cache.

Похоже, что поставив галочку в этом поле «Enable compression», мы тем самым активируем предварительное сжатие кэшированных страниц блога по алгоритму Gzip.

Утверждать это на сто процентов не берусь, но после активации компрессии в настройках Hyper Cache я наблюдаю уже в течении продолжительного времени снижение нагрузки на сервер. В общем похоже, что как и всегда — ларчик просто открывался.

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

Сам я эти компоненты еще не тестировал, но как только соберусь, то обязательно о них напишу. Пока же лишь приведу ссылки на эти компоненты для Джумлы: jFinalizer и WEBO Site SpeedUp .

Оптимизация графики и уменьшение количества запросов

Также очень существенное влияние на скорость загрузки может оказать оптимизация графики. Как я уже писал ранее, . Но это будет удобно только в случае небольшого их количества.

Лично я для пакетной оптимизации использовал , о котором уже довольно подробно писал. Можно также воспользоваться и другим очень популярным онлайн сервисом для сжатия фото без потери качества от — Smush.it. Но степень сжатия фото в PunyPNG мне показалась выше, возможно за счет использования более удачных скриптов.

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

В общем, потратив полчаса мне удалось сжать PNG изображения примерно на 7 процентов в среднем, а процентов на 5.

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

Ну и последним, а также одним из самых действенных способов ускорения, может быть уменьшение количества http запросов, которое будет формироваться при загрузке страниц вашего ресурса. Уменьшить их можно, снизив число объектов загружаемых вместе с веб страницей. Мы уже говорили в начале статьи об объединении внешних Css и Js файлов как раз для этой цели.

Но львиная доля запросов всегда уходит на подгрузку графики. Это могут быть фоновые изображения, которые были упомянуты в файле стилевого оформления, или же картинки, напрямую задаваемые в Html коде страницы.

Для уменьшения их количества нужно проанализировать, необходимо ли подгружать то или иное изображение вместе со страницей. Я таким образом избавился от пары десятков лишних http запросов. Те же фоновые картинки из состава шаблона, которые все же окажутся необходимыми для функционирования вашего ресурса, можно объединить в так называемые . В результате, вместо десятка запросов понадобится сделать только один.

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

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

Реализовать это в WordPress можно с помощью чудо плагина Really Static . Правда его версия еще не доросла до единички, но отзывы о его работы встречаются исключительно положительные. Фактически он является полным аналогом известного скрипта Maxsite Cache, который, например, использует Михаил Шакин на своем блоге.

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

Если кто-то уже имеет опыт работы с WordPress плагином Really Static, то буду очень благодарен, если оставите свой отзыв о нем в комментариях. Спасибо за внимание. Статья незаметно подошла к концу. Пора наводить на нее лоск и готовить к публикации.

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на ");">

Вам может быть интересно

Gzip сжатие для ускорения загрузки сайта - как его включить для Js, Html и Css с помощью файла.htaccess
Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу
Измерение и увеличение скорости сайта в GTmetrix, а так же настройка загрузки библиотеки jQuery с Google CDN
Как получить быстрый сайт - оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов
Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки

Здравствуйте, ребята!

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

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

В общем, в содержании по пунктам распишу все способы, а далее уже читайте и применяйте все на практике.

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

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

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

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

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

Только, что я проверил скорость загрузки одной своей статьи. По результатам 5ти проверок получил средний результат в 0,82 секунды.

Конечно, бывает сложно добиться маленького значения и это зависит от многих факторов:

• Количество контента на странице;
• Количество подгружаемых скриптов;
• Размер графики на странице и на сайте в целом;
• Количество плагинов.

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

Оптимизация графики

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

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

Одна фотография, сделанная на зеркальный фотоаппарат среднего качества, будет весить несколько мегабайт. Если загрузить такую фотографию на сайт, то посетитель при заходе на страницу будет ее всю скачивать. Представьте, сколько времени будет длиться загрузка страницы, если будет размещено 10 высокообъемных изображений.

Данному моменту уделяйте время, когда публикуете контент. Когда-то я писал статью о том, без потери качества. Материал будет вам очень кстати.

Относительно дизайна, то старайтесь использовать в нем меньше изображений. Можно сделать вполне вменяемый и органичный дизайн, использовав при этом CSS стили. Это даже к лучшему будет. Если вы посмотрите на очень популярные ресурсы, то заметите, что у них дизайн - это по сути белый фон с разделительными линиями. Это играет на руку очень сильно и убивает 2х зайцев:

Уменьшает время загрузки;

Повышает удобность потребления контента.

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

Кэширование

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

Чтобы сделать кэширование на сайте (для WordPress) нужно установить плагин Hyper Cache. Полную инструкцию читайте по . Все разжевал там.

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

Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.

Оптимизация загрузки скриптов

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

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

Чтобы подгрузить скрипты в самом конце загрузки страницы, их нужно разместить в самом низу кода страницы, то есть в подвале. На WordPress это реализовывается с помощью размещения в файле footer.php перед закрывающим тегом .

Также можно разместить скрипты в отдельном файле, а не в файле footer.php. А затем уже подгрузить этот файл в конце файла подвала. Это наилучший способ, как загружать скрипты на сайте.

Покажу на практике, как это все делать. Начну с видео-урока.

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

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

Чтобы разместить этот скрипт в отдельном файле, нам нужно взять его содержимое (красная рамка) и разместить в новом файле, который я создаю с помощью редактора Notepad. Выглядеть содержимое нового файла будет следующим образом.

Теперь сохраняем данный файл в формате.js и называем его удобным именем. Я назову "footer-scripts.js", чтобы четко понимать, что это файл скриптов, которые выводятся в футере сайта.

Теперь можно подгрузить этот файл на сайт, чтобы скрипты работали. Для этого нужно разместить строчку кода, в которой прописан путь к этому файлу. Разместить код нужно в файле footer.php перед закрывающим тегом /

Вот моя строка кода.

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

Путь к файлу в данной строке подходит к сайтам на WordPress. Если у вас сайт на другом движке или просто HTML станица, то путь придется изменить под себя.

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

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

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

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

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

Избавление от лишних запросов в коде шаблона

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

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

Теперь текстовый вариант.

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

Как видим, это php код. Если же посмотреть в исходный код (ctrl+u) любой страницы сайта, то увидим, что этого php кода уже нет, а будет HTML код с указанной кодировкой.

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

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

Также хочу обратить внимание, что имеется код на генерацию названия сайта. Заключается он, как правило, в теги . Если вы планируете изменять название ресурса, то либо не заменяйте этот код или же не забудьте потом в коде файла изменить название, так как после замены название будет выводиться из готовой строки с названием. Генерация имени сайта не будет происходить, так как php кода не будет. Учтите этот момент.

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

Отключение ревизий

Снова замучаю вас видео-уроком.

Ревизии - это автоматическое сохранение копий записей, которые делаются при создании записей в определенные интервалы времени.

На самом деле, вещь полезная, но иногда создает очень много мусора и нагружает базу данных. Я бы не сильно рекомендовал отключать данный функционал, так как иногда спасает. Может внезапно пропасть свет и что тогда? А, если будут копии записи, то вы сможете спокойно восстановить прогресс. Не раз такое бывало, знаю по собственному опыту.

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

В корне движка имеется папка WP-includes, в которой лежит файл default-constants.php. Необходимо открыть его, найти в нем следующее содержание.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 60); /** * @since 2.9.0 */if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 30); if (!defined("WP_POST_REVISIONS")) define("WP_POST_REVISIONS", true);

define ("AUTOSAVE_INTERVAL" , 60 ) ; * @since 2.9.0 define ("EMPTY_TRASH_DAYS" , 30 ) ; if (! defined ("WP_POST_REVISIONS" ) ) define ("WP_POST_REVISIONS" , true ) ;

На момент написания этой статьи все это находится, начиная с 277 строки. Весь этот код отвечает за сохранность наших записей. Состоит он из 3х частей, каждая из которых начинается на if.

Первая часть отвечает за интервал для автоматического создания ревизий. По умолчанию значение стоит в 60 секунд, то есть каждую минуту будет создаваться одна копия записи. Представьте, что статью вы пишите не один час. Можно данное значение увеличить, например до 10-20 минут. Данная настройка работает только при включенных ревизиях.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 600);

if (! defined ("AUTOSAVE_INTERVAL" ) ) define ("AUTOSAVE_INTERVAL" , 600 ) ;

Значение ставим в секундах.

Вторая часть отвечает за время хранения удаленных записей в корзине. Когда мы удаляем записи, то они попадают в корзину. По умолчанию, хранятся они там 30 дней, после чего происходит удаление. Если поставить значение 0, то записи в корзину попадать не будут, а сразу удаляются без возможности восстановления.

if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 0);

if (! defined ("EMPTY_TRASH_DAYS" ) ) define ("EMPTY_TRASH_DAYS" , 0 ) ;

Третья часть отвечает за работу ревизий. По умолчанию они включены. Если хотите отключить, то значение true необходимо изменить на false или поставить 0.

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

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

1. Android-приложение с MVP архитектурой

MVP с использованием .

2. Android-приложение с MVVM архитектурой

Этот репозиторий содержит приложение, которое реализует архитектуру MVVM с использованием Dagger2, GreenDao, RxJava2, Fast-Android-Networking и PlaceholderView .

3. Google I/O Android-приложение

Google I/O - это конференция разработчиков, которая проводится каждый год. На ней представлены сотни демонстраций технологий от разработчиков.

Этот проект - Android-приложение для конференции. Приложение поддерживает устройства под управлением Android 5.0+ и оптимизировано для телефонов и планшетов всех форм и размеров.

4. Чертежи архитектуры Google Android

Платформа Android обладает большой гибкостью, когда организует и архивирует приложение. Эта свобода может привести к приложениям с большими классами. Это может затруднить тестирование, поддержку и расширение.

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

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

5. Telegram

Приложение под Android, которое способно вдохновить своим дизайном, благодаря отличной реализации material design.

7. Wire

Это приложение чата полно картин, фильмов, GIF, музыки, эскизов и других форм мультимедиа. Также оно всегда обеспечивает безопасное сквозное шифрование.

8. Андроид-приложение ribot

Kickstarter - это глобальное сообщество, которое помогает воплощать творческие проекты в жизнь. Изучайте тысячи проектов в области искусства, дизайна, фильмов, игр, музыки и т. д.

10. PocketHub

GitHub отказался поддерживать приложение, поэтому оно было выпущено "в люди" и поддерживается как публичный проект. Сейчас общество активно работают над переизданием этого приложения в Play Маркет. Это приложение станет духовным преемником оригинального приложения.

11. Простое андроид-приложение с MVP

Очень простое приложение, показывающее, как реализовать архитектуру MVP.

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

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

1. Android-приложение с MVP архитектурой

MVP с использованием .

2. Android-приложение с MVVM архитектурой

Этот репозиторий содержит приложение, которое реализует архитектуру MVVM с использованием Dagger2, GreenDao, RxJava2, Fast-Android-Networking и PlaceholderView .

3. Google I/O Android-приложение

Google I/O - это конференция разработчиков, которая проводится каждый год. На ней представлены сотни демонстраций технологий от разработчиков.

Этот проект - Android-приложение для конференции. Приложение поддерживает устройства под управлением Android 5.0+ и оптимизировано для телефонов и планшетов всех форм и размеров.

4. Чертежи архитектуры Google Android

Платформа Android обладает большой гибкостью, когда организует и архивирует приложение. Эта свобода может привести к приложениям с большими классами. Это может затруднить тестирование, поддержку и расширение.

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

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

5. Telegram

Приложение под Android, которое способно вдохновить своим дизайном, благодаря отличной реализации material design.

7. Wire

Это приложение чата полно картин, фильмов, GIF, музыки, эскизов и других форм мультимедиа. Также оно всегда обеспечивает безопасное сквозное шифрование.

8. Андроид-приложение ribot

Kickstarter - это глобальное сообщество, которое помогает воплощать творческие проекты в жизнь. Изучайте тысячи проектов в области искусства, дизайна, фильмов, игр, музыки и т. д.

10. PocketHub

GitHub отказался поддерживать приложение, поэтому оно было выпущено "в люди" и поддерживается как публичный проект. Сейчас общество активно работают над переизданием этого приложения в Play Маркет. Это приложение станет духовным преемником оригинального приложения.

11. Простое андроид-приложение с MVP

Очень простое приложение, показывающее, как реализовать архитектуру MVP.