5 Ways to Rocket Boost Your Website Speed & Page Load Times

Why Website Speed & Load Times are Important (00:00:47)

• Having a fast website is better than having a slow website, as it provides a more enjoyable experience for visitors, allowing them to browse more pages smoothly without interruptions (00:00:48).
• When a website loads quickly, visitors are more likely to engage with the website, browse more pages, and potentially sign up for a membership, especially if they find the website’s content and features appealing (00:01:13).
• A fast website can increase the chances of landing a sale, as visitors are more likely to explore the website, find more information, and register or make a purchase (00:01:54).
• Website speed is also an important factor for search engine optimization (SEO), as search engines like Google, Microsoft Bing, and others favor faster websites over slower ones, although it is only one factor among thousands considered for search result ranking (00:01:59).
• Overall, having a better-performing website can lead to increased visitor engagement, higher chances of sales and registrations, and improved search engine rankings, making website speed and load times a crucial aspect of website design and development (00:02:21).

How Much Should You Care About Website Speed? (00:02:27)

• Website speed is an important aspect to consider, but it should not be the only thing to focus on, and obsessing over it can be counterproductive (00:02:27).
• A fast website with poor content will not be successful, as the content and engagement of visitors are crucial factors in determining the website’s success (00:02:42).
• It is essential to strike a balance between website speed and content quality, as a website with good content can be forgiving of minor speed issues, but extremely slow speeds can still be a problem (00:03:58).
• Smaller, lighter pages with fewer elements will load faster than larger pages with many elements, such as high-quality images and third-party tools (00:04:34).
• Stacking multiple third-party tools can slow down a website, as they add heavy resources that consume a lot of bandwidth (00:05:14).
• Maintaining reasonable Performance indicator (KPIs) and benchmarks for website speed is important, and if there are obvious speed issues, they should be reported to the relevant team for improvement (00:04:11).
• The relationship with the community and the quality of content are more important than website speed, as a good relationship can make visitors more forgiving of minor speed issues (00:04:00).

Speed Considerations 101 (00:05:30)

• When utilizing third-party tools on a website, it is essential to consider the value they provide versus the speed cost they incur, and determine whether they are necessary for all pages, as this can affect users (00:05:30).
• The embed code provided by third-party tools often loads on all pages, but it may only be necessary to load on specific areas of the website, so it is crucial to be mindful of this when deciding how to use these tools (00:05:43).
• Some of the top offenders when it comes to third-party tools that use a lot of resources include Google dynamic display ads, live chat tools, and social networking plugins, such as Twitter, Facebook, or share buttons (00:06:08).
• Instead of using all the available third-party tools, it is better to use them like “tapas meals” – small and specific to certain pages or areas of the website, as this can help improve the overall user experience (00:07:07).
• By moving third-party resources to the right places on the website and loading them only where necessary, it is possible to have the desired functionality without compromising the website’s speed (00:07:36).
• There are new settings available that can help optimize website speed, and it is recommended to take advantage of these settings to improve the website’s performance (00:07:57).

NEW: Enable Resource Delivery via CDN (00:08:21)

• Enabling resource delivery via a Content Delivery Network (CDN) can greatly improve website speed, especially for sites with international users, as it allows resources to load more efficiently for visitors (00:08:22).
• The setting to enable resource delivery via CDN can be found in the advanced settings, and it can be easily located by searching for the keyword “optimization” (00:08:45).
• Once the “enable resource delivery” setting is turned on, default resources will be loaded from the CDN network instead of locally from the domain name, resulting in more efficient loading (00:09:07).
• The CDN network is a content delivery network that has been subscribed to, and it is responsible for loading the default resources that make the site functional (00:08:27).
• To enable resource delivery via CDN, no additional configuration is required, and it can be activated by simply turning on the “enable resource delivery via CDN” option (00:08:40).
• Enabling resource delivery via CDN is one of the key optimization settings, and it is the first one on the checklist, followed by other settings such as “only load Google Maps when requested” (00:08:59).

NEW: Only Load Google Maps when Requested (00:09:30)

• Google Maps is considered a significant contributor to bloatware on websites that feature maps, and efforts have been made to optimize the Google Maps JavaScript to only load when requested by the visitor or when the page needs it, resulting in tremendous improvements to scores (00:09:32).
• To implement this optimization, users can simply toggle a switch, but it is essential to note that customized widgets may conflict with this setting, and an alert will be displayed to indicate what needs to be disabled or updated (00:09:56).
• The setting to only load Google Maps when requested can be found in the advanced settings under optimization, and users can enable it by turning on the “only load Google Maps when requested by user” option (00:10:10).
• If an alert appears indicating that a customized widget is conflicting with this setting, users will need to edit or disable the widget before enabling the optimization, and instructions will be provided to address these warnings (00:10:20).
• After resolving any conflicts, users can re-enable the optimization and save their changes to improve their website’s performance (00:10:30).

