How to turn your website speed from zero to hero
•Download as PPTX, PDF•
0 likes•202 views
Presentation slides from IT Pro Camp 2019 at Keiser University on June 1st, 2019. Tips and tricks on how to speed up your website with plugins, hosting and a little bit of code.
Recommended
More Related Content
Similar to How to turn your website speed from zero to hero
Similar to How to turn your website speed from zero to hero (20)
More from Charles Johnston
More from Charles Johnston (9)
Recently uploaded
Recently uploaded (20)
How to turn your website speed from zero to hero
- 1. How To Turn Your Website Speed From Zero To Hero
- 2. Hello!I am Charles Johnston Owner of HeartWired Digital Solutions You can find us at www.heartwireddigital.com or @heartwired_ds 2
- 3. × Hosting × Image Optimization × HTTP/s Requests × Minimization × Cleaning up old files × Caching × CDN × Other tips 3
- 4. Picking the right web host Your host many times is your superpower 4
- 5. Superhero Hosts × Dedicated hosting × Malware Scanning × Caching built in × CDN (Content Delivery Networks) Villains × Shared hosting × No scanning × No optimization tools × No warning of attacks 5
- 6. Hosting Cheap is not always worth the cost. 6
- 7. × Hosting × Image size (do not supersize) × Minimize HTTP requests × Minimize and optimize 7
- 8. “Speed Kills… Why Your Website Needs To Be Superhero Fast To Deliver Maximum Conversions” 8
- 9. Just make sure they are not slowing down your site in the process. 9
- 10. × PNG – produces higher quality images, but also has a larger file size. × JPEG – uses lossy and lossless optimization. × GIF – only uses 256 colors. It’s the best choice for animated images. 10 Choose the right file type
- 11. Want big impact? Use big image. 11
- 12. 12 • Adobe • Gimp • FileOptimizer • WPSmush • TinyPNG
- 13. 13 • Delete unnecessary images • Delete other unnecessary files • Reduce file sizes • Use CSS Sprite • Use Lazy Loading • Combine CSS and JavaScript Files • Ignore Irrelevant Assets • Use a Cache Plugin
- 14. 14 1s to 3s bounce rate increases 32% 1s to 5s bounce rate increases 90% 1s to 10s bounce rate increases 123%
- 15. 123%Whoa! That’s a big number, When many times it can be prevented! 15
- 16. Pingdom is a market-leading website monitoring service, best known for its free website speed testing tool.. Google PageSpeed Insights Google has its very own speed testing tool which measures the performance of a page for mobile devices and desktop devices. Gtmetrix is another popular speed analysis tool, and arguably the best-known of all the Pingdom alternatives. KeyCDN free website speed test tool provides an incredibly fast and easy way to determine the overall speed of your WordPress site. YSlow The tool requires installation as an add-on for your browser, but is completely free to use – and most popular web browsers are supported. Chrome DevTools This is a very popular tool among developers as it is easily accessible and a great for local debugging and testing. 16
- 17. 17
- 18. × Add Expires headers to leverage browser caching × Use a good theme (if using WordPress). 18 × Turn off ping backs and trackbacks × Enable Keep- Alive × Reducing Your redirects × Specify image dimensions × Specify a character set in HTTP headers × Put CSS at the top and JS at the bottom
- 19. × ## EXPIRES CACHING ## × <IfModule mod_expires.c> × ExpiresActive On × ExpiresByType image/jpg "access plus 1 year" × ExpiresByType image/jpeg "access plus 1 year" × ExpiresByType image/gif "access plus 1 year" × ExpiresByType image/png "access plus 1 year" × ExpiresByType text/css "access plus 1 month" × ExpiresByType application/pdf "access plus 1 month" × ExpiresByType text/x-javascript "access plus 1 month" × ExpiresByType application/x-shockwave-flash "access plus 1 month" × ExpiresByType image/x-icon "access plus 1 year" × ExpiresDefault "access plus 2 days" × </IfModule> × ## EXPIRES CACHING ## 19
- 20. × <ifModule mod_headers.c> × Header set Connection keep-alive × </ifModule> 20
- 21. Place your screenshot here Mobile Friendly Web Starting July 1, 2019, mobile-first indexing is enabled by default for all new websites (new to the web or previously unknown to Google Search). 21
- 22. THANKS!Any questions? You can find me at @heartwired_ds & charles@heartwiredtech.com 22
Editor's Notes
- Unnecessary images create web calls even when not being used. By eliminating the unused files both images and others that reduces the http calls. Reducing file sizes can reduce calls as well. CSS Sprite .. Basically, this CSS file will combine all of your image files into one. Basically, these plugins only send server requests when a user scrolls down to an image on the page. This saves your website from having to send unnecessary HTTPS server requests to the browser for images that your visitors never even come close to encountering. Combine CSS Rather than continue to send each file as a separate server request to your visitors’ browsers, though, you can merge them into a singular file.The WP Asset Cleanup plugin works similarly to how lazy loading plugins do. However, rather than focus on delaying the server requests for unviewed images, this plugin detects when there is a plugin, file, or other asset that exists within your theme, but not on that specific page. It then keeps that asset from being loaded and detected on that page; thus, decreasing the number of server requests that have to go out to browsers. Use a cache plugin unless you use a host that includes caching.
- 1 second to 3 seconds your bounce rate increases by 32% and as you can see the slower your site beyond the one second mark the more the bounce rate increases
- None of the tests are necessarily perfect but they will give you various ways to fix your site. Pick an area that is suggested, fix it and test, then fix another and test and so on until you get the speed you are happy with. Many times the speed can be caused by other things beyond just hosting, images and the other items we discussed.
- Expires headers tell the browser whether to request a specific file from the webserver or whether to get a version of a page from the browser’s cache. It is easy to add it with a little code to the .htaccess file. Themes that are built correctly and responsive usually are faster out of the box than those that are not, when in doubt less is usually more. Pingbacks and trackbacks don’t really serve any practical use in WordPress, and yet they’re often enabled by default. I’d recommend turning both of these off as they do clog up your database and increase the number of requests that are made. Enabling Keep Alive allows the client machine to download multiple files without repeatedly asking permission, which helps to save bandwidth. Again a simple code added to the .htaccess file should do the trick. 301’s and 404’s slow your site down, there are tools like screaming frog that can help spot them so they can be corrected. Before your browser can display your webpage it has to figure out how to lay out your content around your images. Without knowing the size of these images the browser work it out, causing it to work harder and take longer. For the same reason as above, it’s useful to specify a character set in your HTTP response headers, so that the browser doesn’t have to spend extra time working out which character set you’re using. It’s considered best practice to put your CSS as close to the top of your page as possible, as browsers won’t render your page before rendering the CSS file. Javascript, on the other hand, should be as close to the bottom as possible, since it prevents browsers from parsing after the tag before it is loaded and complete.
- Code snippet to add to htaccess file to add expirations to caching