/web pər'fôrməns/

"the art and science of keeping everyone's internet
experience as smooth as can be, 24/7"

What Is It?

Web Performance is a practice that ensures that users navigate your site exactly how you imagined it when you first created it. A site that is well-optimized will have unnoticeable load times. Ideally, you should never have to see any of the loading bars beneath each of these sections. See our next section to get some tips on how to increase your site's performance.

Why Bother?

A site optimized for strong web performance will provide the greatest user experience possible. This may not be that important for a small HTML site, but for sites that use lots of JavaScript or other, heavier languages, it is essential to perform at peak quality.

How To Improve Your Site's Performance

Optimize Images

Because high-resolution image files are very large, they can take a long time to load in your browser. For mobile users, optimized images are even more important, as large photos will unnecessarily eat away at your monthly data plan, costing you a lot of money. Often times, full-size, high-resolution images are uploaded to the server, only to be scaled down by CSS on the client-side. If we instead provide a smaller version to request, we will see faster load times, and can reduce the amount of styling that must be done.

Leverage Broswer Cache

When a webpage loads for the first time, information about images, HTML tags, and other web objects are stored locally to increase the speed of the page when visited a second time. This process is referred to as caching. By utilizing this, we can rapidly reduce load times of heavy pages as we do not need to call to the server, but rather just pull a file from our local hard drive.

Scripts Last

Should you need to include your JavaScript in your index files, rather than as their own document, they should be placed at the end of the document. A browser can make no more than 2 HTTP requests at the same time, so it is essential that we load the visual components of our site first. As you probably know, JavaScript primarily serves to adds functionally to a website. With this in mind it makes more sense to load our HTML and CSS first, so that our user can at least see the page.

How To Implement These Techniques

Optimized Images

  1. Open image in PhotoShop
  2. "File" > "Save For Web"
  3. Choose appropriate image width
  4. "Save As"

Leverage Broswer Cache

  1. Navigate to your ".htaccess" file
  2. Add the following code:
    • <IfModule mod_expires.c>
    • ExpiresActive On

    • // Insert all necessary headers here

    • ExpiresDefault "access 1 month"
    • </IfModule>
  3. For images, add:
    • ExpiresByType image/jpg "access 1 year"
    • ExpiresByType image/jpeg "access 1 year"
    • ExpiresByType image/gif "access 1 year"
    • ExpiresByType image/gif "access 1 year"
  4. For source files, add:
    • ExpiresByType text/css "access 1 month"
    • ExpiresByType text/html "access 1 month"
  5. To leverage browser cache for other file types, run a quick Google search

Scripts Last

  1. Remove all <script> sections from your header
  2. If this code applies to all pages, place it in a seperate file for all of your JavaScript
  3. If the code is only applicable to this page, place it just before your </body> tag

Performance Monitoring Tools