Page load time: best practices

Check out below some tips that will improve your page load speed!

If you are experiencing slow page load speeds and/or a lower than desired Google PageSpeed Insights, you may want to see if you may reduce/remove the following elements from your page:

  • Images that are larger than the container in which they are used;
  • Large responsive background images (larger than 1200 px wide);
  • JPG images that were made transparent;
  • Animated gifs;
  • Empty containers;
  • Large javascripts;
  • Lots of additional styling added to the <head> tag;
  • Links to external CSS files;
  • Numerous interactive components;

Removing/reducing the amount of the elements mentioned above that are placed in the first page in your creative can be very helpful to reduce your page load time. 

Images

Your responsive pages will automatically alter the way content renders on your page, but will not necessarily optimize the file size for mobile. This makes ensuring your images are as light as possible and keeping interactive content to a minimum very helpful for mobile page speeds. We would recommend using PNG files instead of JPGs whenever possible, as PNGs are generally smaller in file size. 

Should you need to compress an image, you may use a third party such as https://compressor.io/ to help reduce the file size.

If you are using an image that is larger than the container it is placed in, consider uploading a smaller version so that the image does not need to scale to render inside that container.

Transparent Images

JPG images that have been made transparent in the platform will be turned into larger PNG images. This is done as JPGs cannot be made transparent and to help retain image quality. If you have made a JPG transparent in the platform, you may want to upload a PNG for that image instead, as it will be lighter and the size will not be affected when it is made transparent.

Interactive Content

Interactive components are a great way to add interactivity to your pages. Every component that is added to your page will affect the speed of your page. If page load time is a concern, you will want to keep your use of interactive components to a minimum. 

Scripts

Javascript that is in the <head> will have a more pronounced effect on page load as it is triggered before the rest of your content. If you are not able to remove javascript that is on a given page for tracking purposes, reach out to the vendor that supplied the script to see if there is an asynchronous version of the script or if it can be moved to the closing </body> tag where it will not have as much of an effect on page load speeds. 

Mobile

If these elements cannot be removed from your page due to it possibly affecting larger viewports, you may build out a mobile-optimized page within your creative and redirect mobile visitors to that page.

Tips & Tricks

When trying to see what is having the largest effect on page load speeds, you will likely want to first remove all scripts from your creative and test to establish a baseline. If your page is still not loading as quickly as you would like or receiving a lower than desired Google PageSpeed Insights score, you will want to review the content that is published on the first page to see if any of the above is present and make creative updates as needed.

 

*NOTE: There are some scripts and other elements that are vital to the Ion platform that Google recommends removing or altering that cannot be removed or altered without negatively impacting the functionality of the Ion platform for all customers. When optimizing your experiences, we recommend focusing on the images, interactive content and third party tracking scripts that are in place, as optimizing these elements will have the greatest impact on Google PageSpeed Insights.


If you have any questions, please contact us on help@rockcontent.com. 😀