Optimize your website and webserver

by Jakub in Webdevelopment 01.03.2015

Your website is slow. Don\'t believe me? OK. Go to GTMetrix and check.If you got two As then sorry and all our respect goes to you, thank you for maintaining fast web. Otherwise please read on.We all love fast websites, although it is not so easy to keep your website fast. Modern websites deploy a lot of JS/JQuery, dozens of CSS files, images, download additional fonts and so on.Does that mean that we should get used to slow websites? Not at all.Take a look at keios.eu website. It uses over 20 javascript files, plenty of css, open sans font from google fonts, multiple PHP plugins and so on. Shortly after deployment its loading time was 8 to 11 seconds on 20 mbit bandwith. Right now it\'s about 2 seconds, all thanks to the tuning it went trough.Let me explain that in more details---####Use NGINX for productionNginx is an event-based webserver and it does great with serving static files (doesn\'t spawn new process on each request) and consumes a lot less memory than apache.It can support ten thousands of concurrent connections, still taking few megabytes of RAM. This graphic is a year old, but tells a lot about how fast nginx can be---####Compile NGINX with PageSpeed moduleGoogle did something really great for the Internet speed. It created PageSpeed. Aside from detailed analysis of your website, it also provides modules for Apache and Nginx, that allows to boost the website speed pretty much. Here are details and deployment instructionsNote: By default it will install in /usr/local/nginx, you should be aware of that when setting it as a service.Note 2: Google doesn\'t say that, but if you want SSL support, you should configure it with ./configure --add-module=$HOME/ngx_pagespeed-release-${NPS_VERSION}-beta --with-http_ssl_module---####Use HHVM instead of PHP-FPM or upgrade PHPJust as Google, Facebook did something great too - they invented HipHop for PHP. Usually people install PHP5 + PHP5-FPM and use it to deploy their PHP. Aside from not having any logs in case of errors (infamous php white page - hhvm shows error in log every time white page happens), it can also be quite slow. So, while we all wait for PHP7, you should check HHVM and use it for your PHP apps. If you cannot use HHVM (like on 32bit machines), at least upgrade your PHP to 5.6 version. It\'s important. Another graphic will probably explain it best (although it doesn\'t include hhvm 3.5 and php 5.6, but you can still see that upgrade is worth it).---####GZIP everything!Please do not offer uncompressed content. We have amazing compression engines right now and they are really easy to use. Just make sure you have following lines uncommented in your nginx.conf (first three are most important). gzip on; gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; ---####Minimize your resourcesDevelopment finished? Ready for production? DON\'T use JS or CSS which is not minified. Just why would you do that. There is a really easy method to get all of your resources minified with minify npm package, on debian you would do it like that: apt-get install nodejs npm npm install -g minify cd [javascript directory of your website] for f in .js; do short=${f%.js}; minify $f $short.min.js; done cd [css directory of your website] for f in .css; do short=${f%.css}; minify $f $short.min.css; doneYou will get a bunch or file.min.js and file.min.css that you should use on your website in place of normal ones. That\'s good for you and for everybody.---####Combine your resourcesEach script or css loading line is a request to server. You don\'t need so much of them. If you took my advise and compiled nginx with page speed, you are home and you can simply add pagespeed EnableFilters combine_css; pagespeed EnableFilters combine_javascript; to the server { } section of your nginx config. If you don\'t have pagespeed module, you can use other tools like YUI compressor or find alternative in this stackoverflow thread.---####Take good care of your imagesFirst of all, they are probably too big for the website. Scale them. Even if they are not, they probably can be tuned with OptiPNG or JPEGOptim that we recommended before.---####Use visitor\'s cacheCache is to be used. It makes Internet fast. Be sure to give maximum expiration date to cached resources, in nginx you can do it by adding location ~* ^.+.(css|js|png|jpg|gif|ttf|woff|woff2)$ { access_log off; expires max; } to server { } section of your config.---####Use server\'s cacheThis is important if you deploy web applications. Use Redis, use memcached, use anything but use it.---####Use cookie free source or CDNIf you have access to fast CDN - use it as a source of your static content. If you don\'t, you may want to use separate domain for your resources to make them cookie free. Google uses gstatic.google.com, Yahoo uses yimg.yahoo.com, we use static.keios.eu. ---####Test and tune your website further!There are more things you can do, for example combine images into css sprites or specify image dimensions for faster rendering. I don\'t want to go into so much detail in this post, you can find out more hints by making tests on services like gtmetrix or google pagespeed. Still, if you did everything mentioned here, your website probably has A page speed score by now.You can also go easy and just get our services to make or tune your website.Nevertheless, always make sure that your website is as fast as it can. Fast Internet is something that we all went.