Fixing site load times?
Test your page here PageSpeed Insights - Google Developers and you will see all suggestions for making your site faster.
Here are some basic things you can follow to increase your site speed:
- Post-load content: Don't load all of your stuff like JavaScript files, images, data, at first. Make a flow of which content your user should see first and load it in that order. This will reduce the user's perceived waiting time because they will be able to look at the loaded parts of the site while the other stuff loads.
- Pre load content: Benefit from the user's idle time. Load content in the backgroud using Ajax or image-caching tricks, so the user will not notice that the page is still "working". Because files are pre-loaded into the browser's cache already, when the user loads the next page or view, it will seem very fast because the data is already stored locally. (In short, the main idea behind post and pre-loaded content is to show the user what they want at first and then load other content in the background before they need to see that content. Use JavaScript or jQuery Ajax to load your content and cache them.
- Optimize Images:
- Reduce the quality of images to a extent which the human eye cannot figure out. You can compromise a little bit of image quality for greatly decreased file sizes, and thus much greater download/load speed.
- Don’t use the browser to downscale images: Don’t send a huge image and let the browser scale to a significantly smaller size using CSS width and height. Manually size your image to roughly the correct size, even if you do want to use some scaling like a fully-stretched background image.
- Use CSS replacement for the images.
- Use CSS sprites: Combine your small images to one image and show the proper part using CSS.
- Make images cacheable.
- Keep CSS on top: Keeping CSS on top make you feel page is loading faster. As CSS is applied as portion of content is loaded.
- Keep JavaScript at the bottom: JavaScript is used to manipulate DOM elements, so load the DOM element first so that the page will be rendered first, and then load your script. JavaScript also blocks parallel downloads.
- Minify JavaScript and CSS: Minifying CSS and JavaScript can reduce its size up to 50 to 30 % of the original copy.
- Use External CSS and JavaScript: .css and .js files are cacheable, so use external CSS and JavaScript files.
- Split component across domains: Split your component into two or three domains like
example.com
tocom1.example.com
andcom2.example.com
. This allows you to maximumize parallel downloads. Don’t keep more than two to four domains otherwise it will give you a DNS lookup penalty.