Introduction

When it comes to optimizing your website and reducing overall load times, there are many options available to help resolve that. Load times are important to keep in mind when building large scale web applications and even smaller websites. Even small delays could potentially lead to a substantial loss in traffic or unhappy users. Luckily, there have been many performance upgrades to modern browsers like Chrome, Firefox, etc. Technology is always improving but that doesn't mean you should rely on this soley. Start by making these few small changes to your website/application to help reduce overall page load times. \n\n# Cache\nEnabling Cache is a necessity when building your website whether it is a single page application or just a basic static page. Caching is a way for the browser to store your website's assests (images, css, html, etc.) in the user's physical hard drive so that it won't have to reload those assets from your own server. Not only does this help reduce overall page speed, but it also reduces the number of network requests and bandwidth. When there is a minimal amount of requests going from your server to your users, the website will take less time to load. \n\n## Apache\nOn Apache you can enable file caching by modifying your `.htaccess` file which is usually located in your project's root directory. Modify your `.htaccess` file to include the follow: \n\n```\n## EXPIRES CACHING ##\n\n ExpiresActive On\n ExpiresByType image/jpg "access 1 year"\n ExpiresByType image/jpeg "access 1 year"\n ExpiresByType image/gif "access 1 year"\n ExpiresByType image/png "access 1 year"\n ExpiresByType text/css "access 1 month"\n ExpiresByType text/html "access 1 month"\n ExpiresByType application/pdf "access 1 month"\n ExpiresByType text/x-javascript "access 1 month"\n ExpiresByType application/x-shockwave-flash "access 1 month"\n ExpiresByType image/x-icon "access 1 year"\n ExpiresDefault "access 1 month"\n\n## EXPIRES CACHING ##\n```\n\nPlease keep in mind that if you make changes to your website, your changes may not be seen immediately by your visitors. This is because your visitors will see their cached version and not the live one. You can adjust the amount of time the file will be cached by modifying the code above from "access 1 year" to something shorter that fits your needs. \n\n# Use a Content Delivery Network\nA Content Delivery Network or CDN is a way to distribute your website assets like images and static files through multiple servers. Depending on the location of the website visitor, a closer server location may provide the quickest response. This is most commonly used for serving website images much faster. Less network requests also means less bandwidth on your server, and depending on which provider you choose can save you a lot of time and money. \n\nWhen it comes choosing a CDN, there are many options available. Many popular CDNs include Amazon CloudFront, CloudFlare, MaxCDN and Cloudinary. My personal favorite is Cloudinary since they provide storage for up to 75,000 images for free and 5 Gb of monthly bandwidth which is perfectly fine for a small website or blog. They also provide the ability for image transformations which include cropping images, adding overlay text and even facial recognition! \n\n# Minify your stuff!\nExtra white space, tab indentations, and even line breaks can cause the size of your files to increase even if you don't realize. It seems natural to just add indentations or spaces without assuming that it would affect performance in any way. Although the effects of this aren't huge, when it comes to larger applications it is a important to minify your assets like JS and CSS files. The leaner you can make your production code the better the performance you will see. There are many available tools to help you achieve this but my favorite to use is Gulp which helps create automation in your development environment. To get started with Gulp simply run the following (Please note that this will require NodeJS to be installed on your development environment beforehand):\n```\nnpm install gulp-cli -g\nnpm install gulp --save-dev\n```\nOnce you have installed gulp you will also need to install certain plugins to help minify your CSS and JavaScript code, for this example we will install `gulp-uglify` and `gulp-uglify-css`:\n```\nnpm install gulp-uglify --save-dev \nnpm install gulp-uglify-css --save-dev\nnpm install concat --save-dev\n```\nOnce those modules are installed we can then create a file and call it `gulpfile.js` which is what Gulp will look for when it runs. This file will contain all of our code that will be executed automatically to minify our assets. \n```javascript\n// gulpfile.js\nvar gulp = require('gulp');\nvar uglify = require('gulp-uglify');\nvar uglifycss = require('gulp-uglifycss');\nvar concat = require('concat');\n\nvar js_files = ['main.js'];\nvar css_files = ['main.css'];\n\ngulp.task('core-js', function() {\n return gulp.src(js_files)\n .pipe(concat('main.min.js'))\n .pipe(ngAnnotate())\n .pipe(uglify())\n .pipe(gulp.dest('dist/js'));\n});\ngulp.task('core-css', function() {\n return gulp.src(css_files)\n .pipe(concat('main.min.css'))\n .pipe(uglifycss())\n .pipe(gulp.dest('dist/css'));\n});\n```\n\nOnce you have created your `gulpfile.js`, you include your project source files by modifying the arrays called `js_files` and `css_files`. You can then run script this by typing the following command: \n\n```\ngulp core-js && gulp core-css\n```\n\nThis will run both tasks defined in the gulpfile and concatenate and minify all of your assets into a folder called `dist`. \n\n# Enable Compression\nEnabling compression on your website can help reduce the number of bytes that are sent over the network. GZIP compression is an effective method of compressing files and making them smaller which load faster for your website. \n## Apache\nYou can enable GZIP compression via the .htaccess file. Append the following to your .htaccess to allow for your website to compress files:\n```\n\n mod_gzip_on Yes\n mod_gzip_dechunk Yes\n mod_gzip_item_include file .(html?|txt|css|js|php|pl)$\n mod_gzip_item_include handler ^cgi-script$\n mod_gzip_item_include mime ^text/.\n mod_gzip_item_include mime ^application/x-javascript.\n mod_gzip_item_exclude mime ^image/.*\n mod_gzip_item_exclude rspheader ^Content-Encoding:.gzip.\n\n```\n\nTo check if gzip compression is working on your website you can check this gzip compression tool available online. \n\n# Monitor Network Traffic\nMonitoring the network traffic on your website is important to keep in mind for increasing your website's performance. If you are using Chrome (which you probably should) then you can open the Developer Tools by right clicking anywhere on the page and selecting Inspect Element. Once you have the Developer Tools open you can click on the Network tab to see all outgoing network requests. Initially you won't see anything populate but if you reload your page you will begin to see a few requests. It's important to monitor how large your files can be to see whether you need to reduce their size by one of the methods described above or whether there are any unnecessary files loaded.\n \n\n