You also know slow-loading website will impact user experience. Pages that load fast have better user retention and lower bounce rates, and win user’s trust faster.<\/p>\n\n\n\n
Google Search Console<\/p>\n\n\n\n
Although it technically doesn’t measure site speed, but you can use the new core web vitals report to find loading issues you need to take care of.<\/p>\n\n\n\n
PageSpeed Insights<\/p>\n\n\n\n
Developed by Google, PageSpeed Insights is a site speed tester capable of identifying underlying load speed issues. It\u2019s as simple as entering the URL you want to inspect, and the tool will crawl your site and create a full report.<\/p>\n\n\n\n
GTmetrix<\/p>\n\n\n\n
If you want more advanced features or if you want to test your page speed on specific locations, GTmetrix is a helpful tool.<\/p>\n\n\n\n
1.Optimize your image <\/p>\n\n\n\n
Image file size <\/p>\n\n\n\n
You should aim for the smallest file size possible. A good mark for big images is 150kb to 500kb per image. <\/p>\n\n\n\n
File format<\/p>\n\n\n\n
It\u2019s not uncommon to use PNG images when creating content. They are easier to handle, after all. Without getting into a whole debate on image extensions, we recommend using JPGs. These have become the standard format for images on the web. They do not lose quality, and their file size is small.<\/p>\n\n\n\n
Image dimensions<\/p>\n\n\n\n
Make sure to upload a decent image that doesn\u2019t lose quality while scaling. I.e., 800 x 1200 images are the most common on articles.<\/p>\n\n\n\n
2.Use lazy loading<\/p>\n\n\n\n
We want to make the browser render the top of the page first (above the fold content) before loading the rest of the page.<\/p>\n\n\n\n
The great thing about it is that we can implement it natively using the loading<\/em> attribute in our images and iframes.<\/p>\n\n\n\n These attributes will tell the browser only to download the elements once the user has scrolled to the element and it is now visible on the viewport.<\/p>\n\n\n\n I hope you have found this useful. <\/p>\n\n\n\n By Ami<\/p>\n<img src=\u201dmyimage.jpg\u201d loading=\u201dlazy\u201d alt=\u201d\u2026\u201d \/>\n\n<iframe src=\u201dcontent.html\u201d loading=\u201dlazy\u201d><\/iframe><\/code><\/pre>\n\n\n\n\n
![\"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"](\"\/\/b.hatena.ne.jp\/images\/entry-button\/button-only@2x.png\")
<\/a>