To score AA in GTmetrix is not an easy task, but with a bit of know how and the right plugins, it’s definitely doable. As you can see from the post image, the proof is in the pudding.
1. Choose a reputable theme. Not all themes are created equal, so choose wisely. I recommend Divi from Elegant Themes. It has no plugin dependencies and ships with an awesome drag-and-drop builder, and lots lots more. Trust me, I’ve worked with a lot of other premium themes and none compare to Divi.
2. Images. There are many pieces to creating an awesome website and images are one of the biggest (visually anyone). But unfortunately, this asset is widely under-checked. All to often, I see beginners upload images that are 4000px by 4000px to a 600px wide container. A good habit is to figure out the maximum width an image will reach in a single column (e.g., tablet) and resize the image according to that. In this scenario, I would resize my image to 800px since a tablet’s break point is usually 768px wide. Another thing to watch for is file type. If transparency is not required, use jpg. It has a much smaller foot print than png.
3. Edit .htaccess file. This is by far the easiest and most effective thing you can do to improve your score. Simply head over to your favorite FTP client, connect to your site and locate your .htaccess file in the root folder (Note: Before editing this file, download a copy in case my code snippet breaks your site). Now open the file and paste the following code and click “OK” to overwrite. Watch my video below to see the before and after effect.
4. Replace raster with vector. I believe vectors (Scalable Vector Graphics) will become the standard graphic file for websites in the near future. As of now, WordPress does not natively support svg due security vulnerabilities, but can be enabled with this plugin. The biggest benefit to using vector is file size and quality (see below).
As you can see, the jpg has a way bigger file size than the svg, and the quality of the svg is far more superior than the jpg (note: I outputted both files in the exact same dimensions).
5. Leverage Browser Caching. There are many great caching plugins out there, but my experience favors “WP Fastest Cache“. Simply install the plugin and check all the boxes that aren’t grayed out. I highly recommend upgrading to the premium version ($40), IMO the extra options are well worth the upgrade. And best of all, you’ll only pay a one-time fee and have lifetime updates.
Also note, this plugin tackles other GTmetrix suggestions, such as CSS & JS minification and Gzip compression.
6. Use a Content Delivery Network (CDN). Lastly, leveraging a CDN will greatly impact your website’s speed by lowering latency (the annoying delay that occurs from the moment a user requests a web page to the moment it actually appears). CDNs work by minimizing the distance between the user and your website’s server by delivering a cached version of the web pages through multiple locations. However, this service is not free and the free ones IMO don’t work as well as there premium counter parts. I’ve tried several, and would highly recommend Keycdn.
And that about wraps it folks. I’m confident my suggestions will get you that AA score (I used these same suggestions on this site). But just a word of caution if you don’t get the AA, don’t get obsessed! If your website loads within 3 seconds, but your score is in the “Cs” and “Ds”, don’t waste more calories on it. GTmetrix is simply a guide, not a definitive authority on page optimization. My advice… do your best and move on.