Just recently, I was assigned to a job to optimize the performance and loading speed of a microsite. As a developer for many years, I know a few tricks up my sleeve.
The easier thing to do is to reduce the number of HTTP requests. This can be done through front-end development for example – combined files, CSS Sprite. For other techniques you will need some knowledge in server configuration such as gzip, deflat and caching.
However, to fully optimize a website, you need to start from choosing a good web hosting, getting the right web server installed, HTTP caching, web server configuration, front-end optimization and lastly you can use CDN to speed up your website by storing your website content across a few geographically dispersed servers.
Let’s start with web hosting.
Choose A Good Web Hosting
You can choose a dedicated server or shared hosting environment for your website. I have been using both. For shared hosting, it means you’re sharing computing resources among other websites. You don’t have a full control on the server but the price is reasonable enough to justify all the caveats.
In the other hand, with dedicated server, it is more expensive but you get to use all the computing resources and full control on the server. Web hosting has a huge impact on the speed of your website.
You need to consider its robustness and location of the server, the response time between the server and your target audiences. Therefore, if you want your website to quickly, choosing the right web hosting is a good start.
Links
Use The Correct Web Server
Depend on which Server-Side languages you’re using, our focus here is PHP. The most commonly used web server online is Apache, it has been around for decades and powers more websites than any other web servers. But now we have another alternative – Nginx.
Apache is like Microsoft Word, it has a million options but you only need six. Nginx does those six things, and it does five of them 50 times faster than Apache.
The most distinctive difference between Apache and Nginx is – Apache is a process-based server, while nginx is an event-based web server. Hence, nginx is faster at serving static files and consumes much less memory for concurrent requests because Nhinx is event-based it doesn’t need to spawn new processes or threads for each request.
In order to speed up your website, web server is one of the core thing you need to take into consideration. Does your website have a lot of static content? How many visitors do you expect? Scalability etc.
Links
- Apache vs Nginx
- Apache or Nginx? Go with both.
- Nginx vs Apache – Are there any actual usage comparisons and statistcs out there?
- Nginx Vs Apache: Nginx Basic Architecture and Scalability
HTTP Caching
In general, there are two types of caching – Browser caching and server caching.
Browser caching requires setting of file headers correctly. For example, images, CSS and Javascript files that don’t change that often will be cached by browsers. Next time when the user visit the website again, those files won’t be requested.
Server caching is another way to speed up the time it takes to fetch web content and serve it to your visitors quickly. Previously fetched resources are being stored as static content in the server. If there’s user who requesting the same resources, that piece of content will be reused.
If you’re using PHP, most of the frameworks come with caching feature. CakePHP, Laravel, Drupal, all of them have its built-in caching mechanism. WordPress has a list of plugins that cache its content too.
Links
- Speed up sites with htaccess caching
- Optimizing content efficiency – HTTP caching
- A Beginner’s guide to HTTP Cache headers
- Nginx Content Caching
- Varnish cache
Gzip Components
You can speed up content loading time by using compression. There are two commonly used compression options – deflate and gzip. Deflate is easier to set up and gzip is the most popular and effective compression method at this time. It can reduce around 70% of the response size. We usually gzip text based content such as scripts, css, xml, json and HTML. Images and PDF should not be gzip because they are already compressed, further gzip not only wastes processing time and might increase its file size too.
Links
- How to optimize your site with gzip compression
- Optimizing encoding and transfer size of text-based assets
Minimize HTTP Requests
This is one of the keys for faster page load – reduce HTTP requests. Here is the technique to deliver rich page design and also fast response time:
Combined files are a way to reduce HTTP requests. When we build a website, it usually involves quite a few of Javascript plugins and many CSS files. To reduce HTTP requests, we can combined all of them into a single javascript file. Same thing can be applied to CSS stylesheet files too.
CSS Sprites is quite a common technique nowadays to reduce HTTP requests for images. We can combine many images into a single image and use background-image and background-position to display them in frontend. Learn how to create CSS Sprite.
Inline images is an emerging technique. It uses data and base64 string to embed image into actual page. No doubt, this will increase your HTML document or CSS file size, but it’s a way to reduce HTTP requests. Only support by modern browsers. Learn how to embed inline images.
Links
Stylesheet at the Top, Scripts at the Bottom
Moving stylesheet to the top of the page does makes pages loads faster. The truth is – it doesn’t, but it just giving an impression that the page seems to be loading faster than those who put it at the bottom. If you put it at the bottom, in some old browsers (*ahem*, IE), you will get a blank screen. The page is totally blank until the stylesheet at the bottom is downloaded. However, if you put it at the top, it will allow progressive rendering in many browsers. Instead of loading the content first, users are given visual feedback and understand that the page is loading.
Also, try to move scripts to the bottom of the HTML document if you can. Script blocks parallel downloads. Otherwise, you can use the-not-so-well-supported DEFER attribute in script tag.
Use Content Delivery Network
The distance of your server and the users has an impact on response time. If you can afford CDN services, you can deploying your content across multiple geographically dispersed servers. When user download content from your server, it will be assigned to a server with the minimun network hops or the server with the quickest response time.
Does it mean I need to purchase multiple geographically dispersed servers? Yes and no. Yes, if you’re rich enough :), No, because there are a few affordable CDN services such as Akamai Technologies and Amazon CDN.