3 simple steps improving pagespeed in wordpress

24
3 easy steps in Wordpress JUNE 17, 2016 | ANTTI ALATALO Improving PageSpeed

Upload: antti-alatalo

Post on 13-Apr-2017

301 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: 3 simple steps improving pageSpeed in Wordpress

3 easysteps

in Wordpress

JUNE 17, 2016 | ANTTI ALATALO

ImprovingPageSpeed

Page 2: 3 simple steps improving pageSpeed in Wordpress

RANKING FACTOR

BENEFITS OFIMPROVINGPAGESPEED

IMPROVES QUALITY SCOREIN ADWORDS

BETTER UX

Page 3: 3 simple steps improving pageSpeed in Wordpress

Is it time consuming?

But there might be little bit configuring involved, depending how your theme operates.

NOT REALLY...

Page 4: 3 simple steps improving pageSpeed in Wordpress

CACHING

3 STEPS FOR IMPROVINGLOADING TIME

MINIFYING CODEIMAGE COMPRESSION

Page 5: 3 simple steps improving pageSpeed in Wordpress

TESTING PAGE LOAD SPEED

Google PageSpeed InsightsGTmetrix

TOOLS FOR TESTING LOAD SPEED

Page 6: 3 simple steps improving pageSpeed in Wordpress

Google PageSpeed InsightsEasy and simple to understand

Numeral scoring for mobile and desktop

Page 7: 3 simple steps improving pageSpeed in Wordpress

"Fixing this would have a measurable impact on page performance."

!

!

"Consider fixing this if it is not a lot of work."

"No significant issues found. Good job!"

- GOOGLE DEVELOPERS

Color codes

Page 8: 3 simple steps improving pageSpeed in Wordpress

GTmetrixGives little bit more details

Uses Alphabetical scoring (A being best grade)

Page 9: 3 simple steps improving pageSpeed in Wordpress

1.Image compressionREDUCE FILE SIZE REMOVE "JUNK DATA" (EXIF METADATA ETC.)

Page 10: 3 simple steps improving pageSpeed in Wordpress

Option 1:Drag´n drop

Free desktop software

ImageOptim

Page 11: 3 simple steps improving pageSpeed in Wordpress

Option 2:If you´re images have been already uploaded to your

site...

EWWW Image Optimizer let´s you bulk-compress

images in the backend of Wordpress

Page 12: 3 simple steps improving pageSpeed in Wordpress

SettingsNo need to modify, default setting will work justfine.

Page 13: 3 simple steps improving pageSpeed in Wordpress

OptimasationQuick & Easy

1.

2.

3.

Page 14: 3 simple steps improving pageSpeed in Wordpress

2.Minifying codeREMOVES CHARACTERS AS:

WHITE SPACE, NEW LINE, COMMENT OUT CODE ETC.

Page 15: 3 simple steps improving pageSpeed in Wordpress

AutoptimizeRemoves empty spaces from code

Minifies and compresses scripts and styles

Page 16: 3 simple steps improving pageSpeed in Wordpress

1.

Configuring the plugin

2. 3.

Page 17: 3 simple steps improving pageSpeed in Wordpress

CHECK THAT EVERYTHINGWORKS IN YOUR SITE.

SOMETIMES COMPRESSIONMIGHT CAUSE ERRORS IN YOUR

SITE. IF THIS HAPPENS JUST"UNCHECK" EACH OPTION ONE

BY ONE.

YOU CAN PLAY AROUND WITHADVANCED SETTINGS IF

EVERYTHING IS OK.

Page 18: 3 simple steps improving pageSpeed in Wordpress

CachingCREATE STATIC VERSION OF THE SITE / PAGE IN CACHEMEMORY.IMPROVES LOADING TIME SIGNIFICANTLY.

DYNAMIC PAGES TO STATIC

Page 19: 3 simple steps improving pageSpeed in Wordpress

Fastest CacheA lot of different plugins available

Simple and easy to use

Page 20: 3 simple steps improving pageSpeed in Wordpress

Step 1: Check the options as followed

Page 21: 3 simple steps improving pageSpeed in Wordpress

Step 2:

Open new window -> go to your siteRefresh the page 2 times (creates cache)Check that everything worksTest your page speed

Page 22: 3 simple steps improving pageSpeed in Wordpress

My results

BEFORE

AFTER

Page 23: 3 simple steps improving pageSpeed in Wordpress

My results

BEFORE

AFTER

Page 24: 3 simple steps improving pageSpeed in Wordpress

Links

GTmetrix

Google PageSpeed Insights

LOADING TIME TEST

IMAGE COMPRESSIONImageOptim

EWWW Image Optimizer

CACHING & CODE MINIFYINGWP Fastest CacheAutoptimize