At work, I get asked about content delivery networks (CDNs) and how they fit into the performance arsenals you have to deploy to a website. This article is as much help to me like anyone else and to have my answers all in an article that I can reference and share with others.
To get the best performance improvements, you need to combine front-end optimization (FEO), content delivery network (CDN), application delivery controller (ADC), and in-house engineering.
CDN
CDNs address the performance of bringing resources closer to users 0 shortening server round trips and, as a result, making pages load faster. FEO tackles performance at the front end so that pages render more efficiently in the browser.
A CDN solves the problem with improving global availability and reducing bandwidth, the main problem the CDN address is latency: the amount of time it takes for the host server to receive, process, and deliver on a request for a page resource (images, CSS files, etc.). Latency depends largely on how far away the user is from the server, and it’s compounded by the number of resources a web page contains.
Locations
For example, if all your resources are hosted in Amsterdam, and a user is visiting your page in Toronto, then each request has to make a long round trip from Toronto to Amsterdam and back to Toronto. If your web page contains 100 objects (which is at the low end of normal), then your user’s browser has to make 100 individual requests to your server in order to retrieve those objects.
Typically, latency is in the 75-140ms range, but it can be significantly higher, especially for mobile users accessing a site over a 3G network. This can easily add up to 2 or 3 seconds of load time, which is a big deal when you consider that this is just one factor among many that can slow down your pages.
CDN Cache
A CDN caches static resources in distributed servers across a region or worldwide, thereby bringing resources closer to users and reducing round trip time. A CDN is not necessarily for every site. For example, if you’re hosting locally and if your users are also primarily local, a CDN won’t help you much.
A CDN is not a standalone performance solution. The main performance pain is server-side processing. Your CDN can’t help you with those.
With a CDN you get nearly 100% availability, even during massive power outages, hardware issues, and network problems. The basis for this guarantee is the fact that CDNs have automatic mechanisms that sense server availability, with instant user redirection if a server (or servers) goes down.
Application Delivery Controller
An application delivery controller (ADC) is a computer network device in a datacenter, often part of an application delivery network (ADN), that helps perform common tasks such as those done by web sites to remove a load from the web servers themselves. Many also provide load balancing.
There are other performance tricks that we can try out. I suggest we start with front-end optimization (FEO). FEO tackles performance at the front end so that pages render more efficiently in the browser. FEO is image optimization, keep-alive, and compression.
There is room for improvement adding compression, expires headers is a performance best practice that you should be taking advantage of.
http/2
One of the newer techniques is to add htttp/2 support to the server, which will give an improvement in loading static CSS/js files. I wrote this article posted on my blog about http/2 – https://torbjornzetterlund.com/will-http2-speed-wordpress-site/
Another option is to add varnish, that will offload the server itself and serve static pages.
First, get started with FEO – optimization, You can test and optimize your site by using some optimization tools, here is a list of tools I use from time to time.
intodns
IntoDNS checks the health and configuration and provides a DNS report and mail servers report. And provides suggestions to fix and improve them.
Qualys SSL Labs
Free online service performs a deep analysis of the configuration of any SSL web server on the public Internet
GTmetrix
GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.
WEBPAGETEST
Test a website’s performance, speed test your website from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more.
pingdom tools
test the load time of that page, analyze it and find bottlenecks.
Safe Browsing Test
Google’s Safe Browsing examines billions of URLs per day looking for unsafe websites.
Google Mobile-Friendly Test
This test will analyze a URL and report if the page has a mobile-friendly design.
Google Pagespeed Insights
Make your web pages fast on all devices.
Handson tricks
Leverage browser caching you can increase website speed considerably.
Getting rid of ETag
First of all, we need to disable the ETag header since we are going to use Expires. ETag technology is known as slow and problematic – even YSlow complains about it.
Add to .htaccess: (located at blog’s root location)
Header unset Pragma FileETag None Header unset ETag
Another must-read:
Why browser caching?
If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, CSS, javascript, pdf, swf etc. from local disks rather than over the network.
So if you configure your webserver to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster. Add below to .htaccess
## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" ## EXPIRES CACHING ##
What this does is adding far-future expires header (make sure mod_expires is loaded in your apache config if you have problems) to your static content (images, js, CSS, etc).
Compress Components
Compressing things always end up making them smaller and load faster, so implementing some form of compression on your components is a must. This optimization step might not work for you if your server does not have either mod_deflate or installed as part of Apache.
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
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.*
WordPress Optimization
There are a great article 22 Tips To Speed Up WordPress Site Performance, the article talks about a 22-step process that you could use to improve the loading speed of your blog and increased organic traffic – all within 30 days!
Conclusion
Do you have any suggestions to add to this article?
You can contact me directly or by commenting below.
Leave a Reply