So when I was presented with the problem I investigated on why the slowness was occurring on several pages. The issue was with the downloading of various scripts and images in the background before the onload of a page. I was really stumped on how would I improve this issue since we needed to use those scripts and images on several pages and removing them wouldn’t be a solution to the problem. Though through researching there are several ways to optimize these issues and here are some steps that I believe we as a team at EmpowHER improved on our site:
- Using CSS Sprites instead of individual images.
- Using fonts instead of images for links and text on the site.
- Using Varnish to cache the site, or using other forms of caching techniques.
- SQL query optimization.
- Lastly what I contributed was the implementation of the lazy loading technique.
So now to talk about what I implemented and where I retrieved this information. When I started searching for the solution I found the technique and how to implement it. The guide that I used was written by Emil Stentstrom, and if you want to find out all the details go to his website, but I will briefly summarize what I used and how much I improved on site load time.
Using the following code: