Ускоряем загрузку сайта

Любой веб-сайт с годами становится все больше и больше. Не смотря на рост скорости интернета, сайт все равно грузится все дольше и дольше. Что же делать?

Начнем пожалуй с того, что попроще. Давайте сожмем код, а точнее CSS и JavaScript. Для этих целей можно использовать множество инструментов.

Вариант первый – онлайн:

Вариант второй – grunt.

Все просто, как два пальца:

npm install -g grunt

В директории с проектом создаем файл package.json. В нем пишем обязательно в зависимостях

"grunt": "latest",
"grunt-contrib-uglify": "~0.1.1",
"grunt-recess": "latest"

Затем создаем файл Gruntfile.js, в котором пишем:

uglify: {
    dist: {
        files: {
            'app.min.js': 'app.js'
        }
    }
},

recess: {
    minify: {
        options: {
            compile: true,
            compress: true
        },
        files: {
            "styles.min.css": ["styles.css"]
        }
    }
}

Подробнее про grunt, grunt uglify, grunt recess.

Вариант третий – редакторы кода.

Для большинства редакторов кода существуют плагин, аля HTML-CSS-JS Minifier (в Sublime Text).

Неплохо было бы поджать картинки перед публикацией на сайте. Если вдруг кажется что Save for web в фотошопе достаточно – то это глубочайшее заблуждение.

Для более-менее достойного сжатия изображений рекомендую использовать:

imageoptim для Mac OS

Riot для Windows

Trimage для Linux, Mac OS, Windows

Для ускорения загрузки сайта обязательным является кэширование данных и gzip-компрессию. Для разных серверов это делается по разному. Приведу пример для сервера на Apache.

Открываем .htaccess (если его нет, то создаем в корне сайта) и пишем туда для gzip:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

А для кэша:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

Всякого рода параметры можно спокойно менять.

Эти маленькие хитрости несколько увеличат скорость загрузки вашего сайта/веб-аппа.

Ускоряем загрузку сайта

Комментарии