Increase Site Performance
Last updated: May 6, 2024
This help page outlines general concerns that usually deal with audits of FareHarbor website’s performance. FareHarbor.me Product Team are constantly working towards improving performance. It is important to remember that all sites are on a multisite Wordpress install but each individual site can perform differently based on content.
For how to interpret or discuss Core Web Vitals or Page Speed Insight (PSI) reports, please see this help doc.
Web Performance Audits
FareHarbor only uses the Lighthouse auditing tool from Google, as Google is the one who controls rankings and general SEO guidelines that many other companies follow and adhere to. It is also free to use and can be run on any website from within Chrome.
Note: While we are aware that there are other tools that perform audits for website performance and speed, FareHarbor adheres to the standards set by Google. Feedback will always be considered and we are always willing to look over other audits, but all benchmarks and improvements will considered against the industry standard.
How to run a Lighthouse audit
- Open up the desired website in Chrome.
- Right click and inspect the website.
- In Chrome’s developer tools click Audits Tab.
- Check the desired device, audits and throttling.
Our recommendations for audits: Performance and SEO. We do NOT use PWA. See below for more information.
General things that FareHarbor sites do to increase performance
- Leverage different levels of caching, both at a server, browser, and Wordpress level
- Use responsive designs so that all sites are mobile friendly including properly sized images for screen size as well as element.
- Serve all websites over HTTPS with each site having their own SSL
- Route traffic so that when someone accesses a site a server closer to them spins it up rather than one remote server.
- Use robust infrastructure built on AWS with high security. Security points can be found here
- Use a CDN to load in all essential assets
- Minify HTML, CSS, and JavaScript
- Sites adhere to accessibility standards
Improving site performance is a huge part of conversion rate optimization and has always been our priority.
FareHarbor.me Product Team has implemented the following changes to all FareHarbor Sites to improve site speed:
- Strict caching
- Load only the CSS and JS that applies to the individual site
- Resize photo files to load faster
- Lazyload to defer the loading of images on a page to a later point in time – when – those images are needed as a user scrolls down any given site’s page.
- Minify external files by removing unnecessary elements and rewriting code to reduce the file size
In progress improvements to improve site speed(2021):
- Integrated Service Workers:
- caches all of a site’s necessary resources onto the user’s browser to deliver a rich, app-like experience
- allows the web page to work offline if the user loses internet, or the server of the web page ever goes down (with some limitations, such as not being able to make bookings)
- In summary, this will speed up the site and increase Lighthouse scores, and it’s a modern approach to how we are handling network requests
What each site can do to increase performance
- External scripts scripts come with a cost so make sure that it is worth it. Each script or additional resources such as high resolution images, or high resolution videos means more resources are being loaded onto a page. This will cause the load time of a page to increase.
- Remove all external scripts that FareHarbor does not control off of the homepage as they load in external assets that can slow down load time and time to first meaningful paint (when the content above the fold has loaded). Remove scripts to pages that do not need to rank higher in Google as page speed is factored into SEO rankings.
- If scripts are necessary, consider loading in using a tag manager if possible, such as GTM. GTM is great for loading scripts asynchronously and therefore do not interfere with initial page load and are great for updating scripts on the fly without having to get the FareHarbor.me Product Team involved.
- Reduce the amount of content other than text on a page. As a general rule, videos and images are the most expensive forms of media. Text is the least expensive. There should be a healthy balance of appropriately sized images in the correct format. For example JPEGs are less expensive performance wise than PNGs. SVGs are even better, but due to security reasons within Wordpress we do not currently suggest this implementation and do not support the direct upload of SVGs. Use videos instead of GIFs, as they are the most expensive.
- Consider downsizing images without losing the quality with services such as https://tinyjpg.com/ or using photoshop or another image editing software and decreasing the DPI and size of the images. Learn more about image optimization.
- Reduce the amount of content on the homepage. The less there is to load per high ranking pages, the faster they will load.
- It all comes down to balance between content, tracking, and images. We are rolling out more features for future templates that will be more beneficial in the long run, but each site is different and some methods will work better than others.
Common Questions
What is first meaningful paint?
First meaningful paint is the time it takes to when content above the fold has rendered and web fonts have loaded. This is typically when a user perceives that the website has loaded and can begin to interact.
What can I do to make my site perform better?
See the above section. Most likely just remove external scripts that cause external load time such as Facebook, Instagram, Google maps, etc.
Why does my site not score well in the Progressive Web App category?
A misconception about Progressive Web Apps is that all websites should use their guideline and rules, but they should only be followed if the website can also be used separately as an app.