NEW: Use ImageKit for Image Delivery (00:10:36)

• ImageKit is a third-party tool that offers a free plan with 20 gigabytes per month, which can serve images from its content delivery network, and this can be beneficial for website speed, as seen at (00:10:36).
• ImageKit can automatically convert images to the WebP format in real-time, which is a format that speed tools like Google Page Speed and GT Metrics prefer, as mentioned at (00:10:53).
• To set up an ImageKit account, one needs to sign up for a free account, verify their email, and create a slug for the URL that will be used for their images, as explained at (00:13:25).
• After setting up the account, one needs to go to the external storage section, click on “add new”, and select the base URL of their website, which is typically the HTTP or HTTPS URL, as described at (00:14:13).
• The process of setting up ImageKit involves registering for a free account, going to external storage, and adding a new storage location with a nickname and the base URL of the website, as outlined at (00:14:11).
• Before setting up ImageKit, the page speed score of the website can be checked using tools like Google Page Speed, and this can be done by reloading the page and running a page speed test, as shown at (00:12:02).
• ImageKit can help reduce the size of images, and this can be demonstrated by comparing the size of an image before and after using ImageKit, as seen at (00:12:56).
• The region where the images will be served from can be chosen during the setup process, and it is recommended to choose a region that is closer to the majority of the website’s users, as mentioned at (00:13:48).
• To optimize website speeds and page load times, a content delivery network can be utilized, and setting up an account for a website takes approximately 30 seconds to a minute (00:14:43).
• Creating a URL endpoint is necessary, which involves clicking on “URL endpoint” and “add new” to create a unique identifier, and this process allows for multiple websites to be managed (00:14:58).
• The URL endpoint is then attached to an existing origin, and the external resource selected is connected to the endpoint, after which the URL is copied and saved (00:15:18).
• The copied URL is then pasted into the advanced settings under the “use content delivery network for images” option, which helps reduce image size and improve page load times (00:15:46).
• Using a content delivery network for images, such as ImageKit, can significantly reduce image size, with an example showing a reduction from 72 kilobytes to 5 kilobytes, resulting in faster page load times (00:16:44).
• ImageKit is a free service that provides 20 gigabytes per month, which is sufficient for most users, and it serves images in WebP format, cutting the size significantly and improving page speed scores (00:17:10).
• The process of using ImageKit is straightforward, requiring only the pasting of the URL into the advanced settings, and it is highly recommended for image delivery due to its effectiveness in reducing image size and improving page load times (00:17:35).

Developer Hub → Image Settings (00:17:43)

• The image settings section in the Developer Hub section of the directories admin is recommended to be checked, as it allows for the optimization of image sizes uploaded by site members (00:17:43).
• This section is useful in preventing large images from being uploaded, such as profile images that are 6000 pixels wide, which can be scaled down proportionally to the set max width and max height (00:17:49).
• To ensure reasonable image sizes, it is suggested to visit the image settings page, especially if it has not been checked in a while, and verify that the sizes are not excessively large, such as 8000 or 6000 pixels (00:18:07).
• If unsure about the image sizes or if they appear to be too large, the restore default button can be clicked to reset the sizes to safe defaults, which is a safe and recommended action (00:18:30).
• By setting reasonable image sizes, the optimization and delivery of images on the site can be enhanced, preventing large images from taking over the site or web pages (00:18:49).
• To apply the default image sizes, the restore defaults button can be clicked, followed by saving the changes, which is a simple and easy step to take (00:19:04).

ImageOptim.com/online (00:19:11)

• Many images uploaded to media managers have large file sizes due to excess metadata, such as location tags and date tags, which can be reduced using tools like ImageOptim, a free online tool that shrinks image file sizes significantly (00:19:38).
• To demonstrate the effectiveness of ImageOptim, an example is given where a screenshot of a page is saved as a JPEG in Adobe Photoshop, resulting in a large file size of 432 kilobytes, and then optimized using ImageOptim, which reduces the file size to 233 kilobytes while maintaining the same image quality (00:20:11).
• ImageOptim is a useful tool for creating landing pages or uploading images to media managers, as it helps reduce image file sizes and improve page load times, and it is recommended to use it to optimize images before uploading them, especially for large images that can be reduced in size without compromising quality (00:21:56).
• Best practices for image optimization include keeping image file sizes under 200 kilobytes, using tools like ImageOptim or Image Kit to compress images, and being mindful of image dimensions, as full-width screen images do not need to be more than 2000 pixels wide (00:22:08).
• Additional recommendations for optimizing website speed include enabling CDN resources, using lazy load for Google Maps, and utilizing Image Kit, which can help increase page load speeds when loading images (00:22:21).
• It is also suggested to check image settings in the developer hub and restore defaults if necessary, as well as using ImageOptim to optimize larger images before uploading them to media managers, especially when working on landing pages or custom squeeze pages (00:22:33).