Part 2: How to Make Your Law Firm’s Website Load Faster

This post is the second in a series on tips for optimizing your law firm’s website speed and performance.

As a refresher, Google’s Page Speed Insight Rules are something you need to understand and pay attention to. Begin by plugging your URL into their PageSpeed Insights, and take a look at your current breakdown. You’ll notice two scores – one for Page Speed and one for Optimization. If what you find shows your site has room for improvement, check out these tips to start speeding up your site.

In the last post we covered some of the ways to get started, including compression, effectively using caching rules, and minifying. Today we’re going to focus on what you can do with images and other visible content.

Optimize your images.

Images are critical to website management. Accounting for 60 percent of your web page size, they have a serious impact on how quickly your site can load. If you optimize images, you can effectively reduce the file sizes without impacting the visuals. Here’s some ways to combat image issues:

1. 1. Always use relative sizes for images. Leverage the “picture” element when you want to specify unique images depending on device characteristics. For those who have a thorough understanding of web development, use a srcset attribute and the x descriptor in the img element to inform browsers when to use specific images.
   2. When possible, use CSS3 to replace images.
   3. Use vector formats when you can.
   4. Review and eliminate any unnecessary image resources.
   5. Test out different quality settings to find the optimum one. There is no single best format for all images, each combination of particular compressor and image contents produces a unique output.
   6. Cache any image assets.
   7. Using the picture element, specify different images based on device qualities. You can specify for device size, resolution, orientation, and more.
   8. Resize images on the server and serve only images scaled to their correct display size.

Improve CSS delivery

Browsers have several steps to follow when they render a page, and processing CSS is part of that process. If your CSS is loaded with render-blocking external stylesheets, the process will require multiple round trips which will delay the time to first render. Google recommends Inlining small CSS directly into the HTML document to eliminate small external CSS resources.

Highlight Visible Content

What we mean by this, is simply to prioritize the content that’s visible above the fold. If that content exceeds the initial congestion window (typically 14.6kB compressed), then loading it will take multiple round trips, thereby slowing the process. The fix is simple: reduce the size of any above-the-fold content to no more than 14kB compressed.

Remove any blocking JavaScript

Google recommends removing all blocking JavaScript, especially external scripts, in above-the-fold content because the time it takes to parse it can add seconds to the rendering process. If you need scripts to render page content, they should be inlined to avoid extra network requests, and should be as small as possible. Non-critical scripts should be made asynchronous and you will want to defer them until after the first render.

This blog captures some of the more technical tips our team uses to increase site speed and performance. We know not every law firm or legal group has a developer on staff to help address these issues and make these improvements. If you are interested in optimizing your law firm’s website, reach out to us. We can help – or at least point you in the right direction!