Site speed is one of the strongest ranking signals under the technical SEO umbrella. The rate at which your pages fully load on browsers is a hallmark of solid performance which Google likes to reward in the sites it indexes.
We recently deployed a pilot version of our new property Mediko.Ph, a medical information resource built on WordPress and written in the Filipino language. Other than basic on-page and technical SEO, we haven’t done much yet to help the site rank well on Google. In fact, we haven’t built backlinks to the site as of today, which means it has to rely on other ranking signals to gain a bit of search visibility at launch.
From the beginning, we identified site speed as one of our top priorities when we develop the site. As it turns out, achieving a balance between building a technically sound, aesthetically pleasing and fast-loading website wasn’t as hard as some web design experts make it sound. On our first try, we got this score on PageSpeed Insights for the site’s desktop version:
We didn’t quite get a perfect score on the mobile version, but we’re still rated as “Good” by PageSpeed Insights:
Disclaimer: these scores tend to vary slightly depending on where you are or what time of the day it is. For the most part, however, the site speed scores across mobile and desktop devices are at pretty high levels and realistically, that’s all you really need.
So how did we achieve these site speed scores? We followed several web development and design principles that helped us reduce file sizes, eliminate code bloat, and keep the code clean. Specifically:
Use a Light Theme or Build Your Own
Many web designers like using pre-made WordPress themes for a variety of reasons. Some use them to build professional-looking websites without knowing how to code while others use them to achieve the look and feel that they desire for a project. Others like using themes to cut down on web development times, while others use themes to take advantage of built-in features.
While all of those are valid reasons to use a pre-made theme, you have to be very careful when selecting one for your website. Some themes might not have been optimized by their developers and as such, will drag down your page load speeds due to the following flaws:
- Poor Coding
- Large file sizes
- Unused Scripts
- Unused features
- Excessive DOM (document object model) Size
For our part, we built our own theme from scratch to avoid all of these problems. While the theme is very simple, it does everything that we need it to do. We decided to stay away from unnecessary frills that we won’t end up using all that much. We ended up with a theme that simply delivers text, image and video content in a quick and efficient manner.
If you really want to use a theme, you can still achieve good site speed scores. Just make sure to get one from reputable vendors such as WooThemes, Theme Forest, StudioPress and a few others.
Minimize Third-Party Asset Usage
Third-party assets refer to code that did not come with WordPress by default and you did not introduce to the CMS yourself. These include plugins, fonts, JavaScript, stylesheets and more. As much as possible, try to minimize their use as they can add unnecessary code to your webpages. Make it a rule of thumb to introduce third-party assets only when there’s a clear and definite use for each one.
WordPress comes with hundreds of thousands of plugins which do all sorts of things for you. However, you only really need a handful to run a good-looking and well-optimized website. When trying to boost your load times, go to your website’s backend and check what plugins are installed. Identify the ones that you can do without and delete them. If any plugins perform the same functions, retain only one.
For the assets that you end up retaining, try to load their code after your page has primarily finished loading. It would also help to localize assets such as fonts, stylesheets, JS and more to support caching. if you have third-party scripts, add `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins.
Enable Caching
Caching refers to the storage of web documents such as HTML and images by browsers. Essentially, these static assets are saved locally to the user’s computer so they wouldn’t have to be loaded again in succeeding visits. This results in much faster load times and better user experience for visitors.
This is something that Google often recommends in its PageSpeed Insights tool and we decided to make use of it from the very beginning. A long cache lifetime can speed up repeat visits to your pages, and that’s exactly what we implemented in Mediko.Ph.
Enable Lazy Load on Static Assets
Aside from enabling caching on static assets, another measure that we implemented was Lazy Load. This basically means that off-screen images, videos, iframes, and PDFs won’t load at the same time as high-priority elements situated in the page’s above-the-fold area would. Applying this setup allows the above-the-fold elements of your pages to load fast through sheer prioritization. As the user consumes the above-the-fold content, off-screen assets can start loading out of sight.
You can enable Lazy Load using varius WordPress plugins. Some themes have this functionality built in. You can also enable Lazy Load using your own code, but we felt it was best to use a plugin on this one.
Minify Your HTML, CSS and JavaScript
Minification pertains to the process of cleaning up your webpage’s code by removing unnecessary elements such as code comments, redundancies, and unused data. It also involves using shorter variable and function names to keep your page source tight and neat.
Minifying your pages’ components can reduce network payload sizes and in turn improve load speeds on browsers. You can minify your code manually, but really, who would want to do that for each page of a website? We certainly didn’t so we used a WordPress plugin called AutoOptimize. This extension basically allows us to instantly minify a WordPress site’s CSS, HTML and JS with just a few clicks. This is particularly handy for both novice webmasters and experienced web developers alike.
Enable Text Compression
Compressing text assets is the process of reducing the number of bytes used in network responses. While this may seem like a trivial matter, the number of bytes that browsers won’t have to load from your pages can quickly add up. This can relieve your servers of some serious burden and each page will load faster just a tiny bit each time they’re accessed.
When enabling text compression, do it with the familiar gzip, deflate or brotli archive formats. If you’re not quitre sure what this means, consult a web developer. They will probably recommend gzip compression using .htaccess. For our part, we took the easy route of enabling text compression through the AutoOptimize plugin.
Preload Key Requests
This page speed optimization technique involves preloading assets that are currently offscreen but will almost certainly be used later by the user.
Instead of telling the browser to connect to servers right away, we will tell the browser to start loading the files in the background while the user consumes content in the upper sections of the page. This can be done manually, which would require more time and web development expertise. The faster and easier way of doing things is via AutoOptimize, so we’ll recommend sticking with it.
Avoid Large Network Payloads
Large network payloads simply refer to massive assets that have to be loaded on to browsers such as images, PDF files, unnecessary code and unused text. The larger the files, the longer it takes browsers to load them, dragging down your site speed. For mobile users, large webpages also cost money as ISPs often charge on the basis of data consumption.
To avoid bogging your site down with large network payloads, you can apply the following best practices:
- Use lighter image file formats such as JPEG, PNG, and WebP. GIF may also he used when necessary.
- Upload images at only the size you need. For instance, there’s no need to upload a 1200 x 800 pixel image file when you’ll only be displaying it at the size of 600 x 400. Larger images have larger file sizes, so be judicious in your image uploading practices.
- If you create or edit your own images, save them at the quality level of 8 in Photoshop. This level balances image quality with conservative file sizes.
- Try not to attach PDFs within webpages. If you need to upload them, house them in a separate directory and just link to them.
- In blog index pages, avoid displaying full articles. Use excerpts (read more) tags to direct users to the permalinks of each blog post.
- In ecommerce category pages, blog category pages and similar navigational pages, use paginations so users’ browsers will only have to load a portion of the linked excerpts at a time.
- Use a plugin to Lazy Load comments. Not everyone is interested in reading user chatter, so don’t load that section unless the user comes looking for it.
Keeping your website free of massive payloads takes a bit of discipline from the webmaster as well as content publishers in his team. We recommend sitting down with your writers and editors to brief them about these best practices so they don’t unknowingly contribute to your website’s slowdown.
Cut Down on JavaScript Execution Times
You can reduce the time spent parsing, compiling, and executing JS by either combining multiple JS elements into one file or running them from your webpages’ <head> sections. The first option can be done easily via AutoOptimize while the second needs to be done manually. Again, we recommend the faster and easier way to do things, which is through a plugin.
And there you have it, our tips on how to get a score of 100 on PageSpeed Insights. Keep in mind that there are other factors involved such as your hosting provider’s performance, PageSpeed Insights fluctuations and other elements beyond your control. As long as you get your scores to at least 90, though, you’ll be head and shoulders above the rest of the websites out there. Good luck!
