Performance or Page Speed is a factor Google and other search engines use to deliver the best content to the end user. If a site takes a long time to load, it reflects poorly on the search engine. Page speeds comes from two elements: the download of the webpage content; and the how hard it is for your web browser to interpret the content and turn it into a sensible looking webpage.
These are some of the issues and ways to improve performance. Some are things that a website owner can directly affect. Some of topics best left up to the pros.
Images can be too big.a 72×72 pixel icon could actually use a 1400×800 image. Maybe, a plugin failed you and request an image that is too big to be optimal. The GTMetrix report will generate optimized images for you.
Image format choices. Know the difference between GIFs (or is that GIF?), JPEGs, PNGs, SVGs and bitmaps. Use the ideal image for the role in the presentation.
Put some stuff into the Footer. Some code can always go into the footer: analytics code, helper code, code relevant to the lower sections of the page (eg. a dynamic footer).
Client side Caching
Make content cacheable. WordPress will put query strings onto the tail end of some URLs and change that string with each load to give you a new and fresh load of that image, script or styling. From an end user perspective, that takes a lot of time.
Change the Expiry date (it’s a meta data setting in the served assets) to push it days or even months into the future. That let’s a web browser shoulder some of the load and keep copies of those elements on their computer instead of downloading them new with each page load.
Third Party Assets
Easy to deploy third party code almost always kill performance. While it’s handy to drop in a snippet from Instagram, Facebook, Google, Click-to-chat, CRM tools, those can kill performance.
Pull as much as possible into your control. Download Google fonts and serve them from your site or your CDN.
Elect to leave out some of the third party assets on some pages. If performance is really important, be cautious of third party apps.
File downloads are a big time suck. Fewer files to request and smaller files are key.
Almost every web server is capable of serving out files compressed with GZip. Almost every web browser is capable of decoding GZipped files.
Store static copies of complex output (eg. leaderboards, lists of recent posts, stats).
Optimize code on the server before it is shipped to the client.
Deploy a plugin like W3 Total Cache, WP Cache, etc.
Keep-Alive: Time is lost when some browsers reacquire the path to your server with each file request. By tweaking the server’s Keep Alive, you can keep that connection active.
Content Delivery Networks (CDNs):
Use a CDN to stow and deliver some of the content.
A CDN can take the pressure off of the server.
It can deliver content from a server closer to the end client.
Flush Your Output
CSS sprites use portions of a larger image to fulfill some graphical need on your web page. Spriting isn’t a new concept– I probably built my first sprite for a video game over 25 years ago. But its role in web design is comparatively new.In pursuit of fewer file downloads, you can lump multiple elements into a single image and then use CSS to slice that image for use. There is a lot of finesse to how you slice up an image with CSS. You need to pay attention to how the image will be used and you need to be comfortable using CSS backgrounds with cropping and the repeat concepts figured out.
If these performance tips are too much for you to implement, that’s okay. The good news: we deploy these techniques on every site we deploy. Web321 sites get all of the improvements possible to let the site out-perform the competition